Question

我正在尝试使用tablesorter filter插件来处理复选框。

它们显示的默认值是字符串文本框排序：

filterContainer（string） - 用户将键入搜索字符串的输入框的DOM ID。默认为“＃filter-box”。

.tablesorterFilter({filterContainer: "#filter-box",
                            filterClearContainer: "#filter-clear-button",
                            filterColumns: [0]});

<input name="filter" id="filter-box" value="" maxlength="30" size="30" type="text">

我正在尝试使用复选框过滤器，这就是他们对复选框的说法：

filterOrMode（boolean） - 按OR模式过滤，可能出现任何单词。默认值为false（AND模式，必须出现所有单词）。

所以我这样做了：

.tablesorterFilter({filterOrMode: true,
        filterContainer: '#check-box',
                    filterColumns: [0]});

<input name="filter" id="check-box" type="checkbox" value="Doe"> Doe<br>
<input name="filter" id="check-box" type="checkbox" value="Smith"> Smith<br>

And it doesn't work，虽然模糊的文档说它应该。 Here's how the original works for those interested.

如果有人知道为什么会这样，请告诉我:)！

谢谢！：））

Answer 1

Hiya okeis所以在这里工作演示 jsfiddle：http://jsfiddle.net/BCreb/87/

<强>解释

首先：你有2个具有相同id但不正确的复选框:)请参阅下面的更新HTML（在JQuery代码之后）。

我不确定你是否可以使用复选框（我可能错了）：read the plugin:（请注意有些人已经编写了解析器，你可以检查出来）但我喜欢tablesorter，插件链接：[link ] 应该管用。 https://github.com/jbritten/jquery-tablesorter-filter/blob/master/tablesorter_filter.js;

＆amp; 您还可以在此处查看好discussion / opinions：jQuery table filter with text, checkboxes, selects ＆amp; 您可以查看此插件：{ {3}};但上述解决方案将为您解决问题。

Below code has filterRow() and ShowAll() function which filter your table data accordingly and display the row:

JQuery代码

jQuery(document).ready(function() {
    $("#myTable").tablesorter({
        debug: false,
        widgets: ['zebra'],
        sortList: [[0, 0]]
    }).tablesorterFilter({
        filterContainer: $("#filter-box"),
        filterClearContainer: $("#filter-clear-button"),
        filterColumns: [0],
        filterCaseSensitive: false,
        callback: function() {
            var rowCount = $("#myTable tr:visible").length - 1;
           // alert(rowCount);
        }
    });

    $("#check-box, #check-box2").click(function(){
      // alert($(this).is(":checked"));

     // If both the checkboxes are selected or not selected.  
    if (($("#check-box").is(":checked") && $("#check-box2").is(":checked")) || (!$("#check-box").is(":checked") && !$("#check-box2").is(":checked")) ) {

            showAllRow();

        } else if ($("#check-box").is(":checked")  ) {
           filterRow($("#check-box").val());
        } else if ($("#check-box2").is(":checked") ){
           filterRow($("#check-box2").val());
        }

    });



});

function showAllRow() {

    $("#myTable").find("tr").each(function(){
               $(this).show();
    });

}


function filterRow(chckBoxValue) {

    $("#myTable").find("tr").each(function(){

    var bool = 0; // Identifies if the rows td has that filter or not.

        $(this).find("td").each(function(){
            if($(this).text() != chckBoxValue) {
                bool = 1;
            } else { 
                bool = 0;
                return false;
            }
        });

        if (bool == 1) {
               $(this).hide();
        }else{
               $(this).show();
        }
    });

}

这应该有帮助！欢呼声

<强> HTML

Search: <input name="filter" id="filter-box" value="" maxlength="30" size="30" type="text">
<input id="filter-clear-button" type="submit" value="Clear"/>

<br/>
 <input name="filter" id="check-box" type="checkbox" value="Doe"> Doe<br>
<input name="filter" id="check-box2" type="checkbox" value="Smith"> Smith<br>

