jquery tablesorter表格排序插件的使用

1、引入两个js文件

jquery-2.1.1.min.js
jquery.tablesorter.js

2、在js写上 $(“#表id”).tablesorter();即可将表的所有字段进行排序

假设我不需要点击“序号”进行排序，使用如下方法：

$.tablesorter.defaults.headers = {0: {sorter: false}};

同理假设我不需要点击“序号”和“组别”进行排序，使用如下$.tablesorter.defaults.headers = {0: {sorter: false},1: {sorter: false}};我点击不同的不同的按钮，譬如，最开始在“组”这一栏，但是当我点击“小区”时，需要的只是小区的内容，而事实上它把组的内容也加载进来了，也就是没有对之前的内容进行清除，用一下代码可$("#表id").trigger("update");以上代码排序还是有问题，那需要看下你自己的代码，譬如本人在这用了以上代码排序还是出问题了，源码如下：

<script type="application/javascript">    $(function(){        $('table').tablesorter({            usNumberFormat : false,            sortReset      : true,            sortRestart    : true        });    });   $('table').tablesorter({headers:{0:{sorter:false},10:{sorter:false}}});    function lists() {        get(apistore.AD_CW, whereInfo, function (r) {            if (r.code == 0 && r.data.length > 0) {                var str = "";                var allscore = 0, awardtotal = 0, tx_awardleft = 0, gw_awardleft = 0,                    daily_cp = 0, daily_lp = 0, daily_jd = 0, daily_py = 0, zh_costaward = 0;                $.each(r.data, function (i, v) {                    var tempCostAward = Math.round((mFormat(v.tx_totalaward) - mFormat(v.tx_awardleft)) * 0.05 + mFormat(v.zh_costaward));                    allscore += mFormat(v.allscore);                    awardtotal += mFormat(v.awardtotal);                    tx_awardleft += mFormat(v.tx_awardleft);                    gw_awardleft += mFormat(v.gw_awardleft);                    daily_cp += mFormat(v.daily_cp);                    daily_lp += mFormat(v.daily_lp);                    daily_jd += mFormat(v.daily_jd);                    daily_py += mFormat(v.daily_py);                    zh_costaward += tempCostAward;                    str += "<tr>"                    str += "<td>" + v.team_name + "</td>";                    str += "<td>" + mFormat(v.allscore) + "</td>";                    str += "<td>" + mFormat(v.awardtotal) + "</td>";                    str += "<td>" + mFormat(v.tx_awardleft) + "</td>";                    str += "<td>" + mFormat(v.gw_awardleft) + "</td>";                    str += "<td>" + mFormat(v.daily_cp) + "</td>";                    str += "<td>" + mFormat(v.daily_lp) + "</td>";                    str += "<td>" + mFormat(v.daily_jd) + "</td>";                    str += "<td>" + mFormat(v.daily_py) + "</td>";                    str += "<td>" + tempCostAward + "</td>";                    str += "<td>" + "<a href=\"caiwu-list.html?uid=" + v.root_uid + "\">" + "详情" + "</a>" + "</td>";                    str += "</tr>"                });                $('#tbody').html(str);                $('#allscore').html(allscore);                $('#awardtotal').html(awardtotal);                $('#tx_awardleft').html(tx_awardleft);                $('#gw_awardleft').html(gw_awardleft);                $('#daily_cp').html(daily_cp);                $('#daily_lp').html(daily_lp);                $('#daily_jd').html(daily_jd);                $('#daily_py').html(daily_py);                $('#zh_costaward').html(zh_costaward);                $("#resTable").trigger("update"); //必加            } else {                isLoadAll = 1;            }        });    }

也就是每次点“组”“小区”“大区”“运营”的时候都会重新加载数据，$("#表id").trigger("update");代码把我当前table里面的tr里的内容去掉了，但并没有把我的tbody去掉，所以你需要每次加载内容前把tbody remove（）掉。（当然tr里的内容你也可以不用$(“#表id”).trigger(“update”);自己写行代码也是能够清除的）

4、进行排序的时候，“序号”这一列是不需要变动的，始终需要它是1234……这样的序列，看了一遍jquery.tablesorter.js没找到相应的方法解决这个问题，就自己写了一个，js代码如下：

function setIndex(){        var index = 0        $('#statisticsTab tr').find('td:first').each(function () {            if ($(this).index() == 0) { // 如果当前是第一列                $(this).text(++index)            }        });}

在jquery.tablesorter.js文件中的 function appendToTable(table,cache)方法中的最后调用setIndex();：

// trigger sortend            setTimeout(function() {                setIndex();                $(table).trigger("sortEnd");            },0);

效果图如下：