使用 BootstrapTable 实现数据的分页显示（二）

ゝ一世哀愁。 2022-07-16 06:00 203阅读 0赞

根据 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)" οnclick="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>
            
            <action name="permissionList"
                    class="corp.credit.system.action.CsPermissionAction"
                    method="csPermissionList">
            </action>