server-side pagination not displaying pages or row count ; search not working ; sort not working

[havok2063]

Hi. I'm new here. I just switched my pagination over to server-side, with the default parameters, as indicated on the example page, and a bunch of javascript related things aren't working.

• My table of 32 rows displays all the rows in one table, with no pages. It also now returns at the bottom

'Showing 1 to 0 of 0 rows' , with no page controls on the right-hand side.

My table is set set up like

<table class='sastable' id='table' data-toggle='table' data-classes='table table-condensed table-bordered' data-sort-name="{{'plate' if stage=='3d' else 'mjd'}}" data-sort-order='asc'
    data-show-columns='true' data-pagination='true' data-search='true' pageSize='25' 
    data-select-item-name='input' data-toolbar='#toolbar' data-id-field='id' 
    data-side-pagination='server' data-page-list="[10, 25, 50, 100]" name='sastable'>
 </table>

Am I missing something in the setup to activate it? I could not find another issue related to this one.

• The column sorting no longer works anymore.
  • The search is also not working. I updated my bootstrap-table-flatJSON.js as indicated in this thread
    Bootstrap-table-flat + data-side-pagination="server" + search not working #434, but this did not fix the problem.

Am I missing some javascript somewhere to get the server-side pagination set up properly?

Thanks for your help.

[djhvscf]

Can you show us your json response??

[havok2063]

The response from the server-side code? Yeah I'd be happy to. What's the best way to do that?

[djhvscf]

Just debug your code.. F12 and I think you can get the json object in the constructor method.

[djhvscf]

And before that... Instead of pageSize use data-page-size="25" in your table options

[djhvscf]

And also you can't use the validation on the data-sort-name

[wenzhixin]

When you use server side, search, sort need to handle by your server. and the response data need contain these properties:

{
    "total": 100,
    "rows": [...]
}

for example: http://wenzhixin.net.cn/examples/bootstrap_table/data
https://github.com/wenzhixin/blog/blob/master/routes/examples.js

[havok2063]

@djhvscf I'm new to web developement, so I've never debugged code before through the inspection console. I'm mainly used it to look at the rendered html elements, and to debug through prints to the console. I'll look into trying to actually step through my code to find the returned JSON object. My table renders fine on screen, but none of the pagination, or client-side functionality works. From the looks of it, the JSON returned by the server has 0 rows.

Thanks for the data-page-size correction. That fixed a client side problem I was having.

@wenzhixin Thanks. I'll have a look at your example. I thought the server-side code was supposed to do this already. I'm a bit confused as to what I have to add myself versus what is taken care of already by the new code. The guy who wrote the server-side pagination code only says in his example to add the data-side-pagination='server'. There is no mention of any new javascript handling, what the data format should be into the table itself, or of which features you implemented that now break when switching from 'client' to 'server'. Is there an issue link or example that addresses these issues? Has other people experienced this?

[djhvscf]

See this.. http://jsfiddle.net/4r6g4cfu/3/light/

[havok2063]

Ok. I think I've got it kind of working, but I'm still having some issues. I've seen this example before but I guess I never quite realized that the key for it working was the data-url attribute. Since this was used in all of the examples, even the client side example, I thought this was just a convenient way of representing the data. So I wasn't used it, but still passing in my data directly into the table.

So now I have a table like

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

The '/manga/gettable' data-url points to something that returns this
http://jsfiddle.net/havok2063/3pmexete/
which I think is the right format. When I render the table, the pagination bar at the bottom displays the correct information (Showing 1 to 10 of 47 rows [10] records per page) and correctly lists the right number of pages. However, all 47 rows show up on every page, and the data isn't actually split. Also, the column sorting doesn't work, and the searching attempts to do but returns all rows.

Are these features something I have to implement myself? Looking at the bootstrap-table.js code, there are code bits that seem to do searching and sorting with server-side pagination. In the example you listed, the sorting and searching seem to work. Is this inherent in the bootstrap-table code, or something that is added somewhere else?

@djhvscf , @wenzhixin

[havok2063]

Hey @wenzhixin , can I get your help in understanding your example code you posted. I managed to get the pagination part working, and now I'm working on implementing the searching and sorting. I'm following this example https://github.com/wenzhixin/bootstrap-table-examples/blob/master/431.html, which presumably uses this example.js code (https://github.com/wenzhixin/blog/blob/master/routes/examples.js) on the server side.

In your javascript code here,

var $table = $('#table');
$(function () {
    $table.on('page-change.bs.table', function (e, number, size) {
        getData(number, size);
    });
    var options = $table.bootstrapTable('getOptions');
    getData(options.pageNumber, options.pageSize);
});
function getData(number, size) {
    $.get('/examples/bootstrap_table/data', {
        offset: (number - 1) * size,
        limit: size
    }, function (res) {
        $table.bootstrapTable('load', res);
    });
}

how are you passing the search and sorting parameters to the server? The only way I could get my server side to recognize the search text was by modifying your code to

var $table = $('#table');
$(function () {
    $table.on('page-change.bs.table', function (e, number, size, search) {
        getData(number, size, search);
    });
    var options = $table.bootstrapTable('getOptions');
    getData(options.pageNumber, options.pageSize, options.search);
});
function getData(number, size, search) {
    $.get('/manga/gettable', {
        offset: (number - 1) * size,
        limit: size,
        search: search
    }, function (res) {
        $table.bootstrapTable('load', res);
    });
}

This correctly passes the search text in, and I can properly filter and return the results, however the code always sends a final request of an empty search, which resets my results, even though my search field still has my text typed in it. Any ideas on this?

[wenzhixin]

Hi @havok2063 , you can look at this example: http://issues.wenzhixin.net.cn/bootstrap-table/#options/server-side-pagination.html

[wenzhixin]

Close this.

[havok2063]

Why do you close issues that aren't solved? Your example didn't solve the problem for me.

[wenzhixin]

OK, I thought it was resolved by mistake.

[n37r06u3]

@wenzhixin 我试了试 http://127.0.0.1:8000/data?offset=0&limit=10

搜索框字符改变的时候 还是传的offset=0&limit=10 没有传search
请问你的例子为什么会传search参数给服务端
http://issues.wenzhixin.net.cn/examples/bootstrap_table/data?search=100&order=asc&limit=10&offset=0

另外还有个order也是默认传的？

[n37r06u3]

好像data-url 就可以
自定义的

    var $table = $('#table');
    $(function () {
        $table.on('page-change.bs.table', function (e, number, size) {
            getData(number, size);
        });
        var options = $table.bootstrapTable('getOptions');
        getData(options.pageNumber, options.pageSize);
    });
    function getData(number, size) {
        $.get('xxx', {
            offset: (number - 1) * size,
            limit: size
        }, function (res) {
            $table.bootstrapTable('load', res);
        });
    }
    </script>

这种就不行 请问默认的方法你是怎么写的？

[wenzhixin]

@n37r06u3 you need to set sidePagination to server

[n37r06u3]

Use sidePagination: 'server' option to define the server side pagination of table.
啥意思 在哪里加？

我现在的时这样

不用data-url search参数就传不了

[xujianghao]

你好，我通过action类已经获得了数据库数据（json）格式，同时也传递到了页面上，但是加载到表格上却显示没有找到匹配数据。
Hello, I have been through the action database (JSON) format, and transmitted to the page, but did not find the matching load to display data form.

[n37r06u3]

$(function () {

    console.log(options)
    $table.on('page-change.bs.table', function (e, number, size) {
        var options = $table.bootstrapTable('getOptions');
        getData(options.pageNumber, options.pageSize, options.searchText);
    });
    $table.on('search.bs.table', function (e, text) {
        var options = $table.bootstrapTable('getOptions');
        getData(options.pageNumber, options.pageSize, options.searchText);
    });
    var options = $table.bootstrapTable('getOptions');
    getData(options.pageNumber, options.pageSize, options.searchText);

});

[n37r06u3]

自定义 搜索怎么弄啊

[wenzhixin]

@xujianghao, 返回来的数据格式是对的吗？
@n37r06u3，看下这个：http://issues.wenzhixin.net.cn/bootstrap-table/#options/custom-toolbar.html

