JS实现table表格数据排序功能(可支持动态数据+分页效果)


Posted in Javascript onMay 26, 2016

asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序.

数据就是字母和数字两组.(汉字需要找到asc码) 原理就是利用数组自带的sort排序,进行表格重组.已在.net mvc 中测试过.支持分页.(申明一点.只对当前页面数据排序 无刷新,对所有页面排序的话,肯定需要刷新.这点我还在解决中.)希望有新想法的高手们,给下指点.

下面把html的代码贴出来:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD><TITLE>js操作刷新</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8" ;>
<script language="javaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
</HEAD>
<SCRIPT>
//--------------------- 排序
//需要在排序的table上加id="tableNeed",需在排序的列上加onclick="sortt('.?')",在此列所有<td>上加class="?"
function sortt(className){
var listName=new Array();
var listNameOld=new Array();
var listTr=new Array();
var listSort=new Array();
var i=1;
var b=false;
//取得原来的<tr>,并清空<table>
$("#tableNeed tr").each(function(){
listTr.push($(this).html());
});
//得到要排列的列的元素,并在末尾追加此刻的顺序(从1开始)
$(className).each(function(){
listName.push($(this).text()+i);
listNameOld.push($(this).text()+i);
i++;
});
//将要排序的元素排序
mySort(listName);
//判断排序后元素位置是否发生变化
for(var j=0;j<listName.length;j++){
if(listName[j].substring(listName[j].length-listNameOld[j].length)!=listNameOld[j]){
b=true;
break;
}
}
//排序后,根据先前追加的顺序得到此时<tr>的顺序
for(var j=0;j<listName.length;j++){
listSort.push(parseInt(listName[j].substring(listName[j].length-1)));
}
$("#tableNeed").html('');
//按顺序追加<tr>,若排序后元素顺序未变化,则倒序追加
$("#tableNeed").append("<tr class='header'>"+listTr[0]+"</tr>");
if(b){
for(var j=0;j<listSort.length;j++){
$("#tableNeed").append("<tr>"+listTr[listSort[j]]+"</tr>");
}
}else{
for(var j=listSort.length-1;j>=0;j--){
$("#tableNeed").append("<tr>"+listTr[listSort[j]]+"</tr>");
}
}
}
//首先按字符个数排序,然后按相对应的字符大小排序
function mySort(list){
var len=0;
var add="";
for(var i=0;i<list.length;i++){
var str=list[i];
if(str.length>len){
len=str.length;
}
}
for(var i=0;i<len;i++){
add+="0"
}
for(var i=0;i<list.length;i++){
var strOne=add+list[i];
list[i]=strOne.substring(strOne.length-len);
}
list.sort();
}
//----------------------------
</SCRIPT>
<BODY>
<TABLE id="tableNeed" border=1>
<tr><td onclick="sortt('.1')">数字</td><td onclick="sortt('.2')">字母</td><td onclick="sortt('.3')">数字和字母</td></tr>
<tr><td class="1">11</td><td class="2">ee</td><td class="3">1a</td></tr>
<tr><td class="1">22</td><td class="2">gg</td><td class="3">7g</td></tr>
<tr><td class="1">33</td><td class="2">cc</td><td class="3">d4</td></tr>
<tr><td class="1">44</td><td class="2">aa</td><td class="3">3c</td></tr>
<tr><td class="1">55</td><td class="2">dd</td><td class="3">e5</td></tr>
<tr><td class="1">66</td><td class="2">ff</td><td class="3">f6</td></tr>
<tr><td class="1">77</td><td class="2">hh</td><td class="3">2b</td></tr>
<tr><td class="1">88</td><td class="2">bb</td><td class="3">h8</td></tr>
</TABLE>
</BODY></HTML>

以上所述是小编给大家介绍的JS实现table表格数据排序功能(可支持动态数据+分页效果) ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery offset函数应用实例
Nov 14 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
js打造数组转json函数
Jan 14 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
详解JavaScript中setSeconds()方法的使用
Jun 11 Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 jQuery
原生JS实现的双色球功能示例
Feb 02 Javascript
详解如何构建Promise队列实现异步函数顺序执行
Oct 23 Javascript
layer扩展打开/关闭动画的方法
Sep 23 Javascript
js 计数排序的实现示例(升级版)
Jan 12 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
JS代码实现table数据分页效果
May 26 #Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 #Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 #Javascript
JavaScript数组的栈方法与队列方法详解
May 26 #Javascript
详解JavaScript中this关键字的用法
May 26 #Javascript
ashx文件获取$.ajax()方法发送的数据
May 26 #Javascript
js操作数据库实现注册和登陆的简单实例
May 26 #Javascript
You might like
php生成txt文件实例代码介绍
2016/04/28 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
jqPlot Option配置对象详解
2009/07/25 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
vue 中自定义指令改变data中的值
2017/06/02 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
vue不通过路由直接获取url中参数的方法示例
2017/08/24 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
基于vue-video-player自定义播放器的方法
2018/03/21 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
Pycharm学习教程(6) Pycharm作为Vim编辑器使用
2017/05/03 Python
Tensorflow简单验证码识别应用
2017/05/25 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
利用python求积分的实例
2019/07/03 Python
python用WxPython库实现无边框窗体和透明窗体实现方法详解
2020/02/21 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
Python3爬虫ChromeDriver的安装实例
2021/02/06 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
可持续木材、生态和铝制太阳镜:Proof Eyewear
2019/07/24 全球购物
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
检讨书之工作不认真
2019/08/14 职场文书
如何获取numpy array前N个最大值
2021/05/14 Python
Go语言特点及基本数据类型使用详解
2022/03/21 Golang