引导表与服务器端分页不能正常工作 [英] bootstrap-table with server-side pagination not working correctly

问题描述

我需要通过一个Flask的Web应用程序将大型数据集放到网上的一个表格中。我试图使用引导程序表扩展来实现服务器端分页，而我无法正常工作。有些事情我不理解。表格呈现时，它正确地知道我的表中的行数，并建立一个适当的页面列表。但是，表格中的所有行都会在每个页面上呈现。

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

我的引导表代码看起来像这样

 < table class ='sastable'id ='servertable'data-toggle =tabledata-classes ='table table-condensed table-bordered'
 data-url =/ manga / gettable
 data-show -columns ='true'data-toolbar ='＃toolbar'data-id-field ='id'
 data-pagination =truedata-side-pagination =server
 data-page -list =[10，20，50，100]data-search =true> 
 
< thead> 
< tr id ='head'> 
< th data-field =statedata-checkbox =true> ID< / th> 
< th data-field =idid ='id'data-visible ='false'data-switchable ='false'> ID< / th> 
 {％为键列中的列} 
  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

$ b $ p

提供/ manga / gettable中的数据的代码是

$ $ p $ @tables_page。 route（'/ manga / gettable'，methods = ['GET'，'POST']）
@ tables_page.route（'/ gettable'，methods = ['GET'，'POST']）$ b $ （）
'''检索服务器端交付表'''


pl = plateList（）
pl.load（）
table = pl.plate2d
size = len（table）

data = OrderedDict（）
data ['total'] = size
data [''行'] = []
cols = table.columns.keys（）

表中的行：
data ['rows']。append（{col：row。数据[i]为我，在列举（cols）}）

返回jsonify（数据）


基本上只是加载一个表格m文件，并将其转换为JSON字典类型格式。这个表里面有50行，正确的做了5页，假设每页默认10条记录，但实际上每页都显示50行。

一个所谓的工作示例，正确的分页，排序和搜索是这里，但我不明白它是如何工作的。

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

解决方案

我解决了这个问题： / b>

  $（document）.ready（function（）{
 ... 
 ajaxGet（）; 
}）; 
 
函数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（请求）：
 
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）
除了PageNotAnInteger：
 docs = paginator.page（1）
除了EmptyPage：
 docs = paginator.page（paginator.num_pages）
 
 docs_dict = {
'total'：paginator.count，$ b $'rows'：[{ 'id'：doc.id，
'name'：doc.name，
} for doc in docs] 
} 
 
 return JsonResponse（docs_dict）
  

I need to serve large datasets into a table over the web, through a Flask web-app. I'm trying to implement server-side pagination using the bootstrap-table extension and I'm having trouble getting it to work correctly. There's something about it that I'm not understanding. When the table renders, it correctly knows the number of rows in my table, and builds an appropriate page list. However, all the rows in the table get rendered on every single page.

Also, the sorting and searching capabilities with this table only ever returns the full table. The bootstrap-table.js code appears to have functionality in place to sort and search with server-side data, but I'm not sure on that.

My bootstrap table code looks like this

<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>    

where my data-url attribute '/manga/gettable' is a link that returns JSON data in this format, jsfiddle

The code that delivers the data in /manga/gettable is

@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)

which basically just loads a table from a file, and converts it into a JSON dictionary type format. This table has ~50 rows in it, and correctly makes 5 pages, assuming the default 10 records per page, yet actually displays all 50 rows on every page.

A supposedly working example, with correct paging, sorting, and searching is here, but I don't understand how it's working.

I feel like I'm missing something basic here. What am I missing here? Thanks.

解决方案

I solved this on django:

my 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)

这篇关于引导表与服务器端分页不能正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！