Bootstrap表服务器端分页

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

这个数据表的尖叫声。它具有用于执行您正在查找的查询更新的内置 ajax，此外它还具有内置的排序、过滤、分页等。

这是一个 ajax 来源的数据表的简单示例。 您还需要查看样式指南以使用 Bootstrap CSS。

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

Answer 2

更新（2019/05/07）

@ tw1742询问是否必须调用“总”索引

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

属性：数据总计字段

类型：字符串

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

默认值： “总计”

示例： 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中所述，您的格式必须是这样的：

{
    “总计”：200，
    “行”：[
        {
            “ id”：0，
            “ name”：“ Item 0”，
            “ price”：“ $ 0”
        }，
        {
            “ id”：1
            “ name”：“ Item 1”，
            “ price”：“ $ 1”
        }，

因此服务器必须返回该值，并且它可以使用发送的参数来返回所需的子集。

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

data?order=asc&limit=10&offset=20如果选择第2页，则可以看到已设置，只需按F12并留意网络面板以查看会发生什么。

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

例：

SELECT列FROM表格
极限10偏移10