带有服务器端分页的引导表无法正常工作

Question

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

此外，此表的排序和搜索功能只返回完整的表。 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>    

我的 data-url 属性 '/manga/gettable' 是一个链接，它以这种格式返回 JSON 数据，jsfiddle

在/manga/gettable中传递数据的代码是

@tables_page.route('/manga/gettable', methods=['GET','POST'])
@tables_page.route('/gettable', methods=['GET','POST'])
def getTable():
''' Retrieve tables for server-side delivery '''


pl = plateList()
pl.load()
table = pl.plate2d    
size = len(table)

data = OrderedDict()
data['total'] = size
data['rows'] = []
cols = table.columns.keys()

for row in table:
    data['rows'].append({col:row.data[i] for i,col in enumerate(cols)})

return jsonify(data)

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

here 是一个具有正确分页、排序和搜索功能的示例，但我不明白它是如何工作的。

我觉得我在这里缺少一些基本的东西。我在这里想念什么？谢谢。

Answer 1

我在 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:

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)

Answer 2

server-side pagination 表示需要在服务器端实现分页。

您的服务器代码缺少处理页码、每页行数、顺序等的内容。服务器应该只返回该页面的行数。

查看官方示例，更改页面时观察ajax返回值。 http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#server-side-pagination-table

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

请求网址：
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"
    }
  ]
}