bootstrap 服务端分页与easyUI.datagrid

最新推荐文章于 2026-05-22 09:49:46 发布

原创最新推荐文章于 2026-05-22 09:49:46 发布 · 1.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#bootstrap #jquery-easyui-datagrid #分页

javaweb 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何在Bootstrap和EasyUI中实现高效的服务端分页功能，包括具体代码实现和配置说明。

一、bootstrap服务端分页
之前用的bootstrap分页插件是在前端分页的，一次查出所有的数据，在前端进行分页，但是这种方式会使得加载速度变得缓慢，加载1000+数据要三四秒的时间，用户体验不好，于是改成服务端分页
bootstrap-table.min.js
bootstrap-table-locale-all.min.js
bootstrap-table-zh-CN.min.js

1.服务端代码

public void sidUserInfoTG() {

        Map<String, Object> map = new HashMap<String, Object>();
        map.put("teacherId", keManage.getTeacherId());
        map.put("page", Integer.parseInt(keManage.getPageNumber())-1);
        map.put("size", Integer.parseInt(keManage.getPageSize()));
        try {
            // 查询个数
            int rst = manageService.countSidWithTeaId2(map);
            // 查询详情
            List<Map<String, Object>> list = manageService.sidUserInfoTG(map);
                // 返回结果
                JSONArray jsonList = JSONArray.fromObject(list );
                JSONObject json = new JSONObject();
                json.element("total", rst);
                json.element("rows", jsonList.toString());
                print(json);

            }
        } catch (Exception e) {
            printSysErr(e, logger);
        }
    }

2.jsp代码

<html lang="en"
      class="app js no-touch no-android chrome no-firefox no-iemobile no-ie no-ie10 no-ie11 no-ios no-ios7 ipad">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery.form.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/common/lyGrid.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/js/jquery-easyui-1.4.3/jquery.min.js"></script>
    <!-- bootstrap -->
    <%--<link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">--%>
    <%--<script src="http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>--%>
    <!-- 分页插件 -->
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/css/bootstrap-table.min.css" type="text/css">
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/js/bootatrap/bootstrap-table.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/js/bootatrap/bootstrap-table-locale-all.min.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/js/bootatrap/bootstrap-table-zh-CN.min.js"></script>
</head>
<body>
    <div class="col-xs-12" style="height: 60%">
                        <table id="test-table" class="col-xs-12" data-toolbar="#toolbar" style="height: 80%"></table>

                    </div>
</body>
<script>
    $('#test-table').bootstrapTable({
            method: 'get',
            toolbar: '#toolbar',    //工具按钮用哪个容器
            striped: true,      //是否显示行间隔色
            cache: false,      //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,     //是否显示分页（*）
            sortable: false,      //是否启用排序
            sortOrder: "asc",     //排序方式
            data_locale:"zh-CN" , //表格汉化
            pageNumber:1,      //初始化加载第一页，默认第一页
            pageSize: 10,      //每页的记录行数（*）
            pageList: [10, 20, 40, 60],  //可供选择的每页的行数（*）
            url: "*****",//接口名，这个接口需要处理bootstrap table传递的固定参数
            //queryParamsType:'', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort
                                // 设置为 ''  在这种情况下传给服务器的参数为：pageSize,pageNumber
            queryParams:  function(params) {

            return {
                pageNumber: params.offset+1,
                pageSize: params.limit,
                teacherId:teachId,
                };
            },//前端调用服务时，会默认传递上边提到的参数，如果需要添加自定义参数，可以自定义一个函数返回请求参数
            sidePagination: "server",   //分页方式：client客户端分页，server服务端分页（*）
            //search: true,      //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            //showColumns: true,     //是否显示所有的列
            //showRefresh: true,     //是否显示刷新按钮
            minimumCountColumns: 10,    //最少允许的列数
            clickToSelect: true,    //是否启用点击选中行
            searchOnEnterKey: true,
            columns: [{
                field: 'studentId',
                title: '电话',
                width : '20%',
                align: 'center',
                formatter:function(value,row,index){
                    //通过formatter可以自定义列显示的内容
                    //value：当前field的值，即id
                    //row：当前行的数据
                    if (value == undefined || value == null || value == '' || isNaN(value)){
                        return '微信用户';
                    }else {
                        return value;
                    }
                }
            },{
                field: 'userName',
                title: '姓名',
                width : '20%',
                align: 'center'
            },{
                field: 'grade',
                title: '年级',
                width : '20%',
                align: 'center',
                formatter:function(value,row,index){
                    //通过formatter可以自定义列显示的内容
                    //value：当前field的值，即id
                    //row：当前行的数据
                    switch (value){
                        case '01':
                            return '<font color="black">一年级</font>';
                            break;
                        case '02':
                            return '<font color="black">二年级</font>';
                            break;
                        case '03':
                            return '<font color="black">三年级</font>';
                            break;
                        case '04':
                            return '<font color="black">四年级</font>';
                            break;
                        case '05':
                            return '<font color="black">五年级</font>';
                            break;
                        case '06':
                            return '<font color="black">六年级</font>';
                            break;
                        default:
                            return '<font color="black">一年级</font>';
                    }
                }
            },{
                field: 'createTime',
                title: '使用时间',
                width : '20%',
                align: 'center'
            },{
                field: 'hasTask',
                title: '操作',
                width : '20%',
                align: 'center'
            }
            ]
        });

