1

http://www.datatables.net/indexからダウンロードした jQuery DataTables プラグインを使用しようとしていますが、 うまく機能しますが、私の Web サイトでは、すべてのテーブルで単語をフィルタリングできる必要があります。検索ボックスが 1 つあるページ。これを行うための 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
            });

そして、これが私のテーブルの1つがどのように見えるかです...

            <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

実際には、各テーブルに .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 に答える
0

あなたがしなければならないのは、次のようなフィルターメソッドを追加することだけです

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

デモ:フィドル

于 2013-03-19T03:25:49.240 に答える