Getting columnFilter plugin working with DataTables

Question

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?

Daniel · Accepted Answer · 2014-12-18 10:48:03Z

5

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

answered Dec 18, 2014 at 10:48

Daniel

37.2k10 gold badges122 silver badges208 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Csaba Toth Over a year ago

Can you give me some directions to patch columnFilter?

Csaba Toth Over a year ago

I'm also considering your plugin, but all the samples I see also use the old dataTables() call. Will it work with the new DataTables()?

Csaba Toth Over a year ago

Got it working from the last example (multiple AJAX). I have to do: vm.table = $('#reportTable').DataTable({...}); yadcf.init(vm.table, {...});

Csaba Toth Over a year ago

Plus the GitHub Readme also shows the capital D initialization

Daniel Over a year ago

Notice the code snippets at the bottom of each page in showcase, there is a comment regarding the API usage and where to find it... also go over the docs (in the js file) to see all yadcf features

Collectives™ on Stack Overflow

Getting columnFilter plugin working with DataTables

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related