</script>
</html>

二、easyUI.datagride分页
1.action

    public void mobileManage(){
        int start = (getPage() - 1) * getRows();
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("page", start);
        map.put("size", getRows());

        try {
            // 查询手个数
            List<Integer> rst = manageService.selMobileManageCnt();
            // 查询信息
            List<Map<String, Object>> list = manageService.selMobileManage(map);
            JSONArray jsonList = JSONArray.fromObject(list);
            JSONObject json = new JSONObject();
            json.element("total", rst.get(0));
            json.element("rows", jsonList.toString());
            print(json);
        } catch (Exception e) {
            printSysErr(e, logger);
        }
    }

2.jsp页面

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title></title>
        <script
            src="${pageContext.request.contextPath}/js/aa.js"
            type="text/javascript"></script>
</head>
    <body>
            <div class="col-md-6" style="height: 68%; width: 100%; margin-top:10px;">
                <div id="teh_grid_manage" style="height: 20%; width: 100%; float: left;"></div>
            </div>
    </body>
</html>

3.js脚本

$(function() {
    createGridMManage();
});

function createGridMManage() {

    $('#teh_grid_manage').datagrid( {
        pagination : true,
        url : '****',//接口名
        title : '详情',
        method : 'post',
        width : '90%',
        height : '500px',
        striped : true,
        fit : true,
        rownumbers:true,
        loadMsg : '正在努力为您查找中……',
        idField : 'id',
        singleSelect : true,
        columns : [ [ {
            field : 'manageName',
            title : '姓名',
            width : '25%',
            align : 'center'
        },{
            field : 'manageId',
            title : '手机号',
            width : '25%',
            align : 'center'
        },{
            field : 'createTime',
            title : '添加时间',
            width : '25%',
            align : 'center'
        },{
            field : 'teacherId',
            title : '操作',
            width : '100',
            align : 'center',
            formatter : function(value,rec) {
                return '<input type="button" style="background-color: #FF8888;border-width: 1px;border-color: #4cae4c;height:23px;width:50px;" '+
                        'onclick=delManage("'+ rec.manageId +'") value="删除" id="' + rec.manageId +'"/>';
            }
        }  ] ]
    });
}
//删除
function delManage(mid){
    // 删除
    $.post('aa.do', {
        'manageId' : mid
    }, function(data) {
        if (data.result == "success") {
            alert("删除成功");
            $('#'+mid).attr("disabled","true");
            $('#'+mid).css("background-color","#DDDDDD");
        }else{
            alert("删除失败")
        }
    }, 'json');
}