[hellochi]

Hi folks,

I have the json result with total count and row array in different format.
I convert them in javascript
{
"total": 100,
"rows": [...]
}

How can I load to the data to the table? It seems it only take data-url as the parameter for server side paging.

Thanks in advance

[xujianghao]

@wenzhixin I have solved this problem

[djhvscf]

Can you show the solution? @xujianghao

[DavidKrupi]

Hi, would it be possible to create commented example/walkthrough, possibly also with sample SQL interface on server-side?
I've run into the same problem, documentation is not very clear...
In addition, option for deferred rendering would be appreciated. With client side pagination, my table renders in 2 secs in Chrome, but in IE9 it's 20 secs, in IE10 about 10 secs. That's too much.

[wenzhixin]

@DavidKrupi , I will consider your feature, I think it is the same with #256.
Close this issue now.

[gauravmahajan25]

@wenzhixin
I also have the same issue mentioned below. Since this thread is dealing with that so adding the comment here instead of new issue.

Hi folks,

I have the json result with total count and row array in different format.
I convert them in javascript
{
"total": 100,
"rows": [...]
}

How can I load to the data to the table? It seems it only take data-url as the parameter for server side paging.

Thanks in advance

[wenzhixin]

You can load from an url, or use load method @gauravmahajan25.

[glorang]

Please double check this, but it looks like client side pagination is using this.searchText while server side pagination is using this.options.searchText

I've created pull request #1798

With this fix applied server side search is working with following HTML:

    $table.on('page-change.bs.table', function (e, number, size) {
            var options = $table.bootstrapTable('getOptions');
            getRowData(number, size, options.searchText);
    });

    $table.on('search.bs.table', function (e, text) {
            var options = $table.bootstrapTable('getOptions');
            getRowData(options.pageNumber, options.pageSize, text);
    });

Cheers,
Geert

[sriramareddy143]

Hi @wenzhixin

i am using bootstrap table in my application. all the sorting logic we implemented in server side and using data-show-columns="true" in table , Now im getting Issue when i try to hide the sorted column. could you please help me on this how to do.

below is my question with details.
http://stackoverflow.com/questions/35264251/issue-with-data-show-columns-in-mvc-table

[djhvscf]

Can you give us the steps to reproduce the issue?? use this fiddle http://jsfiddle.net/wenyi/e3nk137y/18/ @sriramareddy143

[polyval]

@xujianghao 请问你是怎么解决的？我json格式也是对的，可是就是一直No matching

[jaydeepgiri]

Thanks a lot again @wenzhixin for such a great work.

Now everything is working fine on my server side pagination table ( Sorting, Searching etc., )

Hello guys i would like to let you know people that, Please utilize the following parameters inGET method to perform the database query.on server side-->

$_GET['sort'] -->> gives you the column name of the table to sort
$_GET['order'] -->> specifies the order i.e, ASC or DESC
$_GET['search']-->> gives the text to search into database
$_GET['limit']-->> specifies number of rows
$_GET['offset']-->> starting position / offset in table

Please avoid confusions and go for this.

Thank you..

[wenzhixin]

any pull request is welcome @jaydeepgiri

[nyarachm]

@jaydeepgiri Can I see how you got your search working (particularly the PHP script)? I do not know how to go about this. I also had issues with the sort but thanks to the variables you posted I got it working.

WHERE x=4 LIMIT $offset, $limit

[jaydeepgiri]

Hello @nyarachm, I am glad to know that my small work helped you..

Now for searching it is done in the same way, i'll show you my piece of code for the same..

below is the mysql - PHP code-->>

$where='';
if(isset($_GET['search'])){
    $searchText = $_GET['search'];
    $where = "WHERE  `title` LIKE  '%".$searchText."%'";
}
$query=' select `id`,`title`, `description`,`date`  from `products` '. $where .' limit '.$offset.','.$limit;

It is that simple as shown above..

[snomula-idc]

@glorang : Please provide the working solution code of cshtml and controller.
Thanks in Advance

[snomula-idc]

@sriramareddy143 : Please provide the working solution code of cshtml and controller. Need help on server pagination and search
Thanks in Advance