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 相关文章推荐
一个javascript图片阅览组件
Nov 09 Javascript
利用JS自动打开页面上链接的实现代码
Sep 25 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
Dec 20 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
Mar 14 Javascript
jquery html动态生成select标签出问题的解决方法
Nov 20 Javascript
javascript 10进制和62进制的相互转换
Jul 31 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
jQuery选择器源码解读(七):elementMatcher函数
Mar 31 Javascript
AngularJS日程表案例详解
Aug 15 Javascript
通俗易懂地解释JS中的闭包
Oct 23 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 Javascript
基于vue中的scoped坑点解说
Sep 04 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
How do I change MySQL timezone?
2008/03/26 PHP
php 生成饼图 三维饼图
2009/09/28 PHP
第七章 php自定义函数实现代码
2011/12/30 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
php5.3/5.4/5.5/5.6/7常见新增特性汇总整理
2020/02/27 PHP
用nodejs访问ActiveX对象,以操作Access数据库为例。
2011/12/15 NodeJs
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合
2016/08/11 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
简单实现IONIC购物车功能
2017/01/10 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
JavaScript数据结构之单链表和循环链表
2017/11/28 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
element的el-table中记录滚动条位置的示例代码
2019/11/06 Javascript
在Vuex中Mutations修改状态操作
2020/07/24 Javascript
[00:12]DAC2018 no[o]ne亮相SOLO赛 他是否如他的id一样无人可挡?
2018/04/06 DOTA
python中的yield使用方法
2014/02/11 Python
pandas把dataframe转成Series,改变列中值的类型方法
2018/04/10 Python
使用11行Python代码盗取了室友的U盘内容
2018/10/23 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
Pycharm激活方法及详细教程(详细且实用)
2020/05/12 Python
keras实现调用自己训练的模型,并去掉全连接层
2020/06/09 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
毕业实习个人鉴定范文
2013/12/10 职场文书
物业工作计划书
2014/01/10 职场文书
优秀员工评语
2014/02/10 职场文书
地球一小时活动总结
2015/02/27 职场文书