Bootstrap分頁表格插件如何使用?本篇文章介紹了Bootstrap分頁表格插件的使用方法,bootStrap table獲取數(shù)據(jù)有兩種方式,一是通過table 的data-url屬性指定數(shù)據(jù)源,二是通過JavaScript初始化表格時指定url來獲取數(shù)據(jù)。
創(chuàng)新互聯(lián)公司堅持“要么做到,要么別承諾”的工作理念,服務領域包括:網站建設、成都做網站、企業(yè)官網、英文網站、手機端網站、網站推廣等服務,滿足客戶于互聯(lián)網時代的滄源網站設計、移動媒體設計的需求,幫助企業(yè)找到有效的互聯(lián)網解決方案。努力成為您成熟可靠的網絡建設合作伙伴!Bootstrap分頁表格插件使用教程
找了兩個table的插件,一個是bootstrap table ,另一個是bootstrap-paginator
這里只介紹 bootstrap table 插件 使用及簡單案例
文檔介紹:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
1. 引入js、css文件
<link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <link href="http://cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.css"> <script src="http://cdn.bootcss.com/jquery/3.1.0/jquery.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap-table/1.11.0/bootstrap-table.min.js"></script> <script src="http://cdn.bootcss.com/bootstrap-table/1.11.0/locale/bootstrap-table-zh-CN.min.js"></script>
2.table數(shù)據(jù)填充
bootStrap table獲取數(shù)據(jù)有兩種方式,一是通過table 的data-url屬性指定數(shù)據(jù)源,二是通過JavaScript初始化表格時指定url來獲取數(shù)據(jù)*
注意:使用data-toggle="table"的話,js操作就會失效,反之生效
<table data-toggle="table"> <thead> ... </thead> </table> $('#table').bootstrapTable({ url: 'data.json' });
3. js獲取數(shù)據(jù)的案例及釋義
<div class="panel panel-default"> <div class="panel-body table-responsive"> <div class="query-div" id="toolbar"> <form class="form-inline" role="form" id="query_form"> <div class="form-group query-form-group"> <label for="status">狀態(tài)</label> <select class="form-control" id="with_appr_status" <option value="">全部</option> <option value="S1">待處理</option> <option value="S2">已處理</option> </select> </div> <div class="form-group query-form-group"> <button type="button" class="btn btn-default" id="with_query">查詢</button> </div> </form> </div> <table id="query_results" class="table table-hover"> <thead> <tr> <th data-field="code">編號</th> <th data-field="time">申請時間</th> <th data-field="status" data-formatter="formatStatus">提現(xiàn)狀態(tài)</th> <th data-field="remark">備注</th> </tr> </thead> </table> </div> </div>
//注意 //1. contentType: "application/x-www-form-urlencoded" 想要后臺使用struts來接受數(shù)據(jù),或者使用對象.屬性的方法獲取,需要配置這個form,默認是“json” //2. pageNo 第幾頁,需要使用“Math.ceil(params.offset/params.limit) + 1”來計算,params.pageNumber一直獲取的是第一頁 loadData();//默認查詢 function loadData(){ //表格id $('#query_results').bootstrapTable({ url: '/test', //請求后臺的URL(*) method: 'post', //請求方式(*) contentType: "application/x-www-form-urlencoded",//需要設置為這個參數(shù),后臺才能通過對象獲取值,這里要注意 dataType: "json",//期待返回數(shù)據(jù)類型 toolbar: '#toolbar', //工具按鈕用哪個容器 toolbarAlign: "left",//工具欄對齊方式 striped: true, //是否顯示行間隔色 cache: false, //是否使用緩存,默認為true,所以一般情況下需要設置一下這個屬性(*) pagination: true, //是否顯示分頁(*) //sortable: false, //是否啟用排序 sidePagination: "server", //分頁方式:client客戶端分頁,server服務端分頁(*) pageNumber: 1, //初始化加載第一頁,默認第一頁 pageSize: 5, //每頁的記錄行數(shù)(*) pageList: [5, 10, 25, 50, 100], //可供選擇的每頁的行數(shù)(*) sortOrder: "asc", //排序方式 search: false,//搜索功能 buttonsAlign: "left",//按鈕對齊方式 //showColumns: true,//列選擇按鈕 strictSearch: true, clickToSelect: true, //是否啟用點擊選中行 //height: 460, //行高,如果沒有設置height屬性,表格自動根據(jù)記錄條數(shù)覺得表格高度 uniqueId: "id", //每一行的唯一標識,一般為主鍵列 cardView: false, //是否顯示詳細視圖 detailView: false, //是否顯示父子表 queryParamsType: 'limit', queryParams: queryParams }); //默認加載時攜帶參數(shù) function queryParams(params) { var params = { //這里的鍵的名字和控制器的變量名必須一直,這邊改動,控制器也需要改成一樣的 pageNo : Math.ceil(params.offset/params.limit) + 1, //頁碼 pageSize : params.limit, //頁面大小 "status" : $("#status").val() }; return params; } } //點擊“查詢”按鈕 $("#query").bind("click",function(){ //兩種方式: //1.直接刷新 $('#query_results').bootstrapTable("refresh", {}); //2. 先銷毀數(shù)據(jù),再次查詢,如下 $("#query_results").bootstrapTable('destroy'); loadPageData(); }); //表格列的格式化翻譯,對應data-formatter="formatStatus" function formatStatus(value, row, index){ if(value == 'S1'){ return "待處理"; }else{ return "已處理" } }
以上就是Bootstrap分頁表格插件如何使用的詳細內容了,看完之后是否有所收獲呢?如果如果想了解更多,歡迎來創(chuàng)新互聯(lián)成都網站設計公司行業(yè)資訊!
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。
分享標題:Bootstrap分頁表格插件如何使用-創(chuàng)新互聯(lián)
轉載注明:http://muchs.cn/article14/csjsde.html
成都網站建設公司_創(chuàng)新互聯(lián),為您提供靜態(tài)網站、做網站、網站維護、商城網站、外貿建站、響應式網站
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)