table排序

最新推荐文章于 2021-03-24 01:02:26 发布
最新推荐文章于 2021-03-24 01:02:26 发布
阅读量589 收藏
点赞数
分类专栏： 技术

贴一下代码吧

 

[xhtml]  view plain copy print ?
  1. <html>  
  2. <head>  
  3.       
  4.     <mce:script type="text/javascript" src="jquery.js" mce_src="jquery.js"></mce:script>  
  5.     <mce:script type="text/javascript" src="tablesort.js" mce_src="tablesort.js"></mce:script>  
  6. </head>  
  7. <body>  
  8. <title>my</title>  
  9. <p>body 元素的内容会显示在浏览器中。</p>  
  10. <p>title 元素的内容会显示在浏览器的标题栏中。</p>  
  11. <table id="tsort" border="1">  
  12. <thead>  
  13. <tr>  
  14. <th><a href="javascript:$('#tsort').sortTable({onCol: 1, keepRelationships: true})" mce_href="javascript:$('#tsort').sortTable({onCol: 1, keepRelationships: true})" >num</a></th>  
  15. <th><a href="javascript:$('#tsort').sortTable({onCol: 2, keepRelationships: true})" mce_href="javascript:$('#tsort').sortTable({onCol: 2, keepRelationships: true})" >letter2</a></th>  
  16. <th><a href="javascript:$('#tsort').sortTable({onCol: 3, keepRelationships: true})" mce_href="javascript:$('#tsort').sortTable({onCol: 3, keepRelationships: true})" >letter2</a></th>  
  17. </tr>  
  18. </thead>  
  19. <tbody>  
  20. <tr>  
  21. <td>3</td>  
  22. <td>113.31.34.1</td>  
  23. <td>liu</td>  
  24. </tr>  
  25. <tr>  
  26. <td>1</td>  
  27. <td>113.31.34.3</td>  
  28. <td>tyiu</td>  
  29. </tr>  
  30. <tr>  
  31. <td>2</td>  
  32. <td>113.31.34.2</td>  
  33. <td>liu5u</td>  
  34. </tr>  
  35. </tbody>  
  36. </table>  
  37. </body>  
  38. </html>  
 

 

tablesort.js

[javascript] view plain copy print ?
  1. /* =============================== 
  2. | TABLESORT.JS 
  3. | Copyright, Andy Croxall (mitya@mitya.co.uk) 
  4. | For documentation and demo see http://mitya.co.uk/scripts/Animated-table-sort-REGEXP-friendly-111 
  5. | 
  6. | USAGE 
  7. | This script may be used, distributed and modified freely but this header must remain in tact. 
  8. | For usage info and demo, including info on args and params, see www.mitya.co.uk/scripts 
  9. =============================== */  
  10.   
  11. jQuery.fn.sortTable = function(params) {  
  12.   
  13.     /*----------- 
  14.     | STOP right now if anim already in progress 
  15.     -----------*/  
  16.     if ($(this).find(':animated').length > 0) return;  
  17.       
  18.     /*----------- 
  19.     | VALIDATE TABLE & PARAMS 
  20.     |   - if no col to sort on passed, complain and return 
  21.     |   - if table doesn't contain requested col, complain and return 
  22.     | If !sortType or invalid sortType, assume ascii sort 
  23.     -----------*/  
  24.       
  25.     var error = null;  
  26.     var complain = null;  
  27.     if (!params.onCol) { error = "No column specified to search on"; complain = true; }  
  28.     else if ($(this).find('td:nth-child('+params.onCol+')').length == 0) { error = "The requested column wasn't found in the table"; complain = true; }  
  29.     if (error) { if (complain) alert(error); return; }  
  30.     if (!params.sortType || params.sortType != 'numeric') params.sortType = 'ascii';  
  31.   
  32.     /*----------- 
  33.     | PREP 
  34.     |   - declare array to store the contents of each <td>, or, if sorting on regexp, the pattern match of the regexp in each <td> 
  35.     |   - Give the <table> position: relative to aid animation 
  36.     |   - Mark the col we're sorting on with an identifier class 
  37.     -----------*/  
  38.       
  39.     var valuesToSort = [];  
  40.     $(this).css('position', 'relative');  
  41.     var doneAnimating = 0;  
  42.     var tdSelectorText = 'td'+(!params.onCol ? '' : ':nth-child('+params.onCol+')');  
  43.     $(this).find('td:nth-child('+params.onCol+')').addClass('sortOnThisCol');  
  44.     var thiss = this;  
  45.   
  46.     /*----------- 
  47.     | Iterate over table and. For each: 
  48.     |   - append its content / regexp match (see above) to valuesToSort[] 
  49.     |   - create a new <div>, give it position: absolute and copy over the <td>'s content into it 
  50.     |   - fix the <td>'s width/height to its offset width/height so that, when we remove its html, it won't change shape 
  51.     |   - clear the <td>'s content 
  52.     |   - clear the <td>'s content 
  53.     | There is no visual effect in this. But it means each <td>'s content is now 'animatable', since it's position: absolute. 
  54.     -----------*/     
  55.       
  56.     var counter = 0;  
  57.     $(this).find('td').each(function() {  
  58.         if ($(this).is('.sortOnThisCol') || (!params.onCol && !params.keepRelationships)) {  
  59.             var valForSort = !params.child ? $(this).text() : (params.child != 'input' ? $(this).find(params.child).text() : $(this).find(params.child).val());  
  60.             if (params.regexp) {  
  61.                 valForSort = valForSort.match(new RegExp(params.regexp))[!params.regexpIndex ? 0 : params.regexpIndex];  
  62.             }  
  63.             valuesToSort.push(valForSort);  
  64.         }  
  65.         var thisTDHTMLHolder = document.createElement('div');  
  66.         with($(thisTDHTMLHolder)) {  
  67.             html($(this).html());  
  68.             if (params.child && params.child == 'input') html(html().replace(/<input /, "<input value='"+$(this).find(params.child).val()+"'", html()));  
  69.             css({position: 'relative', left: 0, top: 0});  
  70.         }  
  71.         $(this).html('');  
  72.         $(this).append(thisTDHTMLHolder);  
  73.         counter++;  
  74.     });  
  75.       
  76.       
  77.     /*----------- 
  78.     | Sort values array. 
  79.     |   - Sort (either simply, on ascii, or numeric if sortNumeric == true) 
  80.     |   - If descending == true, reverse after sort 
  81.     -----------*/  
  82.     params.sortType == 'numeric' ? valuesToSort.sort(function(a, b) { return (a.replace(/[^/d/.]/g, '', a)-b.replace(/[^/d/.]/g, '', b)); }) : valuesToSort.sort();  
  83.     if (params.sortDesc) {  
  84.         valuesToSort_tempCopy = [];  
  85.         for(var u=valuesToSort.length; u--; u>=0) valuesToSort_tempCopy.push(valuesToSort[u]);  
  86.         valuesToSort = valuesToSort_tempCopy;  
  87.         delete(valuesToSort_tempCopy)  
  88.     }  
  89.       
  90.       
  91.     /*----------- 
  92.     | Now, for each: 
  93.     -----------*/  
  94.       
  95.     for(var k in valuesToSort) {  
  96.           
  97.         //establish current <td> relating to this value of the array  
  98.         var currTD = $($(this).find(tdSelectorText).filter(function() {  
  99.             return (  
  100.                 (  
  101.                     !params.regexp  
  102.                     &&  
  103.                     (  
  104.                         (  
  105.                             params.child  
  106.                             &&  
  107.                             (  
  108.                                 (  
  109.                                     params.child != 'input'  
  110.                                     &&  
  111.                                     valuesToSort[k] == $(this).find(params.child).text()  
  112.                                 )  
  113.                                 ||  
  114.                                 params.child == 'input'  
  115.                                 &&  
  116.                                 valuesToSort[k] == $(this).find(params.child).val()  
  117.                             )  
  118.                         )  
  119.                         ||  
  120.                         (  
  121.                             !params.child  
  122.                             &&  
  123.                             valuesToSort[k] == $(this).children('div').html()  
  124.                         )  
  125.                     )  
  126.                 )  
  127.                 ||  
  128.                 (  
  129.                     params.regexp  
  130.                     &&  
  131.                     $(this).children('div').html().match(new RegExp(params.regexp))[!params.regexpIndex ? 0 : params.regexpIndex] == valuesToSort[k]  
  132.                 )  
  133.             )  
  134.             &&  
  135.             !$(this).hasClass('tableSort_TDRepopulated');  
  136.         }).get(0));  
  137.           
  138.         //give current <td> a class to mark it as having been used, so we don't get confused with duplicate values  
  139.         currTD.addClass('tableSort_TDRepopulated');  
  140.           
  141.         //establish target <td> for this value and store as a node reference on this <td>  
  142.         var targetTD = $($(this).find(tdSelectorText).get(k));  
  143.         currTD.get(0).toTD = targetTD;  
  144.           
  145.         //if we're sorting on a particular column and maintaining relationships, also give the other <td>s in rows a node reference  
  146.         //denoting ITS target, so they move with their lead siibling  
  147.         if (params.keepRelationships) {  
  148.             var counter = 0;  
  149.             $(currTD).parent().children('td').each(function() {  
  150.                 $(this).get(0).toTD = $(targetTD.parent().children().get(counter));  
  151.                 counter++;  
  152.             });  
  153.         }  
  154.           
  155.         //establish current relative positions for the current and target <td>s and use this to calculate how far each <div> needs to move  
  156.         var currPos = currTD.position();  
  157.         var targetPos = targetTD.position();  
  158.         var moveBy_top = targetPos.top - currPos.top;  
  159.           
  160.         //invert values if going backwards/upwards  
  161.         if (targetPos.top > currPos.top) moveBy_top = Math.abs(moveBy_top);  
  162.           
  163.         /*----------- 
  164.         | ANIMATE 
  165.         |   - work out what to animate on. 
  166.         |       - if !keepRelationships, animate only <td>s in the col we're sorting on (identified by .sortOnThisCol) 
  167.         |       - if keepRelationships, animate all cols but <td>s that aren't .sortOnThisCol follow lead sibiling with .sortOnThisCol 
  168.         |   - run animation. On callback, update each <td> with content of <div> that just moved into it and remove <div>s 
  169.         |   - If noAnim, we'll still run aniamte() but give it a low duration so it appears instant 
  170.         -----------*/         
  171.           
  172.         var animateOn = params.keepRelationships ? currTD.add(currTD.siblings()) : currTD;  
  173.         var done = 0;  
  174.         animateOn.children('div').animate({top: moveBy_top}, !params.noAnim ? 500 : 0, null, function() {  
  175.             if ($(this).parent().is('.sortOnThisCol') || !params.keepRelationships) {  
  176.                 done++;  
  177.                 if (done == valuesToSort.length-1) thiss.tableSort_cleanUp();  
  178.             }  
  179.         });  
  180.           
  181.     }  
  182.           
  183. };  
  184.   
  185. jQuery.fn.tableSort_cleanUp = function() {  
  186.     /*----------- 
  187.     | AFTER ANIM 
  188.     |   - assign each <td> its new content as property of it (DON'T populate it yet - this <td> may still need to be read by 
  189.     |     other <td>s' toTD node references 
  190.     |   - once new contents for each <td> gathered, populate 
  191.     |   - remove some identifier classes and properties 
  192.     -----------*/  
  193.     $(this).find('td').each(function() {  
  194.         if($(this).get(0).toTD) $($(this).get(0).toTD).get(0).newHTML = $(this).children('div').html();  
  195.     });  
  196.     $(this).find('td').each(function() { $(this).html($(this).get(0).newHTML); });  
  197.     $('td.tableSort_TDRepopulated').removeClass('tableSort_TDRepopulated');  
  198.     $(this).find('.sortOnThisCol').removeClass('sortOnThisCol');  
  199.     $(this).find('td[newHTML]').attr('newHTML', '');  
  200.     $(this).find('td[toTD]').attr('toTD', '');  
  201.       
  202. };  

WSM6591289
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
对Table进行排序 (可指定排序方式)
横行青海夜带刀
12-09 1976
在日常的WEB开发中，对表格的排序经常会用到，于是在网上找了些资料，然后自己下来研究了下，做了一些整理，现在将他贴出来，一来备忘，二来可以帮助其他需要的人。   需要注意的地方： 关于table中按行按列排序的方法： 1. 取出每一行作为排序的单元，结果即为完整的正确的排序。 2. 每一行中有一个关键字用于排序的标准 2.1 每一个关键字都有类型的区别，如string, int, date,...
table的td整列拖动交换以及重新排列位置
06-02
本javascript软件主要功能是任意拖动html的table的td来整行交换位置。
table表的排序
googol的专栏
02-14 780
html>    head>  title>表格排序title>    script language="javascript">...     var beginMoving = false;     function MouseDownToMove (obj)   ...{       obj.style.zIndex = 1;       obj.mouseDownY = event.c
Jquery对Table表格排序(方法一)
hello world！
09-03 8941
&lt;html&gt; &lt;title&gt;table简单实例&lt;/title&gt; &lt;script type="text/javascript" src="jquery-1.7.min.js"&gt;&lt;/script&gt; &lt;style type="text/css"&gt;      div         {  
php table字段排序,jquery实现table排序功能实例分享
weixin_28745525的博客
03-24 140
本文主要介绍了jquery实现的table排序功能,涉及基于jQuery的页面元素属性动态操作及鼠标事件响应相关技巧,需要的朋友可以参考下，希望能帮助到大家。Documentp{width: 1024px;margin: 0 auto; /*p相对屏幕左右居中*/}table{border: solid 1px #666;border-collapse: collapse;width: 100%;...
javascript实现Table排序的方法
10-24
主要介绍了javascript实现Table排序的方法,涉及javascript针对表格对象的获取与排序相关技巧,需要的朋友可以参考下
jquery实现的table排序功能示例
10-20
在本示例中，我们将探讨如何使用jQuery实现表格（table）的排序功能。这个功能涉及到对HTML元素的操作、鼠标事件监听以及数据的动态处理。首先，我们来看一下HTML结构，这里使用了一个基本的表格布局： ```html <!...
table 排序
07-28
本文将深入探讨“table排序”的相关知识点，包括其原理、实现方式以及在不同场景下的应用。 首先，我们要理解什么是表格排序。在计算机科学中，表格（Table）是一种组织和展示数据的有效方式，而排序则是按照特定的...
jquery实现table tr td重组排序号
ASP.NET
09-14 2068
//自动重组排序号 function RowIndexInitialize(obj) { var index = 1; obj.children("tr:gt(1):not(:last-child)").each(function(i) { $(this).find("td:eq(0)").html(index++); }); } //自动重组排序号使用演
JavaScript实现表格排序方法
转角遇到她的专栏
08-04 835
JavaScript实现表格排序方法，需要的朋友可以参考一下。 效果如下图所示： 参考代码： JavaScript控制网页内表格排序_www.jbxue.com *{font-family:Arial, Helvetica, sans-serif;font-size:14px;border:none;} body{text-align:center;} table{
HTML中的table里面的元素排序
yangxin_blog的专栏
10-14 1万+
我们在上网中都能看到很多能够排序的，如大小，时间等 现在我们也试一下排序功能： 排序的函数代码：里面含有点击之后排序--还原，和排升序和降序 function sortAge(){ //对年龄进行排序，要先进行获得每一行对象，然后对象对象中的第一个（从0 开始）的大小进行排序 var tabNode = document.getElementById("tabid");
lua之table.sort使用
猪会飞
12-08 8192
刚看了项目里面的的一个小代码，发现table.sort还有这样使用的功能，第一次碰到，学习了在此记录下，说明了自己还是需要多看代码啊，才能提高自己。以前都知道table.sort()的第二个参数是可以传一个比较函数的，以用来比较嵌套table的某个key值排序。 简单来说需求就是这样的，举个例子test = {{k1=v1,k2=v2},{k1=v1,k2=v2},{k1=v1,k2=v2},{k
lua中的sort排序
热门推荐
zcl1804742527的博客
08-25 2万+
”’ lua中对table的排序一般是用lua自带的table.sort()函数排序，一般不采用自己写的排序的方式，以下来说一说table.sort()排序和在工作中遇到的问题 1.排序的方式 table.sort(tbl, function(a, b) return a > b end) 以上是一个简单的例子，得到的效果是对于待排序的数据的一个升序，你这样认为就是错了，例如a
JavaScript Table排序
weixin_33757609的博客
10-06 155
序二（09/05/03） 近来还是那么忙，趁五一更新一下程序吧。这个版本主要增加和改进了以下东西：1，对字符串改用localeCompare来比较；2，一次排序中能使用多个排序对象（用于值相等时再排序）；3，修正一些发现的问题；4，改进程序结构，个人觉得是更灵活更方便了；5，增加bool类型比较；6，添加attribute/property的内容；7，修正ie6/7的radio/checkbo...
vue table 排序
最新发布
04-03
Vue Table 可以使用 sort-by 属性来进行排序。sort-by 属性可以指定一个字段或一个方法来进行排序，同时可以使用 sort-desc 属性来指定排序的方向。 以下是一个 Vue Table 排序的例子： ```html <table> ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值