如何忽略表排序器中具有特定类名的th?

发布于 2024-11-01 16:40:22 字数 1704 浏览 2 评论 0原文

我使用 tablesorter 对表进行排序,但不是对所有列进行排序,我想忽略具有定义的类名的特定列,例如:

<table class="basicList" cellpadding="0" cellspacing="0"> 
                    <thead> 
                        <tr> 
                            <th class="ck_field"><input type="checkbox" id="check_all" name="check_all" /></th>
                            <th class="col_filter"><a href="#" class="btn_filter">&nbsp;</a></th>
                            <th>Name <span class="sort_indicator">&nbsp;</span></th> 
                        </tr> 
                        <tr class="filter_row"> 
                            <td>&nbsp;</td>
                            <td>&nbsp;</td>
                            <td> <input type="text" id="the_name" name="name" class="filter_field"/></td> 
                        </tr>  
                    </thead>
                </table>

在本例中,我不想对前两列进行排序。

我尝试过:

$(document).ready(function() {

    console.log($(".basicList .col_filter").index());
    console.log($(".basicList .ck_field").index());

    var ck_ignore = $(".basicList .ck_field").index();
    var filter_ignore = $(".basicList .col_filter").index();

    $(".basicList").tablesorter({ widgets: ['zebra'],headers: { 
            //disable the first checkbox cell            
            $ck_ignore: {                
                sorter: false 
            },
            $filter_ignore : {                
                sorter: false 
            }
        }  
    });

哪个不起作用,如何解决这个问题?

I use the tablesorter to sort the table, but not all columns, I want to ignore the specific column with the defined class name, eg:

<table class="basicList" cellpadding="0" cellspacing="0"> 
                    <thead> 
                        <tr> 
                            <th class="ck_field"><input type="checkbox" id="check_all" name="check_all" /></th>
                            <th class="col_filter"><a href="#" class="btn_filter"> </a></th>
                            <th>Name <span class="sort_indicator"> </span></th> 
                        </tr> 
                        <tr class="filter_row"> 
                            <td> </td>
                            <td> </td>
                            <td> <input type="text" id="the_name" name="name" class="filter_field"/></td> 
                        </tr>  
                    </thead>
                </table>

In this example, I don't want to sort the first two columns.

And I tried:

$(document).ready(function() {

    console.log($(".basicList .col_filter").index());
    console.log($(".basicList .ck_field").index());

    var ck_ignore = $(".basicList .ck_field").index();
    var filter_ignore = $(".basicList .col_filter").index();

    $(".basicList").tablesorter({ widgets: ['zebra'],headers: { 
            //disable the first checkbox cell            
            $ck_ignore: {                
                sorter: false 
            },
            $filter_ignore : {                
                sorter: false 
            }
        }  
    });

Which doesn't work, how to solve this problem?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

好久不见√ 2024-11-08 16:40:22

像这样使用它:

var myHeaders = {};
myHeaders[ck_ignore] = { sorter: false };
myHeaders[filter_ignore] = { sorter: false };

$(".basicList").tablesorter({ widgets: ['zebra'], headers: myHeaders });

注意:如果您有更多包含这些类的列,则它仅适用于第一次出现。

Use it like this:

var myHeaders = {};
myHeaders[ck_ignore] = { sorter: false };
myHeaders[filter_ignore] = { sorter: false };

$(".basicList").tablesorter({ widgets: ['zebra'], headers: myHeaders });

Note: if you have more columns with these classes, it will work only for the first occurences.

赠意 2024-11-08 16:40:22

根据 文档,您现在可以使用 class =“排序器-假”

As per the documentation, you can now use class="sorter-false"

夏尔 2024-11-08 16:40:22

遇到了同样的问题,这就是我想到的。假设您的不排序类称为 nosort:

function setupTablesorter() {
    $('table.tablesorter').each(function (i, e) {
        var myHeaders = {}
        $(this).find('th.nosort').each(function (i, e) {
            myHeaders[$(this).index()] = { sorter: false };
        });

        $(this).tablesorter({ widgets: ['zebra'], headers: myHeaders });
    });    
}

这比我在这里看到的其他答案有一些优点。首先,即使您有多个不可排序的列,它也能正常工作。其次,如果同一页面上有多个表,每个表都有不同的可排序列,它仍然有效。

Ran into the same problem, and here's what I came up with. Assuming your th class for not sorting is called nosort:

function setupTablesorter() {
    $('table.tablesorter').each(function (i, e) {
        var myHeaders = {}
        $(this).find('th.nosort').each(function (i, e) {
            myHeaders[$(this).index()] = { sorter: false };
        });

        $(this).tablesorter({ widgets: ['zebra'], headers: myHeaders });
    });    
}

This has a few advantages over the other answers I saw here. First, it works even if you have multiple non-sortable columns. Second, it also still works if you have multiple tables on the same page, each with different sortable columns.

眼趣 2024-11-08 16:40:22

只需使用 headers 参数:

$(document).ready(function() {

    console.log($(".basicList .col_filter").index());
    console.log($(".basicList .ck_field").index());

    var ck_ignore = $(".basicList .ck_field").index();
    var filter_ignore = $(".basicList .col_filter").index();

    $(".basicList").tablesorter({ widgets: ['zebra'],headers: {       
             // pass the headers argument and assing a object
        headers: {
            // assign the first column (we start counting zero)
            0: {
                // disable it by setting the property sorter to false 
                sorter: false 
            }
        }
        ,
            $filter_ignore : {                
                sorter: false
            }
        }  
    });

Just use the headers argument:

$(document).ready(function() {

    console.log($(".basicList .col_filter").index());
    console.log($(".basicList .ck_field").index());

    var ck_ignore = $(".basicList .ck_field").index();
    var filter_ignore = $(".basicList .col_filter").index();

    $(".basicList").tablesorter({ widgets: ['zebra'],headers: {       
             // pass the headers argument and assing a object
        headers: {
            // assign the first column (we start counting zero)
            0: {
                // disable it by setting the property sorter to false 
                sorter: false 
            }
        }
        ,
            $filter_ignore : {                
                sorter: false
            }
        }  
    });
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文