CODEWITHSUNDEEP
jquerytwitter-bootstrap-3datatablesdatatables-1.10
Csaba Toth
Csaba Toth

Reputation: 10699

Getting columnFilter plugin working with DataTables

I'm using 1.10.2 DataTables, and I'd like to take advantage of columnFilter plugin instead of gunking together something manually. I'm using bootstrap renderer with datatables, jQuery 1.10.2, jQuery UI 1.10.3 and bootstrap 3.1.1. This particular table doesn't use any fancy stuff (no fixed header, no fixed columns, no ColVis or ColReorder). Paging is turned on.

<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();
    }
});

It's a table with 22 columns though. First thing I notice is that columnFilter examples only mention the lowercase initialization of DataTables, like:

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

If I say

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

I get a big fat

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

If I say

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

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

If I say

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

No filters appear.

What am I doing wrong? How should I initialize it?

Upvotes: 2

Views: 6059

Answers (1)

Daniel
Daniel

Reputation: 37061

I don't think that you can apply the columnFilter with the new "D" datables api, because unlike the .dataTable() call which returns a jQuery object, the new .DataTable call returns a table object.

You can patch the columnFilter to support the new "D" api

or

Use my yadcf plugin for datatables for adding filters to your columns

Note that yadcf support the old and the new api's of datatable and it got 10 diff' types of filters and tons of other goodies :)

yadcf on github

yadcf showcase

Upvotes: 5

Related Questions