简单的js表格排序 (归总)

最新推荐文章于 2023-12-02 19:56:31 发布
最新推荐文章于 2023-12-02 19:56:31 发布
阅读量470 收藏
点赞数
分类专栏： javascript
1.简单的js 排序
  <html>
     <head>
         <title>SortTable2</title>
         <meta http-equiv="content-type" content="text/html; charset=UTF-8">
         <script type="text/javascript">
var k=0;

         function sortTable(sTableId,iCol,sDataType){
             var oTable=document.getElementByIdx(sTableId);//获取表格的ID
             var oTbody=oTable.tBodies[0]; //获取表格的tbody
             var colDataRows=oTbody.rows; //获取tbody里的所有行的引用
             var aTRs=new Array(); //定义aTRs数组用于存放tbody里的行
             for(var i=0;i<colDataRows.length;i++){//依次把所有行放如aTRs数组
               aTRs.push(colDataRows[i]);
             }
             
             if(oTable.sortCol==iCol){//非首次排序
             aTRs.reverse();
             }
             else{ //首次排序
             if(k%2==0){//升序
             aTRs.sort(generateCompareTRs(iCol,sDataType));
}
             else if(k%2==1)//降序
             {
aTRs.sort(generateCompareTRs1(iCol,sDataType));
}
             }
                     
             var oFragment=document.createDocumentFragment();//创建文档碎片/
             for(var i=0;i<aTRs.length;i++){ //把排序过的aTRs数组成员依次添加到文档碎片
             oFragment.appendChild(aTRs[i]);
             }
           oTbody.appendChild(oFragment); //把文档碎片添加到tbody,完成排序后的显示更新
             oTable.sortCol=iCol;//把当前列号赋值给sortCol,以此来区分首次排序和非首次排序,//sortCol的默认值为-1
         };
             //比较函数，用于两项之间的排序
//升序
         function generateCompareTRs(iCol,sDataType){
             return     function compareTRs(oTR1,oTR2){
                                   var vValue1=convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType);
                                   var vValue2=convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType);
                                   if(vValue1<vValue2){
                                   return -1;
                                   }
                                   else if(vValue1>vValue2){
                                   return 1;
                                   }
                                   else{
                                   return 0;
                                   }
                               };
         };
//
//降序
         function generateCompareTRs1(iCol,sDataType){
             return     function compareTRs(oTR1,oTR2){
                                   var vValue1=convert(oTR1.cells[iCol].firstChild.nodeValue,sDataType);
                                   var vValue2=convert(oTR2.cells[iCol].firstChild.nodeValue,sDataType);
                                   if(vValue1>vValue2){
                                   return -1;
                                   }
                                   else if(vValue1<vValue2){
                                   return 1;
                                   }
                                   else{
                                   return 0;
                                   }
                               };
         };
//
           //数据类型转换函数
         function convert(sValue,sDataType){
         switch(sDataType){
                 case "int":return parseInt(sValue);
                 case "float": return parseFloat(sValue);
                 case "date":return new Date(Date.parse(sValue));
                 default:return sValue.toString();
               }
         };
         </script>
     </head>
     <body>
         <form name="f1" id="f1" action="" method="post">
         <table border="1" id="tblSort" sortCol="-1">
               <thead>
                   <tr>
                     <th onClick="sortTable('tblSort',0);" style="cursor:pointer">Last Name</th>
                     <th onClick="sortTable('tblSort',1)" style="cursor:pointer">First Name</th>
                     <th onClick="sortTable('tblSort',2,'date')" style="cursor:pointer">Birthday</th>
                     <th onClick="sortTable('tblSort',3,'int')" style="cursor:pointer">Silbings</th>
                   </tr>
               </thead>
               <tbody>
                   <tr>
                       <td>Simth</td>
                       <td>John</td>
                       <td>7/12/1978</td>
                       <td>2</td>
                   </tr>
                   <tr>
                       <td>Johnson</td>
                       <td>Betty</td>
                       <td>5/12/1965</td>
                       <td>5</td>
                   </tr>
                   <tr>
                       <td>Henderson</td>
                       <td>Nathan</td>
                       <td>10/15/1977</td>
                       <td>3</td>
                   </tr>
                   <tr>
                       <td>Willianms</td>
                       <td>James</td>
                       <td>2/25/1949</td>
                       <td>1</td>
                   </tr>
                   <tr>
                       <td>Gilliam</td>
                       <td>Michael</td>
                       <td>7/8/1980</td>
                       <td>4</td>
                   </tr>
                   <tr>
                       <td>Walker</td>
                       <td>Matthew</td>
                       <td>6/18/1981</td>
                       <td>3</td>
                   </tr>
               </tbody>       
         </table>
       </form>
     </body>