<table id="myTable">
  <thead>
    <tr>
      <th>Last Name</th>
      <th>First Name</th>
      <th>Email</th>
      <th>Web Site</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Smith</td>
      <td>John</td>
      <td>jsmith@gmail.com</td>
      <td>http://www.jsmith.com</td>
    </tr>
    <tr>
      <td>Doe</td>
      <td>Jason</td>
      <td>jdoe@hotmail.com</td>
      <td>http://www.jdoe.com</td>
    </tr>
    <tr>
      <td>Smith</td>
      <td>John</td>
      <td>jsmith@gmail.com</td>
      <td>http://www.jsmith.com</td>
    </tr>
    <tr>
      <td>Doe</td>
      <td>Jason</td>
      <td>jdoe@hotmail.com</td>
      <td>http://www.jdoe.com</td>
    </tr>
    <tr>
      <td>Smith</td>
      <td>John</td>
      <td>jsmith@gmail.com</td>
      <td>http://www.jsmith.com</td>
    </tr>
    <tr>
      <td>Doe</td>
      <td>Jason</td>
      <td>jdoe@hotmail.com</td>
      <td>http://www.jdoe.com</td>
    </tr>
    <tr>
      <td>Smith</td>
      <td>John</td>
      <td>jsmith@gmail.com</td>
      <td>http://www.jsmith.com</td>
    </tr>
    <tr>
      <td>Doe</td>
      <td>Jason</td>
      <td>jdoe@hotmail.com</td>
      <td>http://www.jdoe.com</td>
    </tr>
    <tr>
      <td>Smith</td>
      <td>John</td>
      <td>jsmith@gmail.com</td>
      <td>http://www.jsmith.com</td>
    </tr>
    <tr>
      <td>Doe</td>
      <td>Jason</td>
      <td>jdoe@hotmail.com</td>
      <td>http://www.jdoe.com</td>
    </tr>
  </tbody>
</table>

Answer 2

Tats_innit，我尝试调整上面的代码来处理我拥有的4个复选框，但是当我这样做时，它将无法识别代码。这是我做的：

jQuery(document).ready(function () {
$("#rowspan").tablesorter({
    debug: false,
    widgets: ['zebra'],
    sortList: [
        [0, 0]
    ]
}).tablesorterFilter({
    filterContainer: $("#filter-box"),
    filterClearContainer: $("#filter-clear-button"),
    filterColumns: [0],
    filterCaseSensitive: false,
    callback: function () {
        var rowCount = $("#rowspan tr:visible").length - 1;
        // alert(rowCount);
    }
});

$("#check-box, #check-box2, #check-box3, #check-box4").click(function () {
    // alert($(this).is(":checked"));

    // If both the checkboxes are selected or not selected.  
    if ($("#check-box").is(":checked") && $("#check-box2").is(":checked") && $("#check-box3").is(":checked") && $("#check-box4").is(":checked")) || (!$("#check-box").is(":checked") && !$("#check-box2").is(":checked") && $("#check-box3").is(":checked") && $("#check-box4").is(":checked")) {

        showAllRow();

    } else if ($("#check-box").is(":checked")) {
        filterRow($("#check-box").val());
    } else if ($("#check-box2").is(":checked")) {
        filterRow($("#check-box2").val());
    } else if ($("#check-box3").is(":checked")) {
        filterRow($("#check-box3").val());
    } else if ($("#check-box4").is(":checked")) {
        filterRow($("#check-box4").val());
    }


});



});

function showAllRow() {

$("#rowspan").find("tr").each(function () {
    $(this).show();
});

}


function filterRow(chckBoxValue) {

$("#rowspan").find("tr").each(function () {

    var bool = 0; // Identifies if the rows td has that filter or not.

    $(this).find("td").each(function () {
        if ($(this).text() != chckBoxValue) {
            bool = 1;
        } else {
            bool = 0;
            return false;
        }
    });

    if (bool == 1) {
        $(this).hide();
    } else {
        $(this).show();
    }
});

}

