title: Bootstrap table server side pagination
body: <p>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.</p>
  
  <pre><code> &lt;table id="tblsers" data-height="400" style="width: 100%;margin-top:0 !important" class="bTable" data-search="true"&gt;&lt;/table&gt;
  
  &lt;script&gt;
      $(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 = "&lt;tr style='font-weight: bold'&gt;&lt;td&gt;No records&lt;/td&gt;&lt;/tr&gt;"
                  $("#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 ['&lt;span&gt;N/A&lt;/span&gt;']
                              }
                              return ['&lt;span&gt;' + value
                                  + '&lt;/span&gt;'];
                          }
                      },
  
                                {
                                    field: 'Name', title: 'User Name', align: 'center', sortable: true, width: 100, formatter: function (value, row, index) {
  
                                        if (value == null || value == "") {
                                            return ['&lt;span&gt;N/A&lt;/span&gt;']
                                        }
                                        else {
                                            return value;
                                        }
  
                                    }
                                },
                                {
                                    field: 'Address', title: 'User Address', align: 'center', sortable: true, width: 100, formatter: function (value, row, index) {
  
                                        if (value == null || value == "") {
                                            return ['&lt;span&gt;N/A&lt;/span&gt;']
                                        }
                                        else {
                                            return value;
                                        }
  
                                    }
                                },
  
                              {
                                  field: 'Phone', title: 'User Phone', align: 'center', width: 200, sortable: true, formatter: function (value, row, index) {
  
                                      if (value == null || value == "") {
                                          return ['&lt;span&gt;N/A&lt;/span&gt;']
                                      }
                                      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 !');
          }
      });
      }
  &lt;/script&gt;
  </code></pre>