Bootstrap table两种分页示例

服务器端分页

注意服务器端数据的返回的格式

[json]必须包含:total节点(总记录数),rows节点(分页后数据)
即:{“total”:24,”rows”:[…]}

 $('#test-table').bootstrapTable({
                 //请求方法
                method: 'get',
                 //是否显示行间隔色
                striped: true,
                //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)     
                cache: false,    
                //是否显示分页(*)  
                pagination: true,   
                 //是否启用排序  
                sortable: false,    
                 //排序方式 
                sortOrder: "asc",    
                //初始化加载第一页,默认第一页
                //我设置了这一项,但是貌似没起作用,而且我这默认是0,- -
                //pageNumber:1,   
                //每页的记录行数(*)   
                pageSize: 10,  
                //可供选择的每页的行数(*)    
                pageList: [10, 25, 50, 100],
                //这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据  
                url: "/test/testtable.action",
                //默认值为 'limit',传给服务端的参数为:limit, offset, search, sort, order Else
                //queryParamsType:'',   
                查询参数,每次调用是会带上这个参数,可自定义                         
                queryParams: queryParams : function(params) {
                    var subcompany = $('#subcompany option:selected').val();
                    var name = $('#name').val();
                    return {
                          pageNumber: params.offset+1,
                          pageSize: params.limit,
                          companyId:subcompany,
                          name:name
                        };
                },
                //分页方式:client客户端分页,server服务端分页(*)
                sidePagination: "server",
                //是否显示搜索
                search: false,  
                //Enable the strict search.    
                strictSearch: true,
                //Indicate which field is an identity field.
                idField : "id",
                columns: [{
                    field: 'id',
                    title: 'id',
                    align: 'center'
                }, {
                    field: 'testkey',
                    title: '测试标识',
                    align: 'center'
                }, {
                    field: 'testname',
                    title: '测试名字',
                    align: 'center'
                },{
                    field: 'id',
                    title: '操作',
                    align: 'center',
                    formatter:function(value,row,index){
                        //通过formatter可以自定义列显示的内容
                        //value:当前field的值,即id
                        //row:当前行的数据
                        var a = '<a href="" >测试</a>';
                    } 
                }],
                pagination:true
            });

客户端分页

将sidePagination属性设为 “client”即可

服务器返回json数据必须包含data节点(展示数据)

当数据量较少,只有上千条数据时,一次性将所有数据返回给客户端,无论点下一页,或搜索条件时,不向服务端发请求,实现全文检索。

  • 10
    点赞
  • 39
    收藏
    觉得还不错? 一键收藏
  • 13
    评论
### 回答1: Bootstrap Table 是一个基于 Bootstrap 框架的开源插件,它使开发人员可以使用简单易于使用的 API 来创建可响应式的、可排序的、可搜索的和可编辑的表格。 Bootstrap Table 有许多不同的选项和配置,可以让开发人员根据他们的特定需求来定制表格。以下是一个简单的示例,展示了如何创建一个简单的 Bootstrap Table: 1. HTML 代码 首先,我们需要在 HTML 代码中添加 Bootstrap Table 的必要文件,包括 CSS 和 JavaScript 文件: <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js"></script> 然后,我们需要为表格创建一个 HTML 元素: <table id="myTable" data-toggle="table"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>20</td> <td>男</td> </tr> <tr> <td>李四</td> <td>25</td> <td>男</td> </tr> <tr> <td>小红</td> <td>22</td> <td>女</td> </tr> </tbody> </table> 在这个示例中,我们创建了一个带有三个表头的表格,并添加了三个数据行。 2. JavaScript 代码 接下来,我们需要使用 JavaScript 代码来初始化我们的表格: <script> $(function () { $('#myTable').bootstrapTable(); }); </script> 在这个示例中,我们使用 jQuery 来选择我们的表格元素,并调用 bootstrapTable() 方法来初始化表格。一旦表格被初始化,我们就可以很容易地执行各种各样的操作,包括搜索、排序和编辑。 通过这个简单的示例,我们可以看到 Bootstrap Table 的强大功能和灵活性,开发人员可以使用这个插件来创建各种不同类型的表格,并轻松地管理和操作它们的内容。 ### 回答2: Bootstrap table 是一种基于 Bootstrap 框架的开源插件,用于在网页上展示数据表格。使用 Bootstrap table 可以方便地创建一个具有丰富功能的数据表格,包括排序、分页、筛选、搜索、编辑等。在实际开发中,Bootstrap table 可以提高页面展示效果和用户交互性。 Bootstrap table 的使用非常简单。首先你需要引入 BootstrapBootstrap table 的 CSS 和 JS 文件,然后创建一个 HTML 表格,给它一个唯一的 ID,最后在 JS 文件中调用 Bootstrap table 的初始化方法即可。 例如,你可以创建以下 HTML 表格: ```html <table id="myTable" class="table"> <thead> <tr> <th data-field="id">ID</th> <th data-field="name">Name</th> <th data-field="price">Price</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Item 1</td> <td>$10</td> </tr> <tr> <td>2</td> <td>Item 2</td> <td>$20</td> </tr> <tr> <td>3</td> <td>Item 3</td> <td>$30</td> </tr> </tbody> </table> ``` 选择表格的 ID,使用 Javascript 代码初始化表格: ```js $(function(){ $('#myTable').bootstrapTable({ pagination: true, search: true }); }); ``` 上述代码中,我们初始化了一个数据表格,并设置了分页和搜索功能。现在的表格会自动带上分页栏和搜索框,用户可以直接在搜索框中输入关键词,进行筛选。 除此之外,Bootstrap table 还可以实现精准筛选、批量操作、自定义按钮和行样式等功能。如果你需要更多的功能,可以查看官方文档或者在 Github 上查看其他开发者开源的 Bootstrap table 插件。 ### 回答3: Bootstrap table 是一个基于 Bootstrap 框架的可定制化和易于使用的表格插件。在应用程序中,表格是一种非常有用的工具,用于展示和整理数据。 Bootstrap table 提供了许多高级功能,如:分页,排序,过滤和编辑等。这使得用户能够轻松地查看和操作内容。 Bootstrap table 可以通过使用 HTML 标签和 JavaScript 文件来创建。其工作基于样式类和一组初始化选项。样式类定义了表格的外观和感觉,而初始化选项定义表格的行为。Bootstrap table 使用 JSON 数据格式来填充和渲染表格的内容。用户可以使用 AJAX 调用来动态更新数据。 Bootstrap table 允许用户创建多个表格,并将它们组合在一起以实现复杂的数据表现。在使用 Bootstrap table 时,用户可以选择不同的主题,以定制他们的表格外观。此外,插件支持响应式设计,并针对在不同设备上进行了适当的调整。 Bootstrap table 示例可以是一个包含产品信息的表格,用户可以通过搜索和筛选查找特定产品。它也可以是一个员工名单,包含分页和排序功能。此外, Bootstrap table 示例 还可以是一个动态的表格,可以用于实时更新 Web 应用程序的数据内容。 总的来说,Bootstrap table 是一个灵活、可定制和易于使用的表格插件。它提供了一系列丰富的功能和选项,可以帮助用户轻松地管理和展示数据。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 13
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值