bootstrap table client和server分頁


返回數據:

{

"total": 14,

"rows": [

{

"id": "014b79558bc746f5b8b472706a17e229",

"companyId": "be2d9f3b9cdb4923a6cd5c43d56edf29",

"outUserId": "831b2188a80342299b36dead10396b80",

"inCaseCount": 0,

"inCaseAmount": 0.0,

"callBackCaseCount": 0,

"callBackCaseAmount": 0.0,

"reductionAmount": 0.0,

"callBackRate": "-",

"collectingCaseCount": 0,

"collectingCaseAmount": 0.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.
});

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM