Individual column searching (select inputs)

caro

Is it possible to do individual column searching, as on this page, with a table that loads using Ajax?

kthorngren

It will work as long as your are not using serverSide processing.

Kevin

caro

I'm using this javascript below and get the following error:
TypeError: $(...).DataTable is not a function

 <script type="text/javascript">

        $(document).ready(function() {
            $('#data').DataTable({
                initComplete: function() {
                    this.api().columns().every(function() {
                        var column = this;
                        var select = $('<select><option value=""></option></select>')
                            .appendTo($(column.footer()).empty())
                            .on('change', function() {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );

                                column
                                    .search(val ? '^' + val + '$' : '', true, false)
                                    .draw();
                            });

                        column.data().unique().sort().each(function(d, j) {
                            select.append('<option value="' + d + '">' + d + '</option>')
                        });
                    });
                }
            });
        });

    </script>

kthorngren

Sounds like you haven't loaded the Datatables JS and CSS code?

Kevin

caro

Thank you Kevin. It worked in IE, but when I refreshed the page, there was a popup error that "cannot reinitiate datatable. See image.

kthorngren

Follow the link in the message for troubleshooting procedures:
https://datatables.net/manual/tech-notes/3

If they don't help then please provide a test case showing the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

caro

Kevin, I would like to provide a test case but I don't know where to put the .JSON. Excuse my ignorance.

kthorngren

The error is indicating that you have $('#data').DataTable( {....} ) more than once in your Javascript. Where {....} are initialization parameters. Is this the case?

If that is the case then, unless your are intending to reinitialize Datatables with different parameters, the options should be combined into one $('#data').DataTable( {....} ).

Kevin

caro

I don't have) $('#data').DataTable( {....} more than once in my Javascript. The only Javascript I have is what I showed earlier.
Caro

kthorngren

I copied your code to this example and it seems to work:
http://live.datatables.net/weyaduwo/1/edit

Without a link to your page or a test case with the issue its hard to help debug.

Kevin

caro

Thank you for you help. I just restarted and it all worked fine.

xklyne

Hi, is it possible to use column searching (select) and the same time "serverSide": true ? If so, how? Thanks

kthorngren

The problem with using select inputs with server side processing is the code in the example uses the data in the client to build the select list. You would need a way to provide that data.

One option might be to provide it in the ajax response and use the xhr to extract that data to build the select list. One of the examples shows how to preprocess the data.

Kevin