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 相关文章推荐
document.forms用法示例介绍
Jun 26 Javascript
浅谈JavaScript中定义变量时有无var声明的区别
Aug 18 Javascript
js精美的幻灯片画集特效代码分享
Aug 29 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
深入理解Ajax的get和post请求
Jun 02 Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 Javascript
基于vue2.0动态组件及render详解
Mar 17 Javascript
微信小程序实现复选框效果
Dec 28 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
利用es6 new.target来对模拟抽象类的方法
May 10 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
小程序实现悬浮搜索框
Jul 12 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 Switch 语句之学习笔记
2013/09/21 PHP
php检索或者复制远程文件的方法
2015/03/13 PHP
PHP中SESSION过期设置
2021/03/09 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
ExtJS 简介 让你知道extjs是什么
2008/12/29 Javascript
js实现兼容IE6与IE7的DIV高度
2010/05/13 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
2014/02/19 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
基于javascript实现浏览器滚动条快到底部时自动加载数据
2015/11/30 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
Vue.js基础知识小结
2017/01/13 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
12 种使用Vue 的最佳做法
2020/03/30 Javascript
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
Python模块搜索路径代码详解
2018/01/29 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
New Balance德国官方网站:购买鞋子和服装
2019/08/31 全球购物
高分子材料与工程专业推荐信
2013/12/01 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
音乐兴趣小组活动总结
2014/07/07 职场文书
四风查摆问题自查报告
2014/10/10 职场文书
2014财务年度工作总结
2014/11/11 职场文书
2014年保安个人工作总结
2014/11/13 职场文书
培训师岗位职责
2015/02/14 职场文书
Spring Bean的实例化之属性注入源码剖析过程
2021/06/13 Java/Android