关于easyui表格前台分页排序的问题

主页

nayi_224 辽大 java 2019年05月09日

关于easyui表格前台分页排序的问题

数据量比较少，因此我准备把数据一次性加载，并在前端分页、列排序。

现在的问题是，排序只针对当前页，我需要的是针对全部数据进行排序。

对于下面的代码，要如何修改？



<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.js"></script>

		<script src="../../../js/jquery-easyui-1.7.0/jquery.easyui.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/locale/easyui-lang-zh_CN.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 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);

			}

			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>