Jquery Tablesorter-按包含<input>元素的列排序

在输入之前添加一个隐藏的span,并在其中包含一些文本(用于对列进行排序)。比如:

<td>
    <span class="hidden">1</span>
    <input type="checkbox" name="x" value="y">
</td>

$(document).ready(function() {

    $('#tableid input').click(function() {
         var order = this.checked ? '1' : '0';
         $(this).prev().html(order);
    })

})

注意:我没有检查代码,所以可能有错误。

$(document).ready(function() {
    $.tablesorter.addParser({ 
        id: "input", 
        is: function(s) { 
            return false; 
        }, 
        format: function(s, t, node) {
            return $(node).children("input[type=checkbox]").is(':checked') ? 1 : 0;
        }, 
        type: "numeric" 
    });

    sorter = $("#table").tablesorter({"headers":{"0":{"sorter":"input"}}});
// The next makes it respond to changes in checkbox values 
    sorter.bind("sortStart", function(sorter){$("#table").trigger("update");});

}); 

我之所以添加此响应,是因为我使用了一个支持/分叉的jQuery表排序器库,它具有新的特性。包括一个可选的输入/选择字段解析器库。

http://mottie.github.io/tablesorter/docs/

下面是一个例子: http://mottie.github.io/tablesorter/docs/example-widget-grouping.html

headers: {
  0: { sorter: 'checkbox' },
  3: { sorter: 'select' },
  6: { sorter: 'inputs' }
}

您可以使用tablesorter jQuery插件并添加一个能够对所有复选框列进行排序的自定义解析器:

$.tablesorter.addParser({
        id: 'checkbox',
        is: function (s, table, cell) {
            return $(cell).find('input[type=checkbox]').length > 0;
        },
        format: function (s, table, cell) {
            return $(cell).find('input:checked').length > 0 ? 0 : 1;
        },
        type: "numeric"
    });

我在其他答案中尝试了多种方法,但最终使用了salgiza接受的答案,以及martin关于更新表模型的评论。然而,当我第一次实现它时,我在onchange触发器的复选框内设置了更新行,就像建议的措辞一样。这重新排列了我在checking/unchecking复选框上的行,这让我感到非常困惑。一听到咔嗒声,台词就跳开了。因此,我将更新功能绑定到实际的复选框列标题,这样只有在单击更新排序时,行才会重新排列。它的工作原理与我所希望的一样:

// checkbox-sorter is the assigned id of the th element of the checbox column
$("#checkbox-sorter").click(function(){ 
    $(this).parents("table").trigger("update");
});

 $.tablesorter.addParser({ 
    // set a unique id 
    id: 'input', 
    is: function(s) { 
        // return false so this parser is not auto detected 
        return false; 
    }, 
    format: function(s) { 
        // Here we write custom function for processing our custum column type 
        return $("input",$(s)).val() ? 1 : 0; 
    }, 
    // set type, either numeric or text 
    type: 'numeric' 
}); 

然后用在你的桌子上

$("table").tablesorter(headers:{0:{sorter:input}});

只需最后一次触摸,即可完成Aaron的回答并避免堆栈溢出错误。那么除了使用 $.tablesorter.parser() 如上所述,我必须在我的页面中添加以下内容,以便在运行时使用更新的复选框值。

    var checkboxChanged = false;

    $('input[type="checkbox"]').change(function(){
        checkboxChanged = true;
    });

    // sorterOptions is a variables that uses the parser and disables
    // sorting when needed
    $('#myTable').tablesorter(sorterOptions);
    // assign the sortStart event
    $('#myTable')..bind("sortStart",function() {
        if (checkboxChanged) {
            checkboxChanged = false;
            // force an update event for the table
            // so the sorter works with the updated check box values
            $('#myTable')..trigger('update');
        }
    });