首先我們需要去下載相應的 jquery bootstrap bootstrap-table的包。
注意bootstrap,下載編譯過的壓縮包中只有三個文件夾 CSS ,fonts, js
1. jquery-2.2.1.js ---- 最新的jquery文件
2. bootstrap.min.js --- 最新的bootstrap/js中bootstrap.min.js 壓縮文件
3.bootstrap.min.css ---最新的bootstrap/css中bootstrap.min.css 壓縮文件
4.bootstrap-table-all.js ---最新bootstrap-table下的js文件
5.bootstrap-table-zh-CN.js ----最新bootstrap-table/locale下的中文初始文件
6.bootstrap-table.min.css ---最新的bootstrap-table下css壓縮文件
這六個必須配置,其中bootstrap-table-zh-CN.js是支持中文的js文件,只有加載了這個文件我們的一些表格顯示信息才會被設置成中文。
1、引入js、css
?12345678 | <!--css樣式--> < link href = "css/bootstrap/bootstrap.min.css" rel = "stylesheet" > < link href = "css/bootstrap/bootstrap-table.css" rel = "stylesheet" > <!--js--> < script src = "js/bootstrap/jquery-1.12.0.min.js" type = "text/javascript" ></ script > < script src = "js/bootstrap/bootstrap.min.js" ></ script > < script src = "js/bootstrap/bootstrap-table.js" ></ script > < script src = "js/bootstrap/bootstrap-table-zh-CN.js" ></ script > |
2、table數據填充
bootStrap table獲取數據有兩種方式,一是通過table 的data-url屬性指定數據源,二是通過Javascript初始化表格時指定url來獲取數據
?123456 | < table data-toggle = "table" > < thead > ... </ thead > </ table > ... |
123 | $( '#table' ).bootstrapTable({ url: 'data.json' }); |
第二種方式較第一種而言在處理復雜數據時更為靈活,一般使用第二種方式來進行table數據填充。
?$('#id').bootstrapTable({//url: influ_url, data:data, search: true,//是否搜索 pagination: true,//是否分頁 pageSize: 5,//單頁記錄數 pageList: [5, 10, 20, 50],//分頁步進值 sidePagination: "client",//服務端分頁 searchAlign: "left", searchOnEnterKey: false,//回車搜索 showRefresh: true,//刷新按鈕 showColumns: true,//列選擇按鈕 buttonsAlign: "right",//按鈕對齊方式 locale: "zh-CN",//中文支持 detailView: false, showToggle:true, sortName:'bci', sortOrder:"desc", columns: [ { title: "",//標題 field: "",//鍵名 sortable: true,//是否可排序 order: "desc",//默認排序方式 align: "center",//水平 valign: "middle",//垂直 formatter: function (value, row, index) { } }, { title: "",//標題 field: "",//鍵名 sortable: true,//是否可排序 order: "desc",//默認排序方式 align: "center",//水平 valign: "middle",//垂直 formatter: function (value, row, index) { }, }, ], onClickRow: function (rows, tr) { }, });此插件運用起來相當方便實用,還有很多方法和屬性沒有舉例,大家可以參考http://bootstrap-table.wenzhixin.net.cn/zh-cn/
新聞熱點
疑難解答