BootStrap table 數(shù)據(jù)填充與分頁應(yīng)用總結(jié)
BootStrap table 是一個輕量級的table插件,使用AJAX獲取JSON格式的數(shù)據(jù),其分頁和數(shù)據(jù)填充很方便,支持國際化。最近后臺使用此插件做了一個表格應(yīng)用,做個總結(jié)。
1.使用方法?
可以通過又拍云提供的CDN獲取js插件,樣式表和國際化插件,或者直接去官網(wǎng)下載。將下面的js插件和樣式放到html head 頭里即可使用。
//樣式
//國際化,表格漢化
123456
2.table 數(shù)據(jù)填充
BootStrap table獲取數(shù)據(jù)有兩種方式,一是通過table 的data-url屬性指定數(shù)據(jù)源,而是通過JavaScript初始化表格時指定url來獲取數(shù)據(jù),如下示例。
...
12345$('#table').bootstrapTable({
url: 'data.json'
});
123第二種方式交第一種而言在處理復(fù)雜數(shù)據(jù)時更為靈活,一般使用第二種方式來進(jìn)行table數(shù)據(jù)填充。
var $table = $('#table');
$table.bootstrapTable({
url: "duoBaoActivityList",
dataType: "json",
pagination: true, //分頁
singleSelect: false,
data-locale:"zh-US" , //表格漢化
search: true, //顯示搜索框
sidePagination: "server", //服務(wù)端處理分頁
columns: [
{
title: '活動名稱',
field: 'name',
align: 'center',
valign: 'middle'
},
{
title: '狀態(tài)',
field: 'status',
align: 'center',
valign: 'middle',
},
{
title: '參與人數(shù)',
field: 'participationCounts',
align: 'center'
},
{
title: '總?cè)藬?shù)',
field: 'totalCounts',
align: 'center'
},
{
title: '開始時間',
field: 'startTime',
align: 'center',
},
{
title: '操作',
field: 'id',
align: 'center',
formatter:function(value,row,index){
var e = '編輯 ';
var d = '刪除 ';
return e+d;
}
}
]
});
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849field字段必須與服務(wù)器端返回的字段對應(yīng)才會顯示出數(shù)據(jù)。
3.分頁與搜索
分頁時BootStrap table 向后端傳遞兩個分頁字段:limit, offset ,前者表示每頁的個數(shù),默認(rèn)為10個,后者表示分頁時數(shù)據(jù)的偏移量。?
而搜索時則向后端傳遞的是search字段,表示具體的搜索內(nèi)容。?
服務(wù)器端返回的數(shù)據(jù)中還要包括page(頁數(shù)),total(數(shù)據(jù)總量)兩個字段,前端要根據(jù)這兩個字段分頁。
最終具體顯示效果如下圖所示:?