Jquery的的tablesorter - 排序列具有元素

Question

我有这样的表：

|   Update   |   Name  |  Code      | modification date |
|            |   name1 | code1      | 2009-12-09        |
|            |   name2 | otehercode | 2007-09-30        | 

当更新列包含复选框<input type='checkbox' />。

在复选框初始状态呈现表之前决定的，而是行被从数据库中读取之后（它是基于组条件下，在服务器侧）。

复选框可以默认选中，通过默认或禁用（disabled='disabled'如input属性）未选中状态。

我使用 JQuery的的tablesorter ，以我的表进行排序。而我希望能够通过含复选框的列进行排序。这怎么可能（我能通过我的input元素一些额外的属性也许，如果这将有助于...）？结果 我应该写我自己的解析器来处理这个问题？

Answer 1

刚刚输入前添加一个隐藏的范围，并在它包括一些文本（将被用于将列进行排序）。是这样的：

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

})

请注意：我没有检查的代码，所以它可能有误差

Answer 2

这是哈特的回答的更完整的/正确的版本。

$(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");});

}); 

Answer 3

我因为我使用一个支持/叉状的jQuery的tablesorter库具有新功能的添加此响应。用于输入/选择字段的可选解析器库包含。

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

下面是一个例子： http://mottie.github.io/tablesorter/docs/example-widget -grouping.html 并且它是由包括在输入/选择解析器库“解析器输入-select.js”，加入了头对象和声明的列和解析式进行。

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

附加解析器包括有：日期解析（W /糖和DateJS），ISO8601日期，月，2位数年，工作日，距离（英尺/英寸＆度量）和标题格式（删除 “A” 和 “该”） 。

Answer 4

您可以使用的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"
    });

Answer 5

可以添加自定义解析器的tablesorter，不服这样的：

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

Answer 6

只是一个最后的润色，使阿龙的回答完全避免堆栈溢出错误。因此，除了使用上述的$.tablesorter.parser()功能，我不得不添加下面的在我的网页，使其在运行时用更新的复选框值工作。

    var checkboxCahnged = 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');
        }
    });

Answer 7

    <td align="center">
    <p class="checkBoxSorting">YOUR DATA BASE VALUE</p>
    <input type="checkbox" value="YOUR DATA BASE VALUE"/>
    </td>