Bootstrap table server side pagination

Question

I'm using a Bootstrap table to show users data. Currently it's using client side pagination but I want to use server-side pagination as my record is very huge. It would be highly appreciated if anyone can help me out in it.

 <table id="tblsers" data-height="400" style="width: 100%;margin-top:0 !important" class="bTable" data-search="true"></table>

<script>
    $(document).ready(function () {
        getUsers();
    });
    function getUsers() {

        $.ajax({
            type: "POST",
            url: "Data.aspx/getUsers",
            contentType: "application/json; charset=utf-8",
        success: function (response) {
            debugger
            var table = "";

            var $tblRegisteredUsersTbl = $('#tblRegisteredUsers');

            if (response == "none") {

                $tblRegisteredUsersTbl.bootstrapTable('destroy');
                table = "<tr style='font-weight: bold'><td>No records</td></tr>"
                $("#tblRegisteredUsers").html(table);
                $("#tblRegisteredUsers").children("tbody").css("text-align", 'center');
                $("#tblRegisteredUsers").addClass("table table-hover");

            } else {


                $("#tblRegisteredUsers").children("tbody").css("text-align", 'left');
                var registeredUsers = JSON.parse(response.d);
                $($tblRegisteredUsersTbl).hide();
                $tblRegisteredUsersTbl.bootstrapTable('destroy');
                $tblRegisteredUsersTbl.bootstrapTable({
                    method: 'get',
                    columns: [
                    {
                        field: 'SNo', title: 'S.No', width: 10, align: 'center', sortable: true, formatter: function (value, row, index) {
                            if (value == null || value == "") {
                                return ['<span>N/A</span>']
                            }
                            return ['<span>' + value
                                + '</span>'];
                        }
                    },

                              {
                                  field: 'Name', title: 'User Name', align: 'center', sortable: true, width: 100, formatter: function (value, row, index) {

                                      if (value == null || value == "") {
                                          return ['<span>N/A</span>']
                                      }
                                      else {
                                          return value;
                                      }

                                  }
                              },
                              {
                                  field: 'Address', title: 'User Address', align: 'center', sortable: true, width: 100, formatter: function (value, row, index) {

                                      if (value == null || value == "") {
                                          return ['<span>N/A</span>']
                                      }
                                      else {
                                          return value;
                                      }

                                  }
                              },

                            {
                                field: 'Phone', title: 'User Phone', align: 'center', width: 200, sortable: true, formatter: function (value, row, index) {

                                    if (value == null || value == "") {
                                        return ['<span>N/A</span>']
                                    }
                                    else {
                                        return value;
                                    }

                                }
                            },


                    ],
                    onSort: function (name, order) {

                    },
                    data: registeredUsers,
                    cache: false,
                    height: 400,
                    pagination: true,
                    pageSize: 10,
                    pageList: [10, 25, 50, 100, 200],
                    search: true,
                    showColumns: true,
                    showRefresh: true,
                    minimumCountColumns: 2,



                });
                $($tblRegisteredUsersTbl).fadeIn();
              }

        },
        failure: function (msg) {
            showMessage("error", 'Some error occurred\n Please try again !');
        }
    });
    }
</script>

Deration

Please update this thread, either accepting an answer or providing detail via comment or edit why it doesnt answer your issue – Shel

Answer 1

UPDATE (2019/05/07)

@tw1742 asked if 'total' index has to be called that

Answer is no, you can override that with https://bootstrap-table.com/docs/api/table-options/#totalfield

Attribute: data-total-field

Type: String

Detail: Key in incoming json containing 'total' data.

Default: 'total'

Example: https://examples.bootstrap-table.com/#options/total-data-field.html

Original Answer

http://bootstrap-table.wenzhixin.net.cn/documentation/#table-options

http://issues.wenzhixin.net.cn/bootstrap-table/index.html#options/server-side-pagination.html

There is documentation of features and several good examples, as well as many people asking much more defined questions in the projects github issues

Cant give you a concise answer because all the code is there, but as described in the doco, your format needs to be like this:

{
    "total": 200,
    "rows": [
        {
            "id": 0,
            "name": "Item 0",
            "price": "$0"
        },
        {
            "id": 1,
            "name": "Item 1",
            "price": "$1"
        },

So the server has to return that, and it can use the param being sent to return the needed subset.

A great example is: http://issues.wenzhixin.net.cn/bootstrap-table/index.html

You can see there data?order=asc&limit=10&offset=20 is being set if you select page 2, just hit F12 and keep eye on network panel to see what happens.

Those param are pretty easily transposed into a sql or similar database query, or even just used with whatever server language (php,ect) to return subset of whatever datasource your using.

Example:

SELECT column FROM table
LIMIT 10 OFFSET 10

Shel

Does the attribute with the number of rows need to be named "total"? – Collinsworth

@Collinsworth - you can override that with bootstrap-table.com/docs/api/table-options/#totalfield (Attribute: data-total-field Type: String Detail: Key in incoming json containing 'total' data. Default: 'total' Example: examples.bootstrap-table.com/#options/total-data-field.html) – Shel

This is not showing anything for me, it just stays blank even after checking that my url is returning the correct format – Unscientific

Answer 2

This SCREAMS for Datatables. It has built-in ajax for doing the query updates you're looking for, plus it has built-in sorting, filtering, paging, etc.

Here's a simple example of an ajax sourced Datatable. You'll also want to look at the styling guide to utilize the Bootstrap CSS.

Finally, regardless of whether or not you use datatables, note that you'll have to accomodate for all the various filters, sorting, etc on your server-side -- that is, the query will have to be able to handle any parameters you want to use to cull your data. The Datatables example has a ready-made example done in PHP, but it's certainly able to talk to any page that returns a JSON object.

Baulk

Answer 3

bootstrap table can read data from an url exposing a json array of data.

when you use server side pagination it expects a total field and a row array for results (you can customized those names) but that's counter intuitive as you return all results.

That total turns obvious when you set data-query-params-type="limit" https://bootstrap-table.com/docs/api/table-options/#queryparamstype then your url will get those params (offset, limit) so you can filter the result.

you can check the example here https://examples.bootstrap-table.com/#options/query-params-type.html, and modify pagination to see how your url is queried.

See you can extend those params using https://bootstrap-table.com/docs/api/table-options/#queryparams if you need to customize further the url params to pass to server

Odoriferous

Answer 4

Bootstrap pagination will send a get request to your server {Offset:10, limit:10}

Lieabed