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

最新推荐文章于 2023-08-17 10:50:26 发布

稚枭天卓

最新推荐文章于 2023-08-17 10:50:26 发布

阅读量5.5k

点赞数

分类专栏： BootStrap 教程文章标签： action bootstrap js xml ajax

本文链接：https://blog.csdn.net/u013630349/article/details/52758983

版权

BootStrap 教程专栏收录该内容

12 篇文章 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>
        <!--permissionList-->
        <action name="permissionList"
                class="corp.credit.system.action.CsPermissionAction"
                method="csPermissionList">
        </action>