easyui 前端处理分页排序

最新推荐文章于 2022-07-07 14:50:01 发布

nayi_224

最新推荐文章于 2022-07-07 14:50:01 发布

阅读量764

点赞数

分类专栏： easyui 文章标签： easyui

本文链接：https://blog.csdn.net/nayi_224/article/details/90071511

版权

easyui 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

原帖地址：https://bbs.csdn.net/topics/392613293
感谢【Hello World,】、【囧】两位大佬提供的代码。


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
		<script src="../../../js/jquery-easyui-1.7.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../../../js/jquery-easyui-1.7.0/themes/default/easyui.css"/>
		<script src="../../../js/jquery-easyui-1.7.0/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
        <title></title>
    <script type="text/javascript">
        jQuery(function(){
            jQuery("#dg").datagrid({
                remoteSort:false,
                rownumbers:true,
                singleSelect:true,
                autoRowHeight:false,
                pagination:true,
                pageSize:2,
                pageList: [1, 2, 3, 4, 5],
                columns: colConfig1,
                loadFilter:pagerFilter,
                data: json_1.rows
            });
             
        });
         
        var colConfig1 = [[
                    {field:'id',title:'id',width:100},
                    {field:'val',title:'val',width:100},
                    {field:'val2',title:'val2',width:100,sortable:true}
                ]];
         
        var json_1 = {"rows":[
{"id":"i1","val":"11","val2":"2"},
{"id":"i2","val":"11","val2":"12"},
{"id":"i2","val":"11","val2":"32"},
{"id":"i2","val":"11","val2":"42"},
{"id":"i3","val":"21","val2":"52"}],
};
 
		function sortData(data, sortName, sortOrder){
			data.sort(function(a, b){
				a = a[sortName];
				b = b[sortName];
				var ret = 0;
				if(a > b){
					ret = 1;
				}else if(a < b){
					ret = -1;
				}
				return sortOrder == 'asc' ? ret : -ret;
			});
		}

        function pagerFilter(data){
            if (typeof data.length == 'number' && typeof data.splice == 'function'){    // is array
                data = {
                    total: data.length,
                    rows: data
                }
            }
            var dg = $(this);
			
            var opts = dg.datagrid('options');
            var pager = dg.datagrid('getPager');
            pager.pagination({
                onSelectPage:function(pageNum, pageSize){
                    opts.pageNumber = pageNum;
                    opts.pageSize = pageSize;
                    pager.pagination('refresh',{
                        pageNumber:pageNum,
                        pageSize:pageSize
                    });
                    dg.datagrid('loadData',data);
                }
            });
            if (!data.originalRows){
                data.originalRows = (data.rows);
            }
			if(opts.sortName){
				sortData(data.originalRows, opts.sortName, opts.sortOrder);
			}
            var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
            var end = start + parseInt(opts.pageSize);
            data.rows = (data.originalRows.slice(start, end));
	
            return data;
        }       
         
    </script>
    </head>
    <body>
        <div>
            <table id="dg"></table>
        </div>
    </body>
 
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
		<script src="../../../js/jquery-easyui-1.7.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../../../js/jquery-easyui-1.7.0/themes/default/easyui.css"/>
		<script src="../../../js/jquery-easyui-1.7.0/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<title></title>
    <script type="text/javascript">
        jQuery(function () {
            jQuery("#dg").datagrid({
                remoteSort: false,
                rownumbers: true,
                singleSelect: true,
                autoRowHeight: false,
                pagination: true,
                pageSize: 2,
                pageList: [1, 2, 3, 4, 5],
                columns: colConfig1,
                loadFilter: pagerFilter,
                data: json_1.rows,
                onBeforeSortColumn: onBeforeSortColumn
            });

        });

        var colConfig1 = [[
					{ field: 'id', title: 'id', width: 100 },
					{ field: 'val', title: 'val', width: 100 },
					{ field: 'val2', title: 'val2', width: 100, sortable: true }
        ]];

        //val2如果是字符类型，在排好序取数之后还会被排一次，按字符排序'2'比'12'大
        var json_1 = {
            "rows": [
                { "id": "i1", "val": "11", "val2": 2 },
                { "id": "i2", "val": "11", "val2": 12 },
                { "id": "i2", "val": "11", "val2": 32 },
                { "id": "i2", "val": "11", "val2": 42 },
                { "id": "i3", "val": "21", "val2": 52 }
            ]
        };
        json_1.total = json_1.rows.length;
        function pagerFilter(data) {
            data = JSON.parse(JSON.stringify(json_1));
            var dg = $(this);
            var opts = dg.datagrid('options');
            var pager = dg.datagrid('getPager');
            pager.pagination({
                onSelectPage: function (pageNum, pageSize) {
                    opts.pageNumber = pageNum;
                    opts.pageSize = pageSize;
                    pager.pagination('refresh', {
                        pageNumber: pageNum,
                        pageSize: pageSize
                    });
                    dg.datagrid('loadData', data);
                }
            });
            if (!data.originalRows) {
                data.originalRows = (data.rows);
            }
            var start = (opts.pageNumber - 1) * parseInt(opts.pageSize);
            var end = start + parseInt(opts.pageSize);
            data.rows = (data.originalRows.slice(start, end));
            return data;
        }
        function onBeforeSortColumn(sort, order) {
            if (order.toUpperCase() === 'DESC')
                order = -1
            else
                order = 1;
            json_1.rows.sort(function (a, b) {
                if (parseFloat(a[sort]) > 1 * b[sort])
                    return 1 * order;
                else if (a[sort] * 1 < 1 * b[sort])
                    return -1 * order;
                else
                    return 0;
            });
            return true;
        }
    </script>
</head>
<body>
    <div>
        <table id="dg"></table>
    </div>
</body>
</html>

nayi_224

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui 前端处理分页排序

原帖地址：https://bbs.csdn.net/topics/392613293感谢【Hello World,】、【囧】两位大佬提供的代码。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src="../../../js/jquery...
复制链接

扫一扫