How can I turn this column filterhead to a dynamic one?

pckamou

I based my code on this example: http://live.datatables.net/gejojiqu/1/edit

The column filter works but it doesn't cascade just like the example.

Here is the code:

          $(".filterhead").not(":eq(0),:eq(1),:eq(5)").each( function ( i ) {
              var select = $('<select><option value=""></option></select>')
                  .appendTo( $(this).empty() )
                  .on( 'change', function () {

                  var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val()
                  );             

                  table.column( i+3, {search: 'applied'}).search( val ? '^'+val+'$' : '', true, false ).draw();
                  } );

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

  var currSearch = table.column( i+3 ).search();
  if ( currSearch ) {
    select.val( currSearch.substring(1, currSearch.length-1) );
  }         

allan

Perhaps you can link to a test case that shows the problem you are having please? Linking to an example that works doesn't help us to debug it

Allan

pckamou

@allan,

Here is a live sample of the code. https://script.google.com/macros/s/AKfycbyOFny3gvbOlNH-InDYbzlarxjwF25YMrmDeYJOZ0TDpIO1NL9hj9xn8N3tOb3-EiOStQ/exec

What I am wanting to achieve is that when, for example, I choose "type 1" it should only have an option dropdown of "2015" on the year dropdown and the category dropdown then should only have "category 1", just like the example code.

kthorngren

Its very difficult to debug the code you have as its all on one line with much formatting. I did a search for buildSelect in didn't find it. Do you have a function similar to this?

I also did a search in your source for .on and only see one instance. Doesn't look like you have created a draw event that calls a function to rebuild the selects. Take a further look at the example. It uses draw to call buildSelect to rebuild the select lists. Is this what you have?

Kevin

pckamou

@kthorngren

Hi, where do I place this code?

"$(document).ready(function() {
var table = $('#example').DataTable();

buildSelect( table );
table.on( 'draw', function () {
buildSelect( table );
} );
} );"

Is it inside my existing datatable or just embed it in my javascript? because I embeded the example code and changed the needed variables etc but it doesn't link to my datatable. I am sorry for such noobish questions, I am still new to this.

kthorngren

Place the code after you initialize Datatables, just like in the example.

Kevin

pckamou

@kthorngren

Here is my code for the whole dataTable:

   $(document).ready(function() {
   var table = $('#dataTable').DataTable({
     destroy:true,
     responsive: true,
     ordering: false,
     pageLength: 15, 
     lengthMenu: [
      [5, 10, 15],
      ['5', '10', '15']
  ],
      data: dataArray,
      columns: [
        {
          "title":" ",
          className: "hide_column"                       
        }, 
        {"title":"TITLE",className: "text-left"},
        {"title":"SUBTITLE",className: "text-left"},
        {"title":"TYPE",className: "text-left"},
        {"title":"YEAR",className: "text-left"},
        {"title":"CATEGORY",className: "text-left"},

      {
        "title":" ",
         render: function(data, type, row, meta){
           if(type === 'display'){
             data = '<a href="' + data + '" target="_blank" title="VIEW THIS FILE" class="btn btn-outline-primary btn-xs"><i class="fa fa-eye"></a>';
           }
           return data;
         }
      },
      {"title": " "},
      {"title": " "}




       ],


           columnDefs: [
        //Hide the sort icons in all table headers.
        {
         "className": "dt-center", "targets": "_all"              
          },              
        ],
        dom: 
          "<'row'<'col-sm-12 col-md-6'l>>" +
          "<'row'<'col-sm-12'tr>>" +
          "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"
      });

          $(document).ready(function() {
            var table = $('#dataTable').DataTable();

            buildSelect( table );
            table.on( 'draw', function () {
              buildSelect( table );
            } );
          } );

          function buildSelect( table ) {
            table.columns().every( function () {
              var column = table.column( this, {search: 'applied'} );
              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>' );
              } );

              // The rebuild will clear the exisiting select, so it needs to be repopulated
              var currSearch = column.search();
              if ( currSearch ) {
                select.val( currSearch.substring(1, currSearch.length-1) );
              }
            } );
          } 
    });

and here is the output after these changes: https://script.google.com/macros/s/AKfycbxMZ7YRg76X3E7M5GWFolQW5z4LQAEPQIoFJ3PMY26S55lTPkLej8hW6weBm23R_p1gIA/exec

The column filters only have text headers.

pckamou

@kthorngren @allan

Here is the latest deployment: https://script.google.com/macros/s/AKfycbwBXC4yKLNozURG-5PS3MGWUUBSVRqibgM-uZBkz1XPURGXj3jeKfUiu0VvrrIY6BjLaQ/exec

The only thing I changed is from ".appendTo( $(column.footer()).empty() )" to ".appendTo( $(column.header()).empty() )"

The cascading dropdown now appears and works! but can you please help me to allow it to only appear for type, year, and category column please? just like the one in the first build first post of this thread.

allan

You are using table.columns() - i.e. it is selecting every column. What I'd do is apply a class to the header cells that you want it to appear on and then use table.columns('.myClassName') or you could use an index selector or anything else as documented in column-selector.

Allan