後臺實現分頁，前臺 easyUI 顯示

之前我寫過一篇文章，實現 easyui 前臺分頁，當時使用了分頁過濾器，鏈接如下：

http://blog.csdn.net/weixin_39735923/article/details/78729724

後來考慮到如果後臺數據量龐大，那麼用前臺分頁是不現實的，會很耗時間，佔用系統開銷。這個時候就應該用到後臺分頁了。後臺分頁其實也很簡單：每次只 sql 語句只查詢前臺某一頁需要的數據。所以需要前臺給後臺傳兩個數據：

pageNumber：當前頁數

pageSize：當前頁的數據條數。

一、首先在pom.xml中引入分頁插件：

        <!--分頁-->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>4.1.6</version>
        </dependency>
        <dependency>
            <groupId>com.github.jsqlparser</groupId>
            <artifactId>jsqlparser</artifactId>
            <version>0.9.6</version>
        </dependency>

這裏之前遇到了一個坑，當時引入了一個不兼容的分頁插件版本，然後就一直報錯，後來換成這個就好使了。。

二、前臺 js 代碼（easyUI）

    //表格鋪值
    $('#dg_question_list').datagrid({
        url: baselocation + '/test/question/allQuestions',  //controller地址
        method: 'post',
        //攜帶參數
        queryParams: {
            pageNum: incubGloPageNumber, // 全局變量，設置初始值爲1
            pageSize: incubGloPageSize // 全局變量，設置初始值爲10
        },
        height: 370,
        border: true,
        fitColumns: false, // 適應網格的寬度，防止水平滾動
        rownumbers: true, // 顯示一個行號列
        nowrap: true, // 數據顯示在一行
        singleSelect: true, // 只允許選擇一行
        pagination: true, // 在數據表格控件底部顯示分頁工具欄
        columns: [[{
            field: 'ck',
            checkbox: true,
        }, {
            title: '試題內容', //顯示的列名
            field: 'question_content', //和對象中的名字保持一致
            width: 150  // 寬度 必填！！！
        }, {
            title: '試題類型', //顯示的列名
            field: 'question_type_value', //和對象中的名字保持一致
            width: 100  // 寬度 必填！！！
        }, {
            title: '試題答案', //顯示的列名
            field: 'question_answer', //和對象中的名字保持一致
            width: 100,  // 寬度 必填！！！
            sortable: true
        }, {
            title: '試題分值', //顯示的列名
            field: 'question_points', //和對象中的名字保持一致
            width: 100,  // 寬度 必填！！！
            sortable: true
        }, {
            title: '所屬知識點', //顯示的列名
            field: 'kp_value', //和對象中的名字保持一致
            width: 150,  // 寬度 必填！！！
            sortable: true
        }, {
            title: '創建時間', //顯示的列名
            field: 'question_create_time', //和對象中的名字保持一致
            width: 150,  // 寬度 必填！！！
            sortable: true
        }, {
            title: '最後修改時間', //顯示的列名
            field: 'question_modify_time', //和對象中的名字保持一致
            width: 150,  // 寬度 必填！！！
            sortable: true
        }
        ]],
        loadFilter: function (result) {
            if (result.code == 200) {
                return result.data;
            } else {
                myMsgAlert('錯誤', '試卷列表加載失敗！', 'error');
            }
        },
        onClickRow: function (index, row) {
            globalQuestionId = row.id;
            $('#paperInfo_panel').panel('setTitle', '試題信息');
            setOption(row);
        }
    });

    //加載分頁
    $('#dg_question_list').datagrid('getPager').pagination({
        pageSize: 10,
        pageList: [10, 20, 30, 40, 50],
        beforePageText: '第',//頁數文本框前顯示的漢字
        afterPageText: '頁    共 {pages} 頁',
        displayMsg: '當前顯示 {from} - {to} 條記錄   共 {total} 條記錄',
        /**
         * 分頁查詢
         * @param pageNumber
         * @param pageSize
         */
        onSelectPage: function (pageNumber, pageSize) {
            incubGloPageNumber = pageNumber;
            incubGloPageSize = pageSize;
            incubQueryInfo(pageNumber, pageSize);

        }
    });

/**
 * 獲取分頁信息
 * @param pageNumber
 * @param pageSize
 */
function incubQueryInfo(pageNumber, pageSize) {
    var handler = baselocation + '/test/question/allQuestions'
    var opts = $('#dg_question_list').datagrid('options');
    var queryParams = opts.queryParams;
    queryParams.pageNum = pageNumber;
    queryParams.pageSize = pageSize;
    //設置表格數據的來源URL
    $('#dg_question_list').datagrid('options').url = handler;
    //重新加載表格
    $('#dg_question_list').datagrid('reload');

    //行號累增
    var start = (pageNumber - 1) * pageSize;
    var end = start + pageSize;
    var rowNumbers = $('.datagrid-cell-rownumber');
    $(rowNumbers).each(function (index) {
        var row = parseInt($(rowNumbers[index]).html()) + parseInt(start);
        $(rowNumbers[index]).html("");
        $(rowNumbers[index]).html(row);
    });

}

三、後臺service層代碼：

    @Override
    public Map<String, Object> selectAllQuestions(Map<String, Object> allQuestionsMap){
        //獲取頁數
        int pageNum = Integer.parseInt(allQuestionsMap.get("pageNum").toString());
        //獲取條數
        int pageSize = Integer.parseInt(allQuestionsMap.get("pageSize").toString());
        //判斷規格
        pageNum = pageNum == 0 ? 1 : pageNum;
        pageSize = pageSize == 0 ? 10 : pageSize;
        //分頁插件，要在調用mapper前就創建
        PageHelper.startPage(pageNum, pageSize);

        List<Map> questionList = testQuestionsMapper.selectAllQuestions(allQuestionsMap);

        PageInfo pageInfo = new PageInfo(questionList);

        Map<String, Object> resultMap = new HashMap<>();
        resultMap.put("total", pageInfo.getTotal());//easyui框架需要這個total數據來計算一共有多少頁
        resultMap.put("rows", pageInfo.getList());//rows裏面放的是一頁中的所有數據
        return resultMap;

    }

注意：這裏easyui如果用queryParams給後臺傳遞參數的話，controller層接收數據的時候應該一個一個接收：

    //根據條件搜索試題
    @RequestMapping(value = "/allQuestions", method = RequestMethod.POST)
    @ResponseBody
    public Map<String,Object> selectAllQuestions(
                                                 @RequestParam(value = "pageNum") int pageNumber,
                                                 @RequestParam(value = "pageSize") int pageSize
    )

然後再把它們一個一個放到map裏面，傳給service層

Map<String,Object> allQuestionsMap = new HashMap<>();
        allQuestionsMap.put("pageNum",pageNumber);
        allQuestionsMap.put("pageSize",pageSize);

sql語句不用變動。

到此，後臺分頁，前臺easyui顯示就可以實現了。。本人親測好使，大家如果認爲有哪裏不妥的地方，歡迎指正錯誤。按照本文一步一步最後沒實現的也可以來找我討論。