easyui datagrid 后台分页+排序

最新推荐文章于 2019-01-08 17:37:00 发布

Z丶royAl

最新推荐文章于 2019-01-08 17:37:00 发布

阅读量1.8w

点赞数 1

本文链接：https://blog.csdn.net/qq_15260315/article/details/80403167

版权

本文介绍了如何在EasyUI的datagrid中实现后台分页和排序功能。通过在jsp页面定义table，js加载table，后台controller接收并处理分页参数page、rows、sort、order，使用Collections.sort()进行排序，subList()获取分页数据。同时在service层创建测试数据，并展示了页面排序的效果。

摘要由CSDN通过智能技术生成

一、jsp页面定义table

<div><table id="dg"></table></div>

二、js页面加载table

$(function () {
    test1();
});

var test1 = function () {

    var m_test_name = "测试";
    var pageNumber = 1;
    var pageSize = 20;
    
    init_datagrid();

    function init_datagrid() {
        var arr_columns = test_dg_columns();
        $("#dg").datagrid({
             url: 'temp/test/queryTest',
             singleSelect: true,
             remoteSort: true, //定义从服务器对数据进行排序。
             pagination: true, //在DataGrid控件底部显示分页工具栏。
             pageNumber: pageNumber,
             pageSize: pageSize,
     	     pageList: [10,15,20],
             method: 'post',
             columns: [arr_columns],
             rownumbers: true,
             loadMsg: '正在加载数据',
             checkbox: true,
             title: '表单 -- ' + m_test_name,
             emptyMsg: '列表为空',
             selectOnCheck: false,
             checkOnSelect: false
        });
    }

    function test_dg_columns() {
        var arr = new Array();
        arr.push({"field": "yi", "title": 'test1', "width": '19%', "align": 'center',sortable:true});
        arr.pu