bootstrap table client和server分页

返回数据:

{
    "total":14,
    "rows":[
        {
            "id":"014b79558bc746f5b8b472706a17e229",
            "companyId":"be2d9f3b9cdb4923a6cd5c43d56edf29",
            "outUserId":"831b2188a80342299b36dead10396b80",
            "inCaseCount":0,
            "inCaseAmount":0,
            "callBackCaseCount":0,
            "callBackCaseAmount":0,
            "reductionAmount":0,
            "callBackRate":"-",
            "collectingCaseCount":0,
            "collectingCaseAmount":0,
            "status":2,
            "inDate":1508428800000,
            "gmtCreate":1508588401000,
            "gmtModify":1508588401000,
            "outUserName":"lcs测试1",
            "index":2
        }
    ]
}

 

 

client分页:

//client
$('#list_table').bootstrapTable({
method: 'post', //是否显示行间隔色
striped: true, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
cache: false, //是否显示分页(*)
pagination: true, //是否启用排序
sortName:'callBackRate',
sortable: true, //排序方式
sortOrder: "desc",//初始化加载第一页,默认第一页
pageNumber: 1,//这默认页码
pageSize: 15, //每页的记录行数(*)
//可供选择的每页的行数(*)
pageList: [10, 15, 25, 50, 100],
//这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
url: "/finance/listData",
columns: [ {
        field: '',
title: '排名',
align: 'center',
formatter: function (value, row, index) {
            return index + 1;
}
    }, {
        title: '催收员',
field: 'outUserName'
}, {
        title: '入催案件数',
field: 'inCaseCount'
}, {
        title: '入催金额',
field: 'inCaseAmount'
}, {
        title: '催回案件数',
field: 'callBackCaseCount'
}, {
        title: '催回金额',
field: 'callBackCaseAmount'
}, {
        title: '减免金额',
field: 'reductionAmount'
}, {
        title: '回款率',
field: 'callBackRate'
}, {
        title: '在催金额',
field: 'collectingCaseAmount'
}, {
        title: '在催案件数',
field: 'collectingCaseCount'
}],
queryParams: function (params) {
        return {
            inDateFrom: $('#start').val(),
inDateTo: $('#end').val(),
type: $("#viewType").attr("viewType")
        };
},
sidePagination: "client", //分页方式:client客户端分页,server服务端分页(*)
search: false,//是否显示搜索
strictSearch: true, //Enable the strict search.
responseHandler: function(data){
        return data.rows;
}
});

 

server分页

//server分页
$('#list_table').bootstrapTable({
    method: 'post', //是否显示行间隔色
striped: true, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
cache: false, //是否显示分页(*)
pagination: false, //是否启用排序
sortable: false, //排序方式
sortOrder: "asc",//初始化加载第一页,默认第一页
pageNumber: 1,//这默认页码
pageSize: 15, //每页的记录行数(*)
//可供选择的每页的行数(*)
pageList: [10, 15, 25, 50, 100],
//这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
url: "/finance/listData",
columns: [ {
        title: '入催案件数',
field: 'inCaseCount'
}, {
        title: '入催金额',
field: 'inCaseAmount'
}, {
        title: '催回案件数',
field: 'callBackCaseCount'
}, {
        title: '催回金额',
field: 'callBackCaseAmount'
}, {
        title: '减免金额',
field: 'reductionAmount'
}, {
        title: '回款率',
field: 'callBackRate'
}, {
        title: '在催金额',
field: 'collectingCaseAmount'
}, {
        title: '在催案件数',
field: 'collectingCaseCount'
}],
queryParams: function (params) {
        return {
            pageNo: params.offset / params.limit + 1,
pageSize: params.limit,
inDateFrom: $('#start').val(),
inDateTo: $('#end').val(),
type: $("#viewType").attr("viewType")
        };
},
sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*)
search: false,//是否显示搜索
strictSearch: true //Enable the strict search.
});

 

 

posted @ 2017-10-21 20:22  硬币  阅读(7966)  评论(0)    收藏  举报