Answers

• glenderson Posts: 231Questions: 11Answers: 29

  March 2016 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.
• Putjes Posts: 8Questions: 2Answers: 0

  March 2016

  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"
              });
          });
      } );