使用 BootstrapTable 實現資料的分頁顯示（二）
阿新 • • 發佈：2019-01-29
根據 AJAX 的思想，先將需要展示的樣式表現出來，然後，編輯展示頁面實現後臺資料的展示。
編輯類方法，實現action定義 --》 編輯XML配置檔案，實現頁面跳轉 --》編輯 JSP 檔案，實現背景部分的展示，編輯並 url ，指定動態資料的獲取 action name --》編輯 XML 配置檔案，action及其 method 方法 --》編輯 method 方法。此時可以沒有返回值，上一配置時也可不編輯 result 標籤，頁面由 BootstrapTable 自動載入資料。
頁面檔案原始碼如下
一。靜態資料頁面
二。配置檔案<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%--<html>--%> <%--<head>--%> <%--<title></title>--%> <%--<script type="text/javascript" src="ui/js/bootstrap.js"></script>--%> <%--<script type="text/javascript" src="ui/js/bootstrap-table.js"></script>--%> <%--<script type="text/javascript" src="ui/js/bootstrap-table-zh-CN.js"></script>--%> <%--</head>--%> <%--<body>--%> <div class="container-fluid content-main" role="main"> <div id="myTabContent" class="content-main-container"> <div class="panel panel-primary gd-panel"> <div class="panel-heading"> <b>查詢條件</b> <%--<a style="float: right;color: #FFFFFF;" href="javascript:void(0)" onclick="showDataMaximum()">資料上限</a>--%> </div> <div class="panel-body"> <%--<div id="dataMaximumDiv" style="display: none;margin-bottom: 10px"> </div>--%> <form> <input type="text" hidden="" id="callConnect" name="customerQuery.callConnect"> <table class="gdQueryTable"> <tbody> <tr class="selectgroup"> <td> <label>名稱：</label> </td> <td colspan="2"> <input type="text" class="form-control" value="" name=" "> </td> <td> <label>許可權組：</label> </td> <td> <select class="combobox"> <option value="MR" selected="selected">系統管理</option> <option value="PA">增值服務</option> <option value="CT">話務</option> <option value="MD">工單</option> </select> </td> <td> <button type="button" class="btn btn-success">查詢</button> </td> </tr> </tbody> </table> </form> </div> </div> <div class="panel panel-primary gd-panel"> <div class="panel-heading"> <b>客戶列表</b> </div> <div class="panel-body"> <%--<div class="bootstrap-table">--%> <%--<div class="fixed-table-toolbar"></div>--%> <%--<div class="fixed-table-container">--%> <table class="table table-bordered" id="permissionTable"> </table> <%--</div>--%> <%--</div>--%> </div> </div> </div> </div> <script type="text/javascript"> //load permissionList $(function () { $("#permissionTable").bootstrapTable({ // for the Name of Package then appended system url:'permissionList', height: 500, dataType: "json", striped: true,//row color cache: false, undefinedText: "-", sortName: "permId", sortOrder: "asc", pagination: true, //--singleSelect:false, sidePagination: "server", toolbar: "#toolbar", pageNumber: 1, pageSize: 20, //--pageList:[10,50,100,200,500], //--search:false //--showColumns:false, //--queryParams:queryParams, //--minimunCountColumns:2 paginationPreText: "上一頁", paginationNextText: "下一頁", columns: [{ checkbox: true }, { field: 'permId', title: '使用者姓名', align: 'center' }, { field: "permName", title: "性別", align: "center" }, { field: "permUrl", title: "手機號", align: "center" }, { field: 'permDesc', title: '操作', align: 'center' }, { field: "permType", title: "開發號", align: "center" }]/*, onLoadError: function (data) { $('#table').bootstrapTable('removeAll'); }*/ }); }); // //query // function queryCsUser(){ // var userName = $.trim($("#userName").val()); // var phoneNum = $.trim($("#phoneNum").val()); // $("#userList").bootstrapTable('refresh',{ // url:"csUserList?csUser.userName="+userName+"&csUser.phoneNum="+phoneNum // }) // } // //revert // function revertCsUser(){ // $("#userName").val(""); // $("#phoneNum").val(""); // $("#userList").bootstrapTable('refresh',{ // url:"csUserList" // }) // } </script> <%--</body>--%> <%--</html>--%>
<action name="csPermissionAction_*" class="corp.credit.system.action.CsPermissionAction" method="{1}"> <result name="permissionListTo">/jsp/layout/system/permissionList.jsp</result> </action> <!--permissionList--> <action name="permissionList" class="corp.credit.system.action.CsPermissionAction" method="csPermissionList"> </action>