BootStrap table 是一個輕量級的table插件，使用AJAX獲取JSON格式的數據，其分頁和數據填充很方便，支持國際化。最近後台使用此插件做了一個表格應用，做個總結。
1.使用方法
可以通過又拍雲提供的CDN獲取js插件，樣式表和國際化插件，或者直接去官網下載。將下面的js插件和样式放到html head 頭里即可使用。
//樣式<link href="http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.css" rel="stylesheet"/> <script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.js"></script>//國際化，表格漢化<script src="http://cdn.bootcss.com/bootstrap-table/1.9.1/locale/bootstrap-table-zh-CN.min.js"></script>
2.table 數據填充
BootStrap table獲取數據有兩種方式，一是通過table 的data-url屬性指定數據源，而是通過JavaScript初始化表格時指定url來獲取數據，如下示例。
<table data-toggle="table" data-url="data.json"><thead>... </thead></table>$('#table').bootstrapTable({url: 'data.json' });第二種方式交第一種而言在處理複雜數據時更為靈活，一般使用第二種方式來進行table數據填充。
var $table = $('#table');$table.bootstrapTable({url: "duoBaoActivityList", dataType: "json",pagination: true, //分頁singleSelect: false,data-locale:"zh-US" , //表格漢化search: true, //顯示搜索框sidePagination: "server", //服務端處理分頁columns: [{title: '活動名稱',field: 'name',align: 'center',valign: 'middle'}, {title: '狀態',field: 'status',align: 'center',valign: 'middle',}, {title: '參與人數',field: 'participationCounts',align: 'center'},{title: '總人數',field: 'totalCounts',align: 'center'},{title: '開始時間',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字段必須與服務器端返回的字段對應才會顯示出數據。
3.分頁與搜索
分頁時BootStrap table 向後端傳遞兩個分頁字段：limit， offset ,前者表示每頁的個數，默認為10個，後者表示分頁時數據的偏移量。
而搜索時則向後端傳遞的是search字段，表示具體的搜索內容。
服務器端返回的數據中還要包括page（頁數），total（數據總量）兩個字段，前端要根據這兩個字段分頁。
最終具體顯示效果如下圖所示：
以上所述是小編給大家介紹的BootStrap中的table實現數據填充與分頁應用小結，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！