bootstrap-table的Demo
阿新 • • 發佈:2019-02-14
bootstrap-table-demo.jsp(把標頭檔案去掉,改成html也可以):
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>bootstrap-table-demo</title> <!-- 引入bootstrap樣式 --> <link href="https://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"> <!-- 引入bootstrap-table樣式 --> <link href="https://cdn.bootcss.com/bootstrap-table/1.8.1/bootstrap-table.min.css" rel="stylesheet"> </head> <body> <div style="width: 100%; padding-top: 8px;" align="left"> <table id="tablewrap" data-toggle="table" data-locale="zh-CN" data-ajax="ajaxRequest" data-side-pagination="server" data-striped="true" data-single-select="true" data-click-to-select="true" data-pagination="true" data-pagination-first-text="首頁" data-pagination-pre-text="上一頁" data-pagination-next-text="下一頁" data-pagination-last-text="末頁" class="fline-show-when-ready"> <thead style="text-align: center;"> <tr> <th data-formatter="numberAsc" data-width="50">序列</th> <th data-field="userName" data-width="300" data-formatter="nameFormat">使用者名稱稱</th> <th data-field="userId" data-width="100">使用者id</th> </tr> </thead> </table> </div> </body> <!-- jquery --> <!-- <script src="../../js/jquery-3.3.1.min.js" type="text/javascript"></script> --> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <!-- bootstrap-table.min.js --> <script src="https://cdn.bootcss.com/bootstrap-table/1.8.1/bootstrap-table.min.js"></script> <!-- 引入中文語言包 --> <script src="https://cdn.bootcss.com/bootstrap-table/1.8.1/locale/bootstrap-table-zh-CN.min.js"></script> <script type="text/javascript"> var pageNum = 1; //頁碼 var pageSize = 10; //頁寬 var count; //資料量 var index = 1; //序號 //資料獲取 function ajaxRequest(params) { pageSize = params.data.limit; pageNum = params.data.offset / pageSize + 1; index = params.data.offset + 1; $.ajax({ type : 'get', url : "../../data/bootstrap-table-data.json", // url : "/hello/helloData", // 這裡的請求需要提供分頁查詢的功能。 //data:{} ,//這裡新增分頁引數與查詢條件。 dataType : 'json', error : function(request, textStatus, errorThrown) { fxShowAjaxError(request, textStatus, errorThrown); }, success : function(data) { console.log(data); data = data.users; if (data) { applies = data ? data : []; } console.log(applies); count = data.length; params.success({ total : count, rows : applies }); params.complete(); } }); } //自增序號 function numberAsc(){ return index++; //index在ajaxRequest函式中被再次初始化 } //名稱格式化 function nameFormat(name){ if(name.length>20) return name.substring(0,20)+"..."; else return name; } </script> </html>
bootstrap-table-data.json : json資料(為了方便展示,將後臺的返回資料直接copy過來了):
{ "users": [ { "userId": 1, "userName": "test", "userAge": null }, { "userId": 2, "userName": "測試二", "userAge": null }, { "userId": 4, "userName": "測試三", "userAge": null }, { "userId": 5, "userName": "測試四", "userAge": null }, { "userId": 17, "userName": "111", "userAge": null }, { "userId": 18, "userName": "111", "userAge": null }, { "userId": 43, "userName": "新測試", "userAge": null } ] }
最終效果: