jquery tablesorter表格排序插件的使用

这篇博客介绍了如何使用jquery tablesorter插件对表格进行排序。首先需要引入jquery-2.1.1.min.js和jquery.tablesorter.js两个JS文件。通过`$("#表id").tablesorter();`可以实现所有字段的排序。如果要排除特定列(如“序号”和“组别”)的排序,博主提供了解决方案。在点击不同按钮切换排序列时,需要注意清除之前的内容。对于“序号”列保持不变的需求,博主发现原插件未提供直接方法,于是自行编写了代码并在`appendToTable`函数中调用`setIndex()`来实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  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;
            }
        });
    }

也就是每次点“组”“小区”“大区”“运营”的时候都会重新加载数据,KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲表id").trigger("…(“#表id”).trigger(“update”);自己写行代码也是能够清除的)

  1. 进行排序的时候,“序号”这一列是不需要变动的,始终需要它是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);

效果图如下:
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值