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');
}

吡啶：

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

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

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

这是请求＆amp;返回第4页，10行。

请求网址：
server-side pagination

返回值：

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

服务器端分页的bootstrap-table无法正常工作

2 个答案: