JS实现不刷新页面排序数据

在以往的方式中，我们一般是在数据集sql中，就事先定义好按照指定字段排序；或者通过动态参数，刷新页面进行页面数据排序，此时会导致报表再次触发查询，小数据量的话还好，但是当数据量比较大查询比较久时，这个排序的效率是比较鸡肋的，所以我们可以通过使用JavaScript的方式，实现不触发查询不刷新页面的数据排序，效率可观。

但是这种JavaScript的实现效果有一定的局限性：1、填报报表；2、排序的表头需要放在第一行；3、不可以有冻结行列。所以大家根据自己的情况进行使用，复杂的报表就只能使用旧方法用动态参数实现排序了。

1、报表设计：

2、JavaScript事件：

模板web属性中，选择填报报表；对应添加“加载结束”事件：

JavaScript代码如下：

//排序的方法，参数为表的id和列
function sortTable(table, idx) {
	var otable = document.getElementById(table),
	otody = otable.tBodies[0],
	otr = otody.rows,
	tarr = [];
	for (var i = 1; i < otr.length; i++) {
		tarr[i - 1] = otr[i];
		};
	if (otody.sortCol == idx) {
		tarr.reverse();
	}else{
		tarr.sort(function (tr1, tr2) {
			var value1 = tr1.cells[idx].innerHTML;
			var value2 = tr2.cells[idx].innerHTML;
			if (!isNaN(value1) && !isNaN(value2)) {
				return value1 - value2;
			} else {
			return value1.localeCompare(value2);
			}
		})
	}
	var fragment = document.createDocumentFragment();
	for (var i = 0; i < tarr.length; i++) {
		fragment.appendChild(tarr[i]);
	};
	otody.appendChild(fragment);
	otody.sortCol = idx;
}
//获取到页面中表头，设置点击事件  
$("#r-0-0 td").bind("click", function() {
	//获取到点击的列索引  
	var index = $(this).parents("tr").find("td").index($(this));
	//获取class=content-container的div中的table的id，或者sheet-container，唯一即可
	var tableID = $("div.content-container table").attr("id");
	//调用排序的方法，进行传值，0是这个表的id，可以通过F12获取到表的id  
	sortTable(tableID, index);
});

3、效果图：

通过如上的操作，就可以完成使用JavaScript实现不触发查询不刷新页面的数据排序，加快排序效率，让排序效果更加理想；

不过还是要注意局限性：1、填报报表；2、排序的表头需要放在第一行；3、不可以有冻结行列。

只能说普通数据报表或者普通填报报表可以用这个方法，复杂的话可能就用不上了。

如果大家在复杂报表中有什么好办法，不触发查询不刷新页面排序的话，希望大家分享一下，相互学习！