Answers

• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  September 2022

  Can you show me your full Javascript for the table and related code?

  Setting a filter for DataTables is typically done with search() or column().search() - which I don't see any reference to in your above code.

  Allan
• arnorbld Posts: 110Questions: 20Answers: 1

  September 2022

  Hi Alan,

  See below. I also have this problem with a dropdown (select/options) I get the data when I change it and DT reloads, but it's not picking up the value from the dropdown.

  contactsTable = jQuery('#contacts-table')
      .DataTable({
          select: multiSelection,
          responsive: true,
          paging: true,
          pageLength: 10,
          "processing": true,
          "serverSide": true,
          "ajax": {
              "url": DataAjaxURL,
              "type": "POST",
              "data": function (d) {
                  return jQuery.extend({}, d, {
                      "clientID"      : clientID,
                      "vendorNumber"  : vendorNum,
                      "forceFilters"  : forceFilter,
                      "forcedColumns" : forcedColumns
                  });
              },
              "error": function (xhr, error, code) {
                  console.log('AJAX error handler');
                  console.log('XHR:');
                  console.log(xhr);
                  console.log('CODE:');
                  console.log(code);
              },
              "dataSrc": function (json) {
                  return json.data;  // MUST return json.data!
              }
  
          },
          aLengthMenu: [
              [10, 25, 50, 100, 200, -1],
              [10, 25, 50, 100, 200, "All"]
          ],
          responsive: true,
              "columnDefs": [ {
                  "targets": -1,
                  "orderable": false,
                  "searchable" : false,
                  "data": null
              } ],
          columns: [
              { "data": "last_name",     "className": "row-last-name",      "name": "last_name",     "orderable": true},
              { "data": "first_name",    "className": "row-first-name",     "name": "first_name",    "orderable": true},
              { "data": "title",         "className": "row-title",          "name": "title",         "orderable": true},
              { "data": "email_address", "className": "row-email",          "name": "email_address", "orderable": true},
              { "data": "contact_type",  "className": "row-type",           "name": "contact_type",  "orderable": true},
              { "data": "mobile_phone",  "className": "row-cell-phone",     "name": "mobile_phone",  "orderable": true},
              { "data": "office_phone",  "className": "row-office-phone",   "name": "office_phone",  "orderable": true},
              { "data": "vendor_number", "className": "row-vendor-number",  "name": "vendor_number", "orderable": true},
              { "data": "vendor_name",   "className": "row-vendor-name",    "name": "vendor_name",   "orderable": true},
              { "data": "client_id",     "className": "row-client-id",      "name": "client_id",     "orderable": true},
              { "data": "actions",       "className": "row-action-column",  "name": "actions",       "orderable": false},
          ],
          initCompleteX: function() {
              console.log('Contacts Table InitComplete.');
  
  
              var api = this.api();
  
              // For each column
              api
                  .columns()
                  .eq(0)
                  .each(function (colIdx) {
                      if(colIdx === 10){
                          return;  // skip the Button Column
                      }
  
                      // Set the header cell to contain the input element
                      var cell = jQuery('.filter-row th').eq(
                          jQuery(api.column(colIdx).header()).index()
                      );
                      var title = jQuery(cell).text();
  
                      jQuery(cell).html('<input type="text" placeholder="' + title + '" />');
  
                      jQuery(
                          'input',
                          jQuery('.filters th').eq(jQuery(api.column(colIdx).header()).index())
                          )
                          .off('keyup change')
                          .on('keyup change', function (e) {
                              e.stopPropagation();
  
                              // Get the search value
                              jQuery(this).attr('title', jQuery(this).val());
                              var regexr = '({search})'; 
  
                              // Search the column for that value
                              api
                                  .column(colIdx)
                                  .search(
                                      this.value != ''
                                          ? regexr.replace('{search}', '(((' + this.value + ')))')
                                          : '',
                                      this.value != '',
                                      this.value == ''
                                  )
                                  .draw();
                          });
                  });
              contactsTable.ajax.reload();
  
          },
          initComplete: function() {
              if (showFilters === true) {
                  this.api()
                      .columns()
                      .every(function () {
                          var that = this;
                          $('input', this.footer()).on('keyup change clear', function () {
                              if (that.search() !== this.value) {
                                  that.search(this.value).draw();
                                  contactsTable.ajax.reload();
                              }
                          });
                      });
              }
          },
  
          "drawCallback": function(settings){
          },
          "rowCallback": function (row, data, index){
          }
  
      });
  

  Best regards,
