jQuery DataTables: Filter per column

Question

I have a DataTables table, which is getting it's data trough an AJAX source. I've got the table up and running, even searching works.

Now I've got a request to implement search fields for every column. There seems to be a DataTables Plugin for column filtering, which I tried to use.

This is my HTML:

<!DOCTYPE HTML>
<html>
<head>
    <title>testpage</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://www.company.com/content/dam/workflows/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="http://jquery-datatables-column-filter.googlecode.com/svn/trunk/media/js/jquery.dataTables.columnFilter.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#overview").dataTable({
            aoColumnDefs:[{
                aTargets: [0]
            }],
            bAutoWidth: false,
            bLengthChange: false,
            iDisplayLength: 10,
            sAjaxSource: "http://server/api.jsp?someparameters"
        }).columnFilter();
    })
    </script>
</head>

<body>

<table id="overview">
<tr>
    <thead>
        <th>#</th>
        <th>Betrieb</th>
        <th>Status</th>
        <th>Anlagenummer</th>
        <th>Bezeichnung</th>
    </thead>
</tr>
</table>

</body>
</html>

As you can see, I just attached the columnFilter() method. It doesn't even throw an error in the console, but the table looks just like before (no additional input boxes to search the columns).

Am I doing something wrong? Is it possible due to the source beeing AJAX?

Where is <tfoot> tag?

asprin
– asprin

2013-04-05 12:35:19 +00:00
Commented Apr 5, 2013 at 12:35 — asprin
– asprin, Commented Apr 5, 2013 at 12:35
Oh my... Can't believe I didn't see that, thanks alot!

Ahatius
– Ahatius

2013-04-09 07:29:29 +00:00
Commented Apr 9, 2013 at 7:29 — Ahatius
– Ahatius, Commented Apr 9, 2013 at 7:29

ducpn · Accepted Answer · 2013-04-05 12:32:51Z

2

I think you need to define a footer section in your html table. Have a look at this example

The table should look like

<table>
    <thead>
        <tr>...</tr>
    </thead>
    <tfoot>
        <tr>...</tr>
    </tfoot>
</table>

answered Apr 5, 2013 at 12:32

ducpn

638 bronze badges

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

2 Comments

Ahatius Over a year ago

Thanks buddy, that was exactly what was causing the problem!

Csaba Toth Over a year ago

I couldn't get this working with DataTables 1.10.2. Should it work with 1.10.+? The plugin's demo site only uses Datatables 1.8 and 1.9 back from 2011-2012. I have a bad feeling it's not up to date :(

Collectives™ on Stack Overflow

jQuery DataTables: Filter per column

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related