Answers

• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  September 2022

  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 Posts: 5Questions: 1Answers: 0

  September 2022

  @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 Posts: 21,336Questions: 26Answers: 4,951

  September 2022

  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 Posts: 5Questions: 1Answers: 0

  September 2022

  @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 Posts: 21,336Questions: 26Answers: 4,951

  September 2022

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

  Kevin
• pckamou Posts: 5Questions: 1Answers: 0

  September 2022

  @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 Posts: 5Questions: 1Answers: 0

  September 2022

  @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 Posts: 63,498Questions: 1Answers: 10,471 Site admin

  September 2022

  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