bootstrap-table獲取表格資料de兩種方式
阿新 • • 發佈:2019-01-02
分享一下這兩天的研究結果,超級有用
bootstrap-table獲取值得兩種方式,一種是通過data獲取,一種是通過url獲取。
data:適用於客戶端分頁;
url:適用於服務端分頁;
*注:上面兩個的區別主要在於引數sidePagination。
1、通過data獲取後臺資料
var result="通過el表示式獲取json值"; //後臺傳過來的json值 $(function () { load(); }); function load() { $("#table").bootstrapTable({ data:result, //totalRows: 10, height:600, undefinedText:"_", //當資料為 undefined 時顯示的字元。 sidePagination: 'client', pagination: true, //是否顯示分頁(*) /* 右上角工具條 */ showRefresh: true, //顯示重新整理按鈕 showToggle:true, //是否顯示詳細檢視和列表檢視的切換按鈕 showColumns: true, //顯示下拉框勾選要顯示的列 pagination: true, //在表格底部顯示分頁工具欄 striped: true, //是否顯示行間隔色 pageNumber:1, //當前第幾頁 pageSize: 5, //每頁顯示的記錄數 pageList: [5, 10, 15, 20, 25], //記錄數可選列表 toolbar: "#toolbar", //設定工具欄的Id或者class paginationPreText:"<<", paginationNextText:">>", //clickToSelect: true, //點選行即可選中單選/複選框 //iconSize: "outline", //cardView: false,//設定為True時顯示名片(card)佈局 // singleSelect: true,//複選框只能選擇一條記錄 search: true, //是否顯示右上角的搜尋框 formatLoadingMessage: function () { return "請稍等,正在載入中..."; }, icons: { refresh: "glyphicon-repeat", toggle: "glyphicon-list-alt" }, columns: [{ field: 'id', visible: false //不顯示 }, { field: 'empname', title: '使用者名稱', align: 'left', //width: 230, } , { field: 'empcode', title: '編碼', align: 'left', //width: 230, } ] }) }
2、通過url獲取資料
function load() { $("#table").bootstrapTable({ url: "${ctx}/userController/showlist", dataType:"json", method:"post", //totalRows: 10, //記錄右下角的總條數 height:600, undefinedText:"_", //當資料為 undefined 時顯示的字元。 sidePagination: 'client', pagination: true, //是否顯示分頁(*) /* 右上角工具條 */ showRefresh: true, //顯示重新整理按鈕 showToggle:true, //是否顯示詳細檢視和列表檢視的切換按鈕 showColumns: true, //顯示下拉框勾選要顯示的列 pagination: true, //在表格底部顯示分頁工具欄 striped: true, //是否顯示行間隔色 pageNumber:1, //當前第幾頁 pageSize: 5, //每頁顯示的記錄數 pageList: [5, 10, 15, 20, 25], //記錄數可選列表 toolbar: "#toolbar", //設定工具欄的Id或者class paginationPreText:"<<", paginationNextText:">>", //clickToSelect: true, //點選行即可選中單選/複選框 //iconSize: "outline", //cardView: false,//設定為True時顯示名片(card)佈局 // singleSelect: true,//複選框只能選擇一條記錄 search: true, //是否顯示右上角的搜尋框 formatLoadingMessage: function () { return "請稍等,正在載入中..."; }, queryParams: function (params) { //向後臺傳遞的引數 var p = { limit: params.limit, offset: params.offset, search: params.search, sort: params.sort, order: params.order }; return p; }, icons: { refresh: "glyphicon-repeat", toggle: "glyphicon-list-alt" }, columns: [{ field: 'id', visible: false //不顯示 }, { field: 'empname', title: '使用者名稱', align: 'left', //width: 230, } , { field: 'empcode', title: '編碼', align: 'left', //width: 230, } ] }) }
3、html頁面部分程式碼
< link href="...bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" /> < link href="...bootstrap-table/bootstrap-table.min.css" rel="stylesheet" /> < script src="...jquery-2.1.1/jquery.js" type="text/javascript" ></script> < script src="...bootstrap-3.3.7/js/bootstrap.js" type="text/javascript" ></script> < script src="...bootstrap-table/bootstrap-table.min.js" type="text/javascript" ></script> < script src="...bootstrap-table/locale/bootstrap-table-zh-CN.min.js" type="text/javascript" ></ script> < body> < div class="panel panel-default"> < div class="panel-body"> < div id="toolbar" class="btn-group"> < button id="btn_edit" type="button" class="btn btn-default"> < span class="glyphicon glyphicon-pencil" aria-hidden="true"></ span>修改 < /button> < button id="btn_delete" type="button" class="btn btn-default"> < span class="glyphicon glyphicon-remove" aria-hidden="true"></ span>刪除 </ button> </ div> < table id="table"></table> </ div> </ div> </ body>