Tablesorter Checkboxが機能しなくなりました

私はtablesorter filterプラグインをチェックボックスと連携させようとしています。 - ユーザーが検索文字列を入力します入力ボックスのDOMのIDTablesorter Checkboxが機能しなくなりました

filterContainer（文字列）：彼らは示し

デフォルトでは、文字列のテキストボックスの一種です。デフォルトは "＃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（ブール値） - によるフィルタやモード、任意の単語かもしれません発生する。デフォルトは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.

なぜこのようなことが起こっているのかご存知の方は、私に教えてください:)！

ありがとうございました！ :)）

出典

2012-03-26 pufAmuf

Hiyaはそう作業のデモここ jsfiddle okeis：http://jsfiddle.net/BCreb/87/

説明

そうで開始するには：あなたが見る:)正しくない同じIDを持つ2つのチェックボックスを持っています下記のHTMLを更新しました（JQueryコードの後）。

read the plugin:（私が間違っている可能性があります）チェックボックスを使用できるかどうかわかりませんが、私はtablesorter、プラグインリンクが好きです：。 https://github.com/jbritten/jquery-tablesorter-filter/blob/master/tablesorter_filter.js;

&あなたがここにもここで良いdiscussion/opinionsに見てとることができます。jQuery table filter with text, checkboxes, selects&あなたはこのプラグインの中に見ることができ：http://datatables.net/。しかし、上記の解決策はあなたのためのトリックを行います。

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>[email protected]</td> 
     <td>http://www.jsmith.com</td> 
    </tr> 
    <tr> 
     <td>Doe</td> 
     <td>Jason</td> 
     <td>[email protected]</td> 
     <td>http://www.jdoe.com</td> 
    </tr> 
    <tr> 
     <td>Smith</td> 
     <td>John</td> 
     <td>[email protected]</td> 
     <td>http://www.jsmith.com</td> 
    </tr> 
    <tr> 
     <td>Doe</td> 
     <td>Jason</td> 
     <td>[email protected]</td> 
     <td>http://www.jdoe.com</td> 
    </tr> 
    <tr> 
     <td>Smith</td> 
     <td>John</td> 
     <td>[email protected]</td> 
     <td>http://www.jsmith.com</td> 
    </tr> 
    <tr> 
     <td>Doe</td> 
     <td>Jason</td> 
     <td>[email protected]</td> 
     <td>http://www.jdoe.com</td> 
    </tr> 
    <tr> 
     <td>Smith</td> 
     <td>John</td> 
     <td>[email protected]</td> 
     <td>http://www.jsmith.com</td> 
    </tr> 
    <tr> 
     <td>Doe</td> 
     <td>Jason</td> 
     <td>[email protected]</td> 
     <td>http://www.jdoe.com</td> 
    </tr> 
    <tr> 
     <td>Smith</td> 
     <td>John</td> 
     <td>[email protected]</td> 
     <td>http://www.jsmith.com</td> 
    </tr> 
    <tr> 
     <td>Doe</td> 
     <td>Jason</td> 
     <td>[email protected]</td> 
     <td>http://www.jdoe.com</td> 
    </tr> 
    </tbody> 
</table>

出典

2012-03-27 01:22:54

はTats_innitうわー、私はあなたにその答えのためのより多くのポイントを与えることがしたいです！どうもありがとうございます！ :) – pufAmuf

喜んでそれは助けました:)歓声！ –

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>

出典

2013-10-08 04:53:24

Tablesorter Checkboxが機能しなくなりました

答えて

関連する問題