Answers

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

  May 2023

  Hi Tony,

  I'm not clear on how this will be used with DataTables. Do you want to show that information in a DataTable? What is the Select you mention. Is that a <select> element inside Editor?

  Allan
• westtown Posts: 6Questions: 2Answers: 0

  May 2023 edited May 2023

  Hi Allan,

  I have a Column Select, but it's located above the table - code shown below. This Select is working fine, on a column with a single data item (which may or may not exist).
  However, I want to upgrade this select, so that it handles data which is an array of json objects.

  The current data looks like this:

   _clubs: {
        id: 202,
        created_at: 1618941193000,
        ClubName: 'Hull City',
        countries_id: 0
      },
  

  This is the DT API that builds the select for the current data.

   this.api()
      .columns(3)
      .every(function () {
          var column = this;
          var select = $('<select class="form-select"><option value="">Select Club</option></select>')
              
              //  .appendTo($(column.footer()).empty())
             .appendTo($("#selectClub"))
              .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 data coming in is now in a JSON array of objects, because the user could have zero, one or many clubs. It looks like this:

  clubs: Array(2) [ {…}, {…} ]
  ​​​​
  0: Object { clubs_id: 202, _clubs: {…} }
  ​​​​​
      _clubs: Object { id: 202, ClubName: "Hull City", countries_id: 0 }
      
      
  1: Object { clubs_id: 200, _clubs: {…} }
  ​​​​​
      _clubs: Object { id: 200, ClubName: "Leeds United", countries_id: 0 }
  ​​​​​​
  

  My question was: how to enhance the current code, so as to the unique values from this column, into a select.

  Many thanks,
  Tony
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  May 2023

  Use column().index(), in an if statement, to check for the column that you want to process the select list differently. For example:

      // Process column 0 differently
      if ( column.index() === 0 ) {
          // Code to extract data from object
      } else {
        column.data().unique().sort().each(function(d, j) {
          select.append('<option value="' + d + '">' + d + '</option>');
        });
      }
  

  You might need to use Orthogonal data to set the filter value to match what you place in the select list.

  If you need help with this then please build a simple example that has a sample of your data and provide specific details of how you want the select list built.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin