引导表服务器端分页

Posted 2023-03-27

【中文标题】引导表服务器端分页

【英文标题】：Bootstrap table server side pagination

【发布时间】：2015-07-15 05:26:37

【问题描述】：

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

 <table id="tblsers" data- 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>

【问题讨论】：

请更新此线程，接受答案或通过评论提供详细信息或编辑为什么它不回答您的问题

【参考方案1】：

更新 (2019/05/07)

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

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

属性： data-total-field

类型：字符串

详细信息：键入包含“总”数据的传入 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 问题中提出了更明确的问题

不能给你一个简洁的答案，因为所有的代码都在那里，但正如文档中描述的那样，你的格式需要是这样的：

“总数”：200， “行”：[ “身份证”：0， "name": "项目 0", “价格”：“$ 0” , “身份证”：1， “名称”：“项目 1”， “价格”：“$ 1” ,

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

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

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

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

例子：

从表中选择列 限制 10 偏移 10

【讨论】：

行数属性是否需要命名为“total”？

@tw1742 - 您可以使用 bootstrap-table.com/docs/api/table-options/#totalfield 覆盖它（属性： 数据总计字段 类型： 字符串 详细信息： 键入包含“total”数据的传入 json。默认值：“total”示例：examples.bootstrap-table.com/#options/total-data-field.html)

【参考方案2】：

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

Here's a simple example 来自 ajax 的数据表。 You'll also want to look at the styling guide 使用 Bootstrap CSS。

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

【参考方案3】：

bootstrap table 可以从暴露 json 数据数组的 url 读取数据。

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

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

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

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

【参考方案4】：

引导分页将向您的服务器发送一个获取请求 偏移量：10，限制：10