• kthorngren Posts: 20,425Questions: 26Answers: 4,794

  September 2022

  Are you saying that this isn't working?

              "data": function (d) {
                  return jQuery.extend({}, d, {
                      "clientID"      : clientID,
                      "vendorNumber"  : vendorNum,
                      "forceFilters"  : forceFilter,
                      "forcedColumns" : forcedColumns
                  });
  

  Since you are using variables you need to make sure they are available in the scope you are accessing them. Are these global variables? Maybe you can get the values directly from inputs like this example.

  Kevin
• arnorbld Posts: 110Questions: 20Answers: 1

  September 2022

  ```Hi Kevin,

  No, that part is working perfectly. Please see below - I don't think I've explained this very well Below is a screenshot of the list. It is being loaded into a jQuery DIALOG where users can select contacts for adding to emails.

  

  One thing to note is that the filter row (and the whole table structure) is created in PHP and passed into the jQuery dialog code via AJAX. The data is then loaded via server-side AJAX.

  See the attached screenshot of the table in question. What I need to do under certain circumstances I need to populate some of the filter entries at the top with values, like in the screenshot, where the Client ID is populated with "A1"

  I created a workaround where I pass that filter value in the clientID property in the code you quoted so I can filter it in the PHP code when the list is first loaded. But if I for example re-sort the list (even if there is just one entry) then the "A1" filter from the INPUT is ignored, like it's not there.

  I also wanted to add a drop down (SELECT/OPTION) on the Type filter, but even if the drop down is selected and I get the Change event and then reload the table the value from the select is ignored.

  What I need to do is be able to prime those filter input fields so the list filters on them when it loads. The user can change the filter, but as it is, as soon as anything happens that causes a reload of the data, the "Client ID" field value does not come back to PHP via the ajax call. There is no problem entering a value and it filters perfectly and works perfectly. It is only in the case where I need to kind of "pre-set" the filter to a certain value that it isn't working.

  This is the input HTML:

  <input id="client_id-input" type="text" placeholder="Client ID">
  

  If I use:

  jQuery('#client_id-input').val(clientID);
  

  to fill that input field, then DataTable is NOT sending that value when reloads the data via AJAX. If I use console.log() to show the clientID when I set the input with it, it holds "A1" and the value does show in the input field. But what I get back in PHP when the list is reloaded (for example by changing the sort order) is:

          {
              "data": "client_id",
              "name": "client_id",
              "searchable": "true",
              "orderable": "true",
              "search": {
                  "value": "",
                  "regex": "false"
              }
          }
  

  The search.value is still blank even with "A1" in the input field.

  Without attempting to pre-set the filters, this works perfectly. I can type in the Client ID filter and it filters 100% correctly. This is only an issue if I use jQuery to manually set the value of the input field and then reload the list - the manually set values are never passed over via the AJAX to PHP.

  Hope this makes sense.

  Best regards,
• kthorngren Posts: 20,425Questions: 26Answers: 4,794

  September 2022

  Sorry I'm not following your code flow so these answers might not help.

  filter from the INPUT is ignored, like it's not there.

  Instead of using variables use get the input value for the ajax.data option. Like the example I linked.

  It is only in the case where I need to kind of "pre-set" the filter to a certain value that it isn't working.

  Sounds like this is something you are attempting to do before Datatables is initialized, correct?

  to fill that input field, then DataTable is NOT sending that value when reloads the data via AJAX.

  Again I think you need to get the input value instead of using variables.

  Can you post a link to your page or a test case replicating the issues so we can take a look to help debug?
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• arnorbld Posts: 110Questions: 20Answers: 1

  September 2022

  Hi Kevin,

  Unfortunately, I can't post a link as this is only on a local development server. But once I can breathe I'll see if I can create an example. I think there is something very simple missing and I'm just not seeing it.

  I probably won't get back to this until later this month - we're going on a trip to Ireland Saturday and we just sold our house so we will be busy moving once we get back! But I will try and cook something up and see if I can duplicate this issue in a simpler setting!

  Best regards,