这是我的HTML，虽然很长......

<form>
<input name="filter" id="filter-box" value="" maxlength="30" size="30" type="text">
<input id="filter-clear-button" type="submit" value="Clear" />
<br/>
<input name="filter" id="check-box" type="checkbox" value="Waiting for parts">Waiting for parts
<input name="filter" id="check-box2" type="checkbox" value="Pending">Pending
<input name="filter" id="check-box3" type="checkbox" value="Complete">Complete
<input name="filter" id="check-box4" type="checkbox" value="Waiting for customer response">Waiting for customer response</form>
<table width="100%" id="rowspan" class="tablesorter" cellpadding="0" cellspacing="1">
<thead>
    <tr>
        <th>&nbsp;</th>
        <th>Ticket #</th>
        <th>Customer</th>
        <th>Status</th>
        <th>Edit</th>
        <th>Delete</th>
    </tr>
</thead>
<tbody>
    <tr bgcolor="#7BCC70">
        <td><b>1</b>
        </td>
        <td align="center" height='35px'><a title="View details of ticket 248341" href="ticketdetails.php?ticketid=248341"><b>248341</b></a>
        </td>
        <td align="center" height='35px'><b>Brenda Lear</b>
        </td>
        <td align="center" height='35px'><b>Complete</b>
        </td>
        <td align="center" height='35px'><a title="Edit ticket info" href="editticket.php?ticketid=248341"><b>Edit</b></a>
        </td>
        <td align="center" height='35px'><a id="commentDelete" onClick="return delTicket(this.id);" title="Delete ticket" href="?del=248341"><b>Delete</b></a>
        </td>
    </tr>
    <tr bgcolor="#7BCC70">
        <td><b>2</b>
        </td>
        <td align="center" height='35px'><a title="View details of ticket 522303" href="ticketdetails.php?ticketid=522303"><b>522303</b></a>
        </td>
        <td align="center" height='35px'><b>Cheryl Spencer</b>
        </td>
        <td align="center" height='35px'><b>Complete</b>
        </td>
        <td align="center" height='35px'><a title="Edit ticket info" href="editticket.php?ticketid=522303"><b>Edit</b></a>
        </td>
        <td align="center" height='35px'><a id="commentDelete" onClick="return delTicket(this.id);" title="Delete ticket" href="?del=522303"><b>Delete</b></a>
        </td>
    </tr>
    <tr bgcolor="#7BCC70">
        <td><b>3</b>
        </td>
        <td align="center" height='35px'><a title="View details of ticket 122588" href="ticketdetails.php?ticketid=122588"><b>122588</b></a>
        </td>
        <td align="center" height='35px'><b>Roz Taylor</b>
        </td>
        <td align="center" height='35px'><b>Complete</b>
        </td>
        <td align="center" height='35px'><a title="Edit ticket info" href="editticket.php?ticketid=122588"><b>Edit</b></a>
        </td>
        <td align="center" height='35px'><a id="commentDelete" onClick="return delTicket(this.id);" title="Delete ticket" href="?del=122588"><b>Delete</b></a>
        </td>
    </tr>
    <tr bgcolor="#7BCC70">
        <td><b>4</b>
        </td>
        <td align="center" height='35px'><a title="View details of ticket 122589" href="ticketdetails.php?ticketid=122589"><b>122589</b></a>
        </td>
        <td align="center" height='35px'><b>Roz Taylor</b>
        </td>
        <td align="center" height='35px'><b>Complete</b>
        </td>
        <td align="center" height='35px'><a title="Edit ticket info" href="editticket.php?ticketid=122589"><b>Edit</b></a>
        </td>
        <td align="center" height='35px'><a id="commentDelete" onClick="return delTicket(this.id);" title="Delete ticket" href="?del=122589"><b>Delete</b></a>
        </td>
    </tr>
   </tbody>
</table>

无法使Tablesorter Checkbox过滤工作

2 个答案: