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

3、这里写图片描述
在这,我点击不同的不同的按钮,譬如,最开始在“组”这一栏,但是当我点击“小区”时,需要的只是小区的内容,而事实上它把组的内容也加载进来了,也就是没有对之前的内容进行清除,用一下代码可解决:

$("#表id").trigger("update");

如用了以上代码排序还是有问题,那需要看下你自己的代码,譬如本人在这用了以上代码排序还是出问题了,源码如下:

 success: function (result) {
           if(result.success){
               var listDeclaration = result.data;
               var str = "<tbody>";
               for(var index in listDeclaration){
                   str +=  "<tr>"+
                           "<td>"+(parseInt(index)+1)+"</td>"+
                           "<td>"+listDeclaration[index].orgName+"</td>"+
                           "<td>"+listDeclaration[index].totalOrderNum+"</td>"+
                           "<td>"+listDeclaration[index].totalOrderAmount+"</td>"+
                           "</tr>";
               }
               str += "</tbody>";
               $("#statisticsTab").append(str);
           }else{
}

也就是每次点“组”“小区”“大区”“运营”的时候都会重新加载数据,$("#表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);

以上这样就相当于每次它排序完,又把序号列重新按序列赋值了一遍。

注:因为在这进行排序的时候不是重新从数据库里面读出来的,所以这样操作,如果从数据库读出来的话其实直接取的时候在sql上进行order by就行了。

转载请注明原址:http://blog.csdn.net/zheng911209/article/details/47020501

  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值