Pagination 引导表服务器端分页

我使用一个引导表来显示用户数据。目前它使用客户端分页，但我想使用服务器端分页，因为我的记录非常庞大。如果有人能在这方面帮助我，我将不胜感激

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

$（文档）.ready（函数（）{
getUsers（）；
});
函数getUsers（）{
$.ajax({
类型：“POST”，
url:“Data.aspx/getUsers”，
contentType:“应用程序/json；字符集=utf-8”，
成功：功能（响应）{
调试器
var表=”；
变量$tblRegisteredUsersTbl=$（“#tblRegisteredUsers”）；
如果（响应=“无”）{
$tblRegisteredUsersTbl.bootstrapTable（'destroy'）；
table=“无记录”
$（“#tblRegisteredUsers”）.html（表格）；
$（“#tblRegisteredUsers”）.children（“tbody”）.css（“文本对齐”，“居中”）；
$（“#tblRegisteredUsers”）.addClass（“表格悬停”）；
}否则{
$（“#tblRegisteredUsers”）.children（“tbody”）.css（“文本对齐”，“左”）；
var registeredUsers=JSON.parse（response.d）；
$（$tblRegisteredUsersTbl）.hide（）；
$tblRegisteredUsersTbl.bootstrapTable（'destroy'）；
$tblRegisteredUsersTbl.bootstrapTable({
方法：“get”，
栏目：[
{
字段：'SNo'，标题：'S.No'，宽度：10，对齐：'center'，可排序：true，格式化程序：函数（值、行、索引）{
如果（值==null | |值==“”）{
返回['N/A']
}
返回[“”+值
+ ''];
}
},
{
字段：'Name'，标题：'User Name'，对齐：'center'，可排序：true，宽度：100，格式化程序：函数（值，行，索引）{
如果（值==null | |值==“”）{
返回['N/A']
}
否则{
返回值；
}
}
},
{
字段：“地址”，标题：“用户地址”，对齐：“中心”，可排序：true，宽度：100，格式化程序：函数（值，行，索引）{
如果（值==null | |值==“”）{
返回['N/A']
}
否则{
返回值；
}
}
},
{
字段：'Phone'，标题：'User Phone'，对齐：'center'，宽度：200，可排序：true，格式化程序：函数（值、行、索引）{
如果（值==null | |值==“”）{
返回['N/A']
}
否则{
返回值；
}
}
},
],
onSort：函数（名称、顺序）{
},
数据来源：注册数据来源：，
cache:false，
身高：400，
分页：正确，
页面大小：10，
页面列表：[10,25,50,100,200]，
搜索：对，
展示栏：没错，
是的，
最小计数列：2，
});
$（$tblRegisteredUsersTbl）.fadeIn（）；
}
},
故障：功能（msg）{
showMessage（“错误”，“出现了一些错误\n请重试！”）；
}
});
}

这是一个令人尖叫的问题。它有内置的ajax，用于执行您正在寻找的查询更新，另外它还有内置的排序、过滤、分页等功能

一个源于ajax的数据表。 使用引导CSS

最后，不管您是否使用datatables，请注意，您必须适应服务器端的所有各种过滤器、排序等，也就是说，查询必须能够处理您想要用来挑选数据的任何参数。Datatables示例有一个用PHP编写的现成示例，但它肯定能够与任何返回JSON对象的页面进行对话。

更新（2019/05/07）

@tw1742询问是否必须将“总计”索引称为

答案是否定的，你可以用

属性：数据总计字段

类型：字符串

详细信息：输入包含“总计”数据的传入json

默认值：“总计”

示例：

原始答案

有一些特性文档和一些好的例子，还有许多人在项目github问题中提出了更多定义明确的问题

无法给您一个简洁的答案，因为所有的代码都在那里，但如文档中所述，您的格式需要如下：

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

---

引导表可以从公开json数据数组的url读取数据

当您使用服务器端分页时，它需要一个总计字段和一个结果行数组（您可以自定义这些名称），但这与您返回所有结果的直觉相反

这个总数在 SELECT column FROM table LIMIT 10 OFFSET 10