使用tablesorter自定义解析器仅用于使用Checkbox进行过滤 - 需要工作示例

时间:2015-08-14 21:08:49

标签: checkbox filtering tablesorter

我正在尝试实现过滤我的复选框检查状态,类似于(或完全像?)Ivan,当他发布“使用tablesorter自定义解析器仅用于过滤”时。我已经来回定制解析器和文本提取以及文档中提供的示例中的每个排列都无济于事。 有人可以查看我发布的示例 http://jsfiddle.net/5fLr7c4o/14/ 并帮助我让它工作? 我正在使用该示例和其他示例中提供的headers和textExtraction函数:

            headers: {
            0: {
                sorter: 'false',
                filter: 'parsed'
            }
        },
        textExtraction: {
            0: function (node, table, cellIndex) {
                return $(node).find('.MyCheckbox').prop('checked') ? 'True' : 'False';
            }
        }

要煮沸,我有两个按钮。一个人将在没有选中复选框的情况下过滤任何内容,另一个将重置过滤器重置工作正常。过滤器(在我的本地文件中)过滤所有内容。 jsfiddle根本不起作用。

1 个答案:

答案 0 :(得分:0)

jsFiddle无法正常工作,因为在插件之后加载了jQuery。并且框架设置为加载jQuery v1.11.0,因此jQuery实际上被加载了两次。第二个副本覆盖第一个副本,而tablesorter与第一个副本相关联。很多东西都破了 - 这是删除第二个副本的demo updated - 但它仍然不起作用

如果您使用存储库中包含的parser-input-select.js file,它会有一个复选框解析器,可在更改后更新单元格,以便正确更新排序。无论如何,代码有四个版本,较旧的代码不使用提到的解析器。您可能感兴趣的演示就是这个:http://jsfiddle.net/abkNM/6163/您可能不需要寻呼机,所以不要包含该代码:

确保修改$(function() { var $table = $('table').tablesorter({ theme: 'blue', widgets: ['zebra', 'filter'], widgetOptions : { group_checkbox: [ "checked", "unchecked" ] }, headers: { 0: { sorter: 'checkbox' } } }) // HEADER CELL Checkbox - toggles state of visible checkboxes // make sure to include the "parser-input-select.js" file // it contains the most up-to-date checkbox parser .on('change', 'thead input[type="checkbox"]', function(){ var checkboxColumn = 0, onlyVisible = true, $this = $(this), isChecked = this.checked; $table .children('tbody') .children( 'tr' + ( onlyVisible ? ':visible' : '' ) ) .children(':nth-child(' + ( checkboxColumn + 1 ) + ')') .find('input') .prop('checked', isChecked) .trigger('update'); }); }); & checkboxColumn根据需要变量。

更新:解析器代码中的一个错误刚刚修复,它目前仅在主分支中可用(在我的回答中链接)。否则,您只需输入onlyVisibleunchecked(使用引号检查完全匹配)即可过滤复选框。

这些过滤器名称(复选框状态)由group_checkbox option设置,我刚刚添加到我的答案中。