js元件-bootstrap table 客戶端分頁與搜尋總結
阿新 • • 發佈：2019-01-23
先上程式碼以及效果圖
ｈｔｍｌ程式碼
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <% pageContext.setAttribute("APP_PATH",request.getContextPath()); %> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="${APP_PATH}/js/bootstrap-dialog.min.js"></script> <link href="${APP_PATH}/plugin/layui/css/layui.css" rel="stylesheet" /> <script type="text/javascript" src="${APP_PATH}/js/bootstrap-pagy.min.js"></script> <link type="text/css" rel="stylesheet" href="${APP_PATH}/css/commone.css" /> <script type="text/javascript" src="${APP_PATH}/js/teacherList.js"></script> <!-- 必須引入 --> <script type="text/javascript" src="${APP_PATH}/js/jquery-2.0.0.min.js"></script> <script type="text/javascript" src="${APP_PATH}/js/bootstrap.min.js"></script> <link type="text/css" rel="stylesheet" href="${APP_PATH}/css/bootstrap.min.css" /> <link type="text/css" rel="stylesheet" href="${APP_PATH}/css/bootstrap-table.css" /> <script type="text/javascript" src="${APP_PATH}/js/bootstrap-table.js"></script> <script type="text/javascript" src="${APP_PATH}/js/bootstrap-table-zh-CN.js"></script> </head> <body> <div> <table id="TeacherInfoTable"> </table> </div> <div id="toolbar" class="btn-group"> <button id="btn_add" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button> <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> </body> </html>
其中後面６個是必須要引入的 給出下載地址
js程式碼
$(function(){ $('#TeacherInfoTable').bootstrapTable({ url : 'teacher/getAllList', // 請求後臺的URL（*） method : 'get', // 請求方式（*） toolbar : '#toolbar', // 工具按鈕用哪個容器 striped : true, // 是否顯示行間隔色 cache : false, // 是否使用快取，預設為true，所以一般情況下需要設定一下這個屬性（*） // sortable : true, //用 是否啟排序 // sortOrder : "asc", // 排序方式 sidePagination : "client", // 分頁方式：client客戶端分頁，server服務端分頁（*） pagination : true, // 是否顯示分頁（*） pageNumber: 1, //如果設定了分頁，首頁頁碼 pageSize: 4, //每頁的記錄行數（*） pageList: [4,5,6], //可供選擇的每頁的行數（*） // onlyInfoPagination:false, //設定為 true 只顯示總資料數，而不顯示分頁 showRefresh : true, // 是否顯示重新整理按鈕 // queryParamsType:'', clickToSelect : true, // 是否啟用點選選中行 // uniqueId : "fileid", // 每一行的唯一標識，一般為主鍵列 showToggle : false, // 是否顯示詳細檢視和列表檢視的切換按鈕 // cardView : false, // 是否顯示詳細檢視 // detailView : false, // 是否顯示父子表 search:true, //是否啟用搜索框 columns : [ { field : 'tUsername', title : '教師號', align: 'center', valign: 'middle' },{ field : 'tName', title : '姓名', align: 'center', valign: 'middle' }, { field : 'tAge', title : '年齡', align: 'center', valign: 'middle' }, { field : 'tDepartment', title : '所屬學院', align: 'center', valign: 'middle' } ], silent : true, // 重新整理事件必須設定 }); })
Controller層程式碼
@RequestMapping("/getAllList")
@ResponseBody
public List<Teacher> getTeacherAll()
{
return teacherService.getTeacherList();
} 資料返回示例
總結：
客戶端分頁 將分頁方式定為ｃｌｉｅｎｔ 一次性從後臺請求所有資料 由前臺進行分頁以及搜尋功能，而不必再次請求伺服器端
優點：方便 簡單
缺點：當資料過多時會對效能造成影響
後面一篇會介紹伺服器端的分頁以及搜尋