bootstrap-table with server-side pagination not working correctly

Question

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.

Answer 1

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)

Answer 2

server-side pagination means you need to implement pagination on server side.

Your server code is missing something to handle page number, rows per-page, order etc. Server should only return the rows for that page.

Check out the official example, and observe ajax return value when you change page. http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#server-side-pagination-table

This is the request & return for page #4, 10 rows.

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

Return value:

{
  "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"
    }
  ]
}