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>

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

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.