Question

我正在使用Bootstrap表来显示用户数据。目前它正在使用客户端分页，但我想使用服务器端分页，因为我的记录非常庞大。如果有人能帮助我，我们将非常感激。

 <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

更新（2019/05/07）

@ tw1742询问是否＆＃39;总计＆＃39;索引必须被称为

答案是否定的，你可以用https://bootstrap-table.com/docs/api/table-options/#totalfield

覆盖它

属性： data-total-field

输入：字符串

明细：键入包含＆＃39; total＆＃39;的传入json数据

默认：＆＃39;总计＆＃39;

示例： https://examples.bootstrap-table.com/#options/total-data-field.html

原始答案

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

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

有功能文档和几个很好的例子，以及许多人在项目github问题中提出更多定义的问题

不能给你一个简明的答案，因为所有代码都在那里，但正如doco所述，你的格式必须是这样的：

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

所以服务器必须返回它，它可以使用发送的param来返回所需的子集。

一个很好的例子是：http://issues.wenzhixin.net.cn/bootstrap-table/index.html

如果选择第2页，您可以看到data?order=asc&limit=10&offset=20正在设置，只需点击F12并密切关注网络面板，看看会发生什么。

这些param非常容易转换为sql或类似的数据库查询，甚至只是与任何服务器语言（php，ect）一起使用，以返回您使用的任何数据源的子集。

示例：

SELECT column FROM table
LIMIT 10 OFFSET 10

Answer 2

Datatables的这个SCREAMS。它内置了ajax，用于执行您正在查找的查询更新，此外还具有内置排序，过滤，分页等功能。

来自ajax的数据表的

Here's a simple example。 You'll also want to look at the styling guide使用Bootstrap CSS。

最后，无论您是否使用数据表，请注意您必须适应服务器端的所有各种过滤器，排序等 - 也就是说，查询必须能够处理您要用来剔除数据的任何参数。 Datatables示例有一个用PHP完成的现成示例，但它肯定能够与任何返回JSON对象的页面进行通信。

Answer 3

引导表可以从暴露 json 数据数组的 url 读取数据。

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

当您设置 data-query-params-type="limit" https://bootstrap-table.com/docs/api/table-options/#queryparamstype 时，总数变得很明显，那么您的网址将获得这些参数（偏移量、限制），以便您可以过滤结果。

您可以在这里查看示例https://examples.bootstrap-table.com/#options/query-params-type.html，并修改分页以查看您的网址是如何查询的。

如果您需要进一步自定义要传递给服务器的 url 参数，您可以使用 https://bootstrap-table.com/docs/api/table-options/#queryparams 扩展这些参数

Bootstrap表服务器端分页

3 个答案: