Individual column searching (select inputs)

Individual column searching (select inputs)

carocaro Posts: 6Questions: 1Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

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

    Kevin

  • carocaro Posts: 6Questions: 1Answers: 0

    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>
    
  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

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

    Kevin

  • carocaro Posts: 6Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • carocaro Posts: 6Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited April 2018

    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

  • carocaro Posts: 6Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    Answer ✓

    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

  • carocaro Posts: 6Questions: 1Answers: 0

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

  • xklynexklyne Posts: 1Questions: 0Answers: 0

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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

This discussion has been closed.