1

我正在尝试使用从这里下载的 jQuery DataTables 插件， http://www.datatables.net/index ，它工作得很好，但是，对于我的网站，我需要能够过滤我所有表格中的单词带有一个搜索框的页面。这里有一个详细的 API 插件， http://datatables.net/plug-ins/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>

对此的任何帮助将不胜感激。

4

2 回答 2

0

您所要做的就是添加一个过滤器方法，例如

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

演示：小提琴

于 2013-03-19T03:25:49.240 回答
0

你真的应该给每个表一个类，比如.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-29T09:10:14.510 回答