得用jquery对table的tr重新排序

借助于强大的jquery库,通过一些简单的js代码来实现对table数据列进行排序。排序是通过调整table的tr的顺序重新显示,全部在客户端上完成,不需要和服务器交互,因此减轻了服务器的压力。查看Demo请猛点这里。

实现排序的js代码如下:

 代码如下 复制代码
function tableSort(jqTableObj) {
    jqTableObj.find('thead th').click(
        function(){
            var dataType = $(this).attr('dataType') || 'text';
            var index = jqTableObj.find('thead th').index(this) + 1;
            var arr = [];
            var row = jqTableObj.find('tbody tr');

            $.each(row, function(i){arr[i] = row[i]});

            if($(this).hasClass('current')){
                arr.reverse();
            } else {
                arr.sort(Utils.sortStr(index, dataType))

                jqTableObj.find('thead th').removeClass('current');
                $(this).addClass('current');
            }

            var fragment = document.createDocumentFragment();

            $.each(arr, function(i){
                fragment.appendChild(arr[i]);
            });

            jqTableObj.find('tbody').append(fragment);
        }
    );   

    var Utils = (function() {
        function sortStr(index, dataType){
            return function(a, b){
                var aText=$(a).find('td:nth-child(' + index + ')').attr('_order') || $(a).find('td:nth-child(' + index + ')').text();
                var bText=$(b).find('td:nth-child(' + index + ')').attr('_order') || $(b).find('td:nth-child(' + index + ')').text();

                if(dataType != 'text'){
                    aText=parseNonText(aText, dataType);
                    bText=parseNonText(bText, dataType);

                    return aText > bText ? -1 : bText > aText ? 1 : 0;
                } else {
                    return aText.localeCompare(bText)
                }
            }
        }

        function parseNonText(data, dataType){
            switch(dataType){
                case 'int':
                    return parseInt(data) || 0
                case 'float':
                    return parseFloat(data) || 0
                default :
                return filterStr(data)
            }
        }

        //过滤中文字符和$
        function filterStr(data){
            if (!data) {
                return 0;
            }

            return parseFloat(data.replace(/^[\$a-zA-z\u4e00-\u9fa5 ]*(.*?)[a-zA-z\u4e00-\u9fa5 ]*$/,'$1'));
        }

        return {'sortStr' : sortStr};
    })();
}

要想让上面的代码工作,需要在原有的table中注意几点。
1、表头的tr其父元素为thead,另外表头列使用th,同时要使用dataType属性名来标示数据的类型,类型可以为text(默认),int和float;
2、显示table数据的tr父元素为tbody,显示数据的列用td,可以使用_order属性指定该字段的真实值。

table 示例如下:

 代码如下 复制代码
<table>
  <thead>
    <tr>
      <th datatype="int">ID</th>
      <th datatype="text">Username</th>
      <th datatype="float" class="current">Revenue</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1032</td>
      <td>Zhang</td>
      <td _order="127579">$ 127,579.00</td>
    </tr>
    <tr>
      <td>1074</td>
      <td>gm1</td>
      <td _order="37331">$ 37,331.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="2">Summary</th>
      <th>$ 164,910.00
    </tr>
  </tfoot>
</table>
时间: 2024-10-30 08:50:03

得用jquery对table的tr重新排序的相关文章

jquery遍历table的tr获取td的值实现方法_jquery

html代码: <tbody id="history_income_list"> <tr> <td align="center"><input type="text" class="input-s input-w input-hs"></td> <td align="center"><input type="text&q

js实现table添加行tr、删除行tr、清空行tr的简单实例_javascript技巧

如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author"

jQuery实现table中的tr上下移动并保持序号不变的实例代码_jquery

jQueryMoveTr.html 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>jQuery-bhang</TITLE> <script type="text/javascript" src="jquery-1.6.2.js"></sc

jQuery遍历Table应用示例

 这篇文章主要介绍了jQuery遍历Table的具体实现,需要的朋友可以参考下  代码如下: function checkwo(){  var vales = "";  $("#vales").val(vales);  var flag = false;  var bo = true;  $("#data_table").find("tr").each(function(){  $(this).find("td in

js-如何用JavaScript操作table中tr中td的值?

问题描述 如何用JavaScript操作table中tr中td的值? 如何用JavaScript操作table中tr中td的值? 如何用JavaScript操作table中tr中td的值? 如何用JavaScript操作table中tr中td的值? 解决方案 <html> <head> <title> 修改td中的值 </title> </head> <body> <table id="myTable" wi

jquery调整表格行tr上下顺序实例讲解_jquery

表格是大家比较常用的元素,有时候表格中的行需要调整顺序,下面就通过代码实例介绍一下如何利用jquery实现此功能,分享给大家供大家参考,具体内容如下 代码实例如下: <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</t

jQuery操作table表格问题

问题描述 jQuery操作table表格问题 动态生成table里的tr和td标签,每一tr后面都有"删除""修改""提交",其中"删除""修改""提交"是用三个span标签放在这一行里的一个td标签里,并且为"删除""修改""提交"动态生成了onclick事件,我想实现点击修改时提取到当前tr标签里所有的td标签里的text文

jQuery操作Table的几个问题?

问题描述 项目中要用JavaScript动态地给一个Table增删行,做小实验时几个问题记录了下来. 请帮看看:1, 如何用jquery得到table的行数?2, 如何用jQuery给指定行newRow的第一个cell赋值,在这里也就是写序号?在附件中,以这个问题的场景. 谢谢先! 解决方案 $("table tbody tr").length就是行数$("table tbody tr").each(function(i,n){ var firstCell = $(

jquery获取table指定行和列的数据方法(当前选中行、列)_jquery

实例如下: //不多说,直接上代码. $("table tr").click(function() {//为表格的行添加点击事件 var tr = $(this);//找到tr原色 var td = tr.find("td");//找到td元素 alert(td[0].innerHTML);//指定下标即可 }) 今日项目中需要用到取table选中列的数据,网上资料发现都不能获取到选中指定列的数据,通过分析测试后总结出以上代码,可以获取选中行/列的数据.取td的数据