populate (external) listbox from datatables column

populate (external) listbox from datatables column

PutjesPutjes Posts: 8Questions: 2Answers: 0
edited February 2016 in Free community support

Hi,
I have a table with two hidden columns. 'skills' and 'function'. I want to create two comboboxes that can filter the datatables table on the two columns [1] and [2] that are hidden.
I don't want the filters in the footer of the table. I found this example: https://datatables.net/examples/api/regex.html. But want the inputs to be list boxes. How to populate the combo's from the columns [1] and [2] and filter the datatables by the values in the combo boxes.

Regards,

This question has an accepted answers - jump to answer

Answers

  • glendersonglenderson Posts: 231Questions: 11Answers: 29
    Answer ✓

    I think I would approach the problem the other way around. I would populate the list boxes with the values of Functions and Skills. That would be just a distinct value query one on function, another on skill to populate those two boxes.

    Then I would then add an onChange event to each of the boxes. If either the Function or Skill changes, I would reload the dataTables and use the condition of where function = value from functions box and skill = value from skill box in my query that I use to pull the data from the database. I would be using an ajax source, and include the passed parameters of &function= and &skills= in my ajax URL.

  • PutjesPutjes Posts: 8Questions: 2Answers: 0

    I solved it:

    I created list of the Skills and Functions and added them to a table. Added a multiselect Jquery UI and that works for me.

    I then added some script for the datatable, and the change event. The '|'char in combination with the regexp=true makes the values cascading searchable in the datatables.

    $(document).ready(function() {
            $('#datatables2').dataTable({
                "columnDefs": [
                       {
                           "targets": [ 1,2,3,4 ],
                           "visible": false,
                           "searchable":true
                       }],
                "paging": false,
                "info": false,
                "filter": true
            });
    
            $('select.column_filter').change(function() {
                var oTable = $('#datatables2').dataTable();
                var colNumber = $(this).parents('tr td').attr('data-column');
                var searchString = "";
                $('#col' + colNumber + '_filter option:selected').each(function() {
                    searchString += $(this).text() + "|";
                });
                oTable.fnFilter(searchString.slice(0,-1), colNumber, regexp = true );
            } );
    
            //selects
            $(function(){
                $("select.single_filter").multiselect({
                    multiple: false,
                    header: "Selecteer een optie",
                    noneSelectedText: "Selecteer een optie"
                });
    
                $("select.multi_filter").multiselect({
                    multiple: true,
                    header: "Selecteer een optie",
                    noneSelectedText: "Selecteer een optie"
                });
            });
        } );
    
This discussion has been closed.