//樣式
<link  rel="stylesheet"/> 
<script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.js"></script>
//國(guó)際化，表格漢化
<script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/locale/bootstrap-table-zh-CN.min.js"></script>

2.table 數(shù)據(jù)填充

BootStrap table獲取數(shù)據(jù)有兩種方式，一是通過(guò)table 的data-url屬性指定數(shù)據(jù)源，而是通過(guò)JavaScript初始化表格時(shí)指定url來(lái)獲取數(shù)據(jù)，如下示例。

<table data-toggle="table" data-url="data.json">
<thead>
... 
</thead>
</table>
$('#table').bootstrapTable({
url: 'data.json' 
});

第二種方式交第一種而言在處理復(fù)雜數(shù)據(jù)時(shí)更為靈活，一般使用第二種方式來(lái)進(jìn)行table數(shù)據(jù)填充。

var $table = $('#table');
$table.bootstrapTable({
url: "duoBaoActivityList", 
dataType: "json",
pagination: true, //分頁(yè)
singleSelect: false,
data-locale:"zh-US" , //表格漢化
search: true, //顯示搜索框
sidePagination: "server", //服務(wù)端處理分頁(yè)
columns: [
{
title: '活動(dòng)名稱',
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: '開始時(shí)間',
field: 'startTime',
align: 'center',
},
{
title: '操作',
field: 'id',
align: 'center',
formatter:function(value,row,index){ 
var e = '<a href="#" mce_href="#" onclick="edit(\''+ row.id + '\')">編輯</a> '; 
var d = '<a href="#" mce_href="#" onclick="del(\''+ row.id +'\')">刪除</a> '; 
return e+d; 
} 
}
]
});

field字段必須與服務(wù)器端返回的字段對(duì)應(yīng)才會(huì)顯示出數(shù)據(jù)。

3.分頁(yè)與搜索

分頁(yè)時(shí)BootStrap table 向后端傳遞兩個(gè)分頁(yè)字段：limit， offset ,前者表示每頁(yè)的個(gè)數(shù)，默認(rèn)為10個(gè)，后者表示分頁(yè)時(shí)數(shù)據(jù)的偏移量。

而搜索時(shí)則向后端傳遞的是search字段，表示具體的搜索內(nèi)容。

服務(wù)器端返回的數(shù)據(jù)中還要包括page（頁(yè)數(shù)），total（數(shù)據(jù)總量）兩個(gè)字段，前端要根據(jù)這兩個(gè)字段分頁(yè)。

最終具體顯示效果如下圖所示：

這里寫圖片描述

以上所述是小編給大家介紹的BootStrap中的table實(shí)現(xiàn)數(shù)據(jù)填充與分頁(yè)應(yīng)用小結(jié)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: