zoukankan      html  css  js  c++  java
  • 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节点(展示数据)

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

  • 相关阅读:
    leetcode 131. Palindrome Partitioning
    leetcode 526. Beautiful Arrangement
    poj 1852 Ants
    leetcode 1219. Path with Maximum Gold
    leetcode 66. Plus One
    leetcode 43. Multiply Strings
    pytorch中torch.narrow()函数
    pytorch中的torch.repeat()函数与numpy.tile()
    leetcode 1051. Height Checker
    leetcode 561. Array Partition I
  • 原文地址:https://www.cnblogs.com/A-yes/p/9894186.html
Copyright © 2011-2022 走看看