Django和jQuery，实现Ajax表格数据分页展示

最新推荐文章于 2024-05-17 20:03:31 发布

原创

最新推荐文章于 2024-05-17 20:03:31 发布

· 2.2k 阅读

23 ·

版权

文章标签：

#状态模式 #okhttp

1.需求描述

当存在重新请求接口才能返回数据的功能时，若页面的内容很长，每次点击一个功能，页面又回到了顶部，对于用户的体验感不太友好，我们希望当用户点击这类的功能时，能直接加载到数据，请求后端的操作不会呈现在前端，给用户一种无感知的状态。

若希望在不重新加载页面的情况下，动态的获取某个功能点的数据，需要用到Ajax技术，当点击某个功能的按钮时，触发Ajax请求，由Ajax与后端（Django）进行交互，传递一些参数得到新数据后，最后渲染在前端页面。

需要考虑一个问题：在前端上的分页按钮是有样式的，且样式是根据后端返回的参数进行判断，最终决定给哪一个分页按钮增加样式，为了避免分页数据可以正常获取，但是分页样式不会改变，基于这个问题进行思考，最后的解决方法是：将分页部分的代码也通过Ajax进行渲染。

2.将表格数据和分页功能的前端代码进行拆分

1）order_data_tables.html代码文件存放表格数据。

<table class="table-content table table-bordered table-hover">
    <thead class="thead-dark">
    <tr>
        <th>品牌</th>
        <th>商品名称</th>
        <th>商品编号</th>
        <th>订单编号</th>
        <th>颜色</th>
        <th>进价</th>
        <th>零售价</th>
        <th>净赚利润</th>
        <th>数量</th>
    </tr>
    </thead>
    <tbody style="font-size: 14px;">
    {% for data in order_page_data %}
        <tr>
            <td>{
  { data.brand }}</td>
            <td>{
  { data.commodity_name }}</td>
            <td>{
  { data.commodity_number }}</td>
            <td>{
  { data.order_number }}</td>
            <td>{
  { data.commodity_color }}</td>
            <td>{
  { data.purchasing_price }}</td>
            <td>{
  { data.retail_price }}</td>
            <td>{
  { data.profit }}</td>
            <td>{
  { data.quantity }}</td>
        </tr>
    {% endfor %}
    </tbody>
</table>

2）order_data_page.html代码文件存放分页功能。