2

私は 1.10.2 DataTables を使用しています。手動で何かをガンクする代わりに、columnFilter プラグインを利用したいと思います。データテーブル、jQuery 1.10.2、jQuery UI 1.10.3、およびブートストラップ 3.1.1 でブートストラップ レンダラーを使用しています。この特定のテーブルでは、派手なものは使用されていません (固定ヘッダー、固定列、ColVis または ColReorder はありません)。ページングがオンになっています。

<link rel="stylesheet" type="text/css" href="~/CSS/dataTables.bootstrap.css" />
<!-- stuff -->
<table id="reportTable" class="table table-condensed table-striped table-bordered">
    <thead>
    </thead>
    <tbody>
    </tbody>
</table>
<!-- stuff -->
<script type='text/javascript' src='~/Scripts/jquery.dataTables.js'></script>
<script type='text/javascript' src='~/Scripts/dataTables.bootstrap.js'></script>
<script type="text/javascript" src="~/Scripts/jquery.dataTables.columnFilter.js"></script>

JavaScript:

vm.table = $('#reportTable').DataTable({
    dom: 'rtipfl',
    autoWidth: false,
    info: true,
    lengthChange: true,
    lengthMenu: [ 10, 15, 20 ],
    displayLength: 10,
    pageLength: 10,
    ordering: true,
    orderMulti: true,
    orderClasses: true,
    order: [[ 2, "asc" ]],
    paging: true,
    pagingType: "full_numbers",
    renderer: "bootstrap",
    deferRender: true,
    processing: true,
    scrollX: false,
    scrollY: false,
    scrollCollapse: false,
    searching: true,
    columns: vm.columns,
    columnDefs: vm.columnDefs,
    data: vm.postingArray,
    initComplete: function (settings, json) {
        vm.attachTableEventHandlers();
    }
});

ただし、これは 22 列のテーブルです。最初に気付いたのは、columnFilter の例では、次のように DataTable の小文字の初期化のみが言及されていることです。

$('#blabla').dataTable().columnFilter();

私が言うなら

vm.table = $('#reportTable').DataTable({
     ...
}).columnFilter();

大きく太ります

"TypeError: $(...).DataTable(...).columnFilter is not a function
 vm.table = $('#reportTable').DataTable({"

私が言うなら

vm.table = $('#reportTable').DataTable({
     ...
});
$('#reportTable').columnFilter();

"TypeError: oTable.fnSettings is not a function
if (!oTable.fnSettings().oFeatures.bFilter)"

私が言うなら

vm.table = $('#reportTable').DataTable({
     ...
});
$('#reportTable').dataTable().columnFilter();

フィルタは表示されません。

私は何を間違っていますか？どのように初期化すればよいですか？

4

1 に答える 1

5

jQuery オブジェクトを返す呼び出しとは異なり、新しい呼び出しはオブジェクトを返すcolumnFilterため、新しい "D" データブル API でを適用できるとは思いません。.dataTable().DataTabletable

にパッチを適用columnFilterして、新しい「D」API をサポートできます

また

列にフィルターを追加するには、データテーブルに私の yadcf プラグインを使用します

yadcf はデータテーブルの古い API と新しい API をサポートし、10 種類の diff フィルターとその他の多くの機能を備えていることに注意してください :)

github の yadcf

yadcfショーケース

于 2014-12-18T10:48:03.743 に答える