Twitter bootstrap 服务器端分页的引导表工作不正常

我需要通过一个Flask web应用程序通过web将大型数据集服务到一个表中。我正在尝试使用实现服务器端分页，但无法使其正常工作。我有点不明白。当表呈现时，它正确地知道表中的行数，并构建适当的页面列表。但是，表中的所有行都在每个页面上呈现

此外，此表的排序和搜索功能只会返回完整的表。bootstrap-table.js代码似乎具有对服务器端数据进行排序和搜索的功能，但我对此不确定

我的引导表代码如下所示

<table class='sastable' id='servertable' data-toggle="table" data-classes='table table-condensed table-bordered'
   data-url="/manga/gettable"
   data-show-columns='true' data-toolbar='#toolbar' data-id-field='id'
   data-pagination="true" data-side-pagination="server"
   data-page-list="[10, 20, 50, 100]" data-search="true">

<thead>
    <tr id='head'>
        <th data-field="state" data-checkbox="true">ID</th>
        <th data-field="id" id='id' data-visible='false' data-switchable='false'>ID</th>
        {% for column in keys %}
        <th id='{{column}}' data-field='{{column}}' data-sortable='true' data-sorter="sort"
            data-cell-style="{{'cellStyle' if (column=='plate' or 'status' in column or 'comp' in column) else ''}}"
            data-visible="{{'false' if column not in cols else 'true'}}">{{column|upper}}</th>
        {% endfor %}        
    </tr>           
</thead>    

它基本上只是从文件中加载一个表，并将其转换为JSON字典类型的格式。此表中约有50行，假设默认每页10条记录，则正确地生成5页，但实际上每页上显示所有50行

一个假定可以工作的例子是正确的分页、排序和搜索，但我不理解它是如何工作的

---

我觉得我错过了一些基本的东西。我错过了什么？谢谢

服务器端分页

意味着您需要在服务器端实现分页

您的服务器代码缺少处理页码、每页行数、订单等的内容。服务器应仅返回该页的行

查看官方示例，并在更改页面时观察ajax返回值。

这是第4页10行的请求和返回

请求URL:

http://wenzhixin.net.cn/examples/bootstrap_table/data?limit=10&offset=30&order=asc

返回值：

{
  "total": 800,
  "rows": [
    {
      "id": 30,
      "name": "Item 30",
      "price": "$30"
    },
    {
      "id": 31,
      "name": "Item 31",
      "price": "$31"
    },
    {
      "id": 32,
      "name": "Item 32",
      "price": "$32"
    },
    {
      "id": 33,
      "name": "Item 33",
      "price": "$33"
    },
    {
      "id": 34,
      "name": "Item 34",
      "price": "$34"
    },
    {
      "id": 35,
      "name": "Item 35",
      "price": "$35"
    },
    {
      "id": 36,
      "name": "Item 36",
      "price": "$36"
    },
    {
      "id": 37,
      "name": "Item 37",
      "price": "$37"
    },
    {
      "id": 38,
      "name": "Item 38",
      "price": "$38"
    },
    {
      "id": 39,
      "name": "Item 39",
      "price": "$39"
    }
  ]
}

---

我在django上解决了这个问题：

我的js：

$(document).ready(function(){
    ...
    ajaxGet();
});

function ajaxGet(){
    var table_params = $('#docs_table').bootstrapTable({
        url: 'ajax/test_1/data?',
        queryParams: function (p) {
            return {
                limit: p.limit,
                offset: p.offset,
                sort: p.sort,
                order: p.order,
                'data[]': [selected_data],//for multi-select filter

            };
        }
    });
    $('#docs_table').bootstrapTable('refresh');
}

py:

$(document).ready(function(){
    ...
    ajaxGet();
});

function ajaxGet(){
    var table_params = $('#docs_table').bootstrapTable({
        url: 'ajax/test_1/data?',
        queryParams: function (p) {
            return {
                limit: p.limit,
                offset: p.offset,
                sort: p.sort,
                order: p.order,
                'data[]': [selected_data],//for multi-select filter

            };
        }
    });
    $('#docs_table').bootstrapTable('refresh');
}

def test_1(request):

        q = m.Doc.objects.all()

        data = request.GET.get('data[]')


        if data:
            data = data.split(',')
            q = q.filter(id__in=pis)

        paginator = Paginator(q, 10)

        sort = request.GET.get('sort', 'id')
        order = request.GET.get('order', 'asc')
        limit = int(request.GET.get('limit'))
        offset = int(request.GET.get('offset'))

        if order == 'asc':
            q = q.order_by(sort)
        else:
            q = q.order_by('-' + sort)

        paginator = Paginator(q, limit)
        page = int(offset / limit) + 1

        try:
            docs = paginator.page(page)
        except PageNotAnInteger:
            docs = paginator.page(1)
        except EmptyPage:
            docs = paginator.page(paginator.num_pages)

        docs_dict = {
            'total': paginator.count,
            'rows': [{'id': doc.id,
                      'name': doc.name,
                      } for doc in docs]
        }

        return JsonResponse(docs_dict)