jQuery插件數據表API函數fnFilterAll

我試圖使用jQuery的數據表插件從這裏下載， http://www.datatables.net/index 和它工作得很好，但是，對於我的網站，我需要能夠在所有的表上過濾詞我的網頁有一個搜索框。有一個API插件可以在這裏詳細說明， http://datatables.net/plug-ins/api#fnFilterAll 但我不確定如何在我的網站中使用它。我不明白這個例子，希望有人能幫助我。jQuery插件數據表API函數fnFilterAll

我需要知道在腳本/腳本語句中引用什麼以及如何使用現有表來實現它。下面是我的js代碼看起來像......

var oTable = $("#myTable").dataTable( 
      { 
      "bPaginate": false, 
      "bLengthChange": false, 
      "bFilter": true, 
      "bSort": false, 
      "bInfo": false, 
      "bAutoWidth": false 
      });

而且這裏是我的一個表的樣子......

  <table cellpadding="0" cellspacing="0" border="0" class="display" id="myTable"> 
      <thead> 
       <tr> 
        <th>ALBUM</th> 
        <th>SONG</th> 
        <th>LENGTH</th> 
       </tr> 
       <tr> 
        <td id="album">The Unraveling</td> 
        <td></td> 
        <td></td> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td></td> 
        <td>"Alive and Well"</td> 
        <td>2:06</td> 
       </tr> 
       <tr> 
        <td></td> 
        <td>"My Life Inside Your Heart"</td> 
        <td>3:02</td> 
       </tr> 
       <tr> 
        <td></td> 
        <td>"Stained Glass and Marble"</td> 
        <td>1:36</td> 
       </tr> 
       <tr> 
        <td></td> 
        <td>"Everchanging"</td> 
        <td>3:47</td> 
       </tr> 
       <tr> 
        <td></td> 
        <td>"Faint Resemblance"</td> 
        <td>2:51</td> 
       </tr> 
       <tr> 
        <td>_________________</td> 
        <td>__________</td> 
        <td>_____</td> 
       </tr> 
      </tbody> 
      <tfoot> 
       <tr> 
        <td id="year">Click album art to buy!</td> 
        <td><a href="http://itunes.apple.com/us/album/the-unraveling/id291793862/"target="_blank"> <img src="images/the_unraveling.jpg" alt="The Unraveling" style="width: 100%;"> </a></td> 
        <td id="year">Total 
        <br> 
        Length 36:40</td> 
       </tr> 
      </tfoot> 
     </table>

任何幫助在此將不勝感激。

來源

2013-03-19 user2113538

所有你需要做的就是添加一個過濾方法一樣

$('#myTable_filter input').keyup(function(){ 
    oTable.fnFilterAll(this.value); 
})

演示：Fiddle

來源

2013-03-19 03:25:49

謝謝，但沒有奏效，請記住，我有多個表，而不只是一個。我也想知道，如果我可以保留所有我的表相同的ID，所以我的js不像這樣， var oTable = $（「＃myTable，＃myTable2，＃myTable3，＃myTable4，＃myTable5，＃ myTable6 「）。dataTable的（這 \t $（」＃myTable_filter輸入，＃myTable2_filter輸入，＃myTable3_filter輸入，＃myTable4_filter輸入，＃myTable5_filter輸入，＃myTable6_filter輸入「）。KEYUP（函數（）{ \t oTable。 fnFilterAll（this.value）; – user2113538 2013-03-19 03:48:24

你想過濾所有表 – 2013-03-19 03:50:43

是的...對不起，我不知道如何編碼 – user2113538 2013-03-19 04:03:56

你真的應該給每個表類如.datatable。這將允許你整齊地址和循環所有的數據表:)

//array to contain all datatables 
var aoTables = []; 

//settings for the dtatables 
var dataTableSettings = { 
    "bPaginate": false, 
    "bLengthChange": false, 
    "bFilter": true, 
    "bSort": false, 
    "bInfo": false, 
    "bAutoWidth": false 
}; 

//loop all targeted tables in the dom to instantiate datatables 
$('.datatable').each(function() { 
    var oTable = $(this).dataTable(dataTableSettings); 
}); 

//now tell the search what tables to filter by looping the datatables array 
if ($('input#search').length) { 
    $("input#search").keyup(function() { 
    for (var i = 0; i < aoTables.length; i++) { 
     aoTables[i].fnFilterAll(this.value); 
    } 
    }); 
}

來源

2013-05-29 09:10:14 Bananaapple

jQuery插件數據表API函數fnFilterAll

回答

相關問題