</html>
   
 
2.介绍一个免费版本且模块话的  (但时间排序为按月排序且忽略年份,需要修改源码)
 
 
另外介绍 

1. sortabe.js 最简单的，我现在试用的就是这个，加载JS后给TABLE加上class=”sortable”就OK了，点击<th>相应栏目就可以排序~~

类似与这个js类库 还有一个说明文档,操作一样,都是添加TABLE加上class=”sortable"

(http://www.kryogenix.org/code/browser/sorttable/)

<html> 
    <head> 
    <title>Table Sort Example</title> 
        <script src="sorttable.js" type="text/javascript"></script>
 
    </head> 
    <body>         
    <table class="sortable" id="mytable" cellspacing="3" cellpadding="0" width="481" border="1">
        <tbody>
            <tr>
                <th width="165">Name</th>
                <th width="101">Salary</th>
                <th align="center" width="101">Extension</th>
                <th align="center" width="99">Start date</th>
            </tr>
            <tr>
                <td>Bloggs, Fred</td>
                <td>$12000.00</td>
                <td align="center">1353</td>
                <td align="center">18/08/2003</td>
            </tr>
            <tr>
                <td>Turvey, Kevin</td>
                <td>$191200.00</td>
                <td align="center">2342</td>
                <td align="center">02/05/1979</td>
            </tr>
            <tr>
                <td>Mbogo, Arnold</td>
                <td>$32010.12</td>
                <td align="center">2755</td>
                <td align="center">09/08/1998</td>
            </tr>
            <tr>
                <td>Shakespeare, Bill</td>
                <td>$122000.00</td>
                <td align="center">3211</td>
                <td align="center">12/11/1961</td>
            </tr>
            <tr>
                <td>Shakespeare, Hamnet</td>
                <td>$9000</td>
                <td align="center">9005</td>
                <td align="center">01/01/2002</td>
            </tr>
            <tr>
                <td>Fitz, Marvin</td>
                <td>$3300</td>
                <td align="center">5554</td>
                <td align="center">22/05/1995</td>
            </tr>
        </tbody>
    </table>  
    </body> 
</html>

 

 

2. DrasticGrid AJAX应用，与MySQL结合可以实现分页、排序、编辑以及增删功能，太强大了，图里可以看到滚动条的分页效果

sort2.jpg

3. Ingrid 这个是Jquery的应用，样子我最喜欢的了，而且列宽可以拖动调节，分页及排序都有LOADING效果的sort3.jpg

4. Tablesorter 同样是Jquery应用，样子不错，还可以设置初始排序条件sort6.jpg

5. TableSorter Jquery应用，可以在JS调用里做出各种样式设置，作者写的很具体sort5.jpg

6. Table Sorting Jquery应用，可以对N个TBODY分别排序，可分页，可根据条件筛选显示内容，数据量大时，比其他相同应用速度要快，这个是作者说滴，还给了个500行的例子sort4.jpg

7. TableSort (revisited) 功能好~强大，作者的说明页面好~长，请细心查看~sort7.jpg

表格排序有好多好多方法啊，MOO啊PROTO啊YUI啊一堆一堆的，不过我暂时还只能看看Jquery相关，已经眼花了都。。。
虽然现在试用第一种，不过还是第三个最中意，说不定换换玩~~

kinmin2012
关注
专栏目录
[JS真好玩] 表格不支持排序？用4行JS排序！两种方案：基于flex order或replaceChildren
Hull Qin
08-23 1842
有的表格不支持按某列排序，我提出了2个方法，使用JS修改Dom实现排序：基于flex order样式、基于Element.replaceChildren()这个API，分别只需7行和4行代码。
JavaScript实现表格的排序
Just The Way You Are
08-06 1744
利用JS实现表格排序，依赖于JS数组中Array对象的sort方法 首先介绍一下sort()方法： 1.定义和用法： sort()方法用于对数组元素的排序 2.语法： arrayObject.sort(sortRule); 3.参数： sortRule ：可选。规定排序顺序。必须是函数。 4.返回值： 对数组的引用。数组在原数组上进行排序，不生成副本。 5.说明： 如果调用该
jsp+js实现可排序表格
05-27
NULL 博文链接：https://fxz-2008.iteye.com/blog/545012
JS表格排序
Nty268的博客
04-15 1162
//查找表格的<th>元素，让它们可单击 function makeSortable(table) { //var headers = document.getElementsByTagName("th"); //全页面table排序 var headers = table.getElementsByTagName("th"); //选定table排序 // console.log(headers); for (var i = 1; i < headers.l
js实现对table数据列排序
lijunling2008live的专栏
04-26 763
借助于强大的jquery库，js代码来实现对table数据列进行排序
各种排序的java代码归总
10-26
以下是对标题“各种排序的java代码归总”及描述中提到的排序算法的详细解析： 1. **冒泡排序（Bubble Sort）**： 冒泡排序是一种简单的排序算法，通过不断交换相邻的逆序元素来逐步排序。其主要步骤包括比较和交换...
小学数学归一归总问题PPT课件.pptx
10-12
小学数学中的归一问题和归总问题是一种常见的应用题型，主要目的是训练孩子们对数量关系的理解和实际问题的解决能力。 归一问题的核心在于找到一个单一量，即单位量，以此为基准来解决复杂的问题。例如，如果知道买...
计算机自测题归总.doc
04-21
计算机自测题归总.doc
计算机自测题归总.docx
04-21
### 计算机发展历程与分类知识点总结 #### 一、计算机的发展历程 1. **第一代计算机（1946-1955）** - **构成元件**：电子管 - **特点**：体积庞大、耗电量高、性能较低 - **代表机型**：ENIAC（埃克特-莫奇莱...
WinDBG命令归总
04-11
WinDBG，全称为Windows Debugger，是一款强大的调试工具，主要用于对Windows操作系统进行系统级的调试，包括内核模式和用户模式的调试。它包含了丰富的命令集，可以帮助开发者、系统管理员和安全专家深入理解程序...
js对表格进行排序
03-28
利用纯js对表格进行排序,动态扩展性能好.并且可按照字符串,日期,图片,数字排序.
tablesorter.js表格排序使用方法(支持中文排序)
12-02
最近，因为项目需要，对表格排序做了一下摸索，整理如下： 1. 首先，可从官网下载tablesorter.js，但并不支持中文的排序，对其源码进行修改： 部分源码： function sortText(a, b) { return ((a < b> b) ? 1 : 0)); }; function sortTextDesc(a, b) { return ((b < a> a) ? 1 : 0)); }; 修改后： function sortText(a,b) { return a.localeCompare(b); }; f
JS 做的表格数据排序。。。。。。
08-29
JS 做的表格数据排序。。。。。。很好用的。容易上手。
JS写出表格排序的功能
weixin_57534872的博客
07-15 597
JS表格的排序按钮样式同步问题
JS中对表格排序
helanye的专栏
07-21 1265
本文所实现的表格排序大致可以分为以下几个步骤：    1、取得要排序的所有行，将其引用push到一个数组中    2、根据要排序的行的情况编写数组排序时使用的比较函数    3、对包含所有行引用的数组进行排序    4、将排序后的数组按照指定的顺序把数组所引用的行重新写回DOM   如果您对使用DOM操作表格还不太熟悉，您可以参考一下《使用DOM编写浏览器兼容的Table操作》,如果您对数组的
js 表格排序
最新发布
一个爱分享的码农，希望和大家互相交流、学习、进步、奔小康
12-02 420
【代码】js 表格排序。
JS实现表格排序
热门推荐
Java技术与你分享
11-30 1万+
今天有点闲，写个小东西，使用JS实现点击表格标题栏实现自动排序功能，嘻嘻... 一、JS代码，文件名为code.js如下： (function($){ //插件 $.extend($,{ //命名空间 sortTable:{ sort:function(tableId,Idx){ var table = document.getElementById(tableId)
js表格排序
wanghuailong的专栏
12-25 1134
SortTable2var k=0;/**//**************************************************************************排序的主方法，有三个形参，STableTd,iCol,sDataType分别为需要排序的表格ID，需要排序的表格列号，所在列的数据类型（支持int,float,date,string四种数据类型)*****
Eclipse使用技巧：Tab设置与编码转换
"eclipse 使用技巧归总" 在使用 Eclipse 这款强大的集成开发环境时，掌握一些实用的技巧可以显著提升开发效率。以下是一些关键的设置和操作方法： 1. **设置制表符和缩进**：在 `Preferences` > `General` > `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值