Dynamic/cascading dropdowns in datatables

jonmrich

I'm trying to get a few dependent (cascading) dropdowns working with my datatables table. What's supposed to happen is after you select from the first dropdown, the second dropdown populates with only the relevant options.

For instances if you select "Financial" as the category in the first dropdown, only financial related items are available in the second dropdown.

Here's how I'm drawing the table:

$("#total_datatable").DataTable({  
  "ajax": {   
    "url":"quick_view.php",
    "type":"GET"
}  ,
   "paging":        true, 
  "sDom": '<"top">t<"bottom"><"clear">',
   "pageLength": 50,
"order": [[ 6, "desc" ]],
  "aoColumns": [
 { "bSortable": true, "width": "0%", "sClass": "lang_body_2", "sTitle": "","visible":false },

 { "bSortable": true,  "width": "20%", "sClass": "lang_body_2", "sTitle": "","visible":false },
  { "bSortable": true, "width": "20%", "sClass": "lang_body_2",  "sTitle": "Category"},
 { "bSortable": true, "width": "20%","sClass": "lang_body_2","sTitle": "Value" },
 { "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "Database",},
 { "bSortable": true, "width": "20%", "sClass": "lang_body_2", "sTitle": "National Average"},
  { "bSortable": true, "width": "20%","sClass": "lang_body_2 index_num table_index","sTitle": "Index" },
  ],
});
});

The datatable renders and works fine. Here's what I was trying for the HTML and scripts for the dropdowns:

HTML:

 <div id="main_grouping_pick" class="col-md-4 col-xs-6" >

 <div id="category_pick" class="col-md-4 col-xs-6">

JS:

var table = $('#total_datatable').DataTable();

$("#main_grouping_pick").each( function ( i ) {
var select = $('<select><option value=""></option></select>')
  .appendTo( $(this).empty() )
  .on( 'change', function () {
    table.column( 1 )
      .search( $(this).val() )
      .draw();

 $("#category_pick").each( function ( i ) {
 var select = $('<select><option value=""></option></select>')
  .appendTo( $(this).empty() )
  .on( 'change', function () {
    table.column( 2)
      .search( $(this).val() )
      .draw();
  } );

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

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

What happens is that I select from the first dropdown, the second dropdown appears, but contains all of the possible categories and not just those that are now in the table due to the filtering that happened with the first dropdown. I'm guess the second dropdown is getting the values before I filter with the first dropdown or that the way I'm filtering doesn't really make the other categories unavailable.

Really though...I have no idea.

Any insights would be appreciated.

Thanks,
JMR

jonmrich

I ended up using this plugin and it works like a charm: https://github.com/cyberhobo/ColumnFilterWidgets

I only wish I found it hours ago.