Answers

• pgerundt Posts: 90Questions: 13Answers: 2

  June 2022 Answer ✓

  Awww, snap, maximum confusion. This is a duplicate of
  https://datatables.net/forums/discussion/72236/infinite-draw-loop-when-having-dt-rowid-in-ajax-response#latest
• pgerundt Posts: 90Questions: 13Answers: 2

  June 2022

  Hi @allan and @colin,

  I was working again on that topic and suddenly a general question came up:
  Is SearchPanes capable of custom search panes
  (such as https://datatables.net/extensions/searchpanes/examples/customFiltering/customPane.html)
  when running in serverSide: true mode?

  Even if the options[x].value function works and shows the filter options with count and total,
  will selecting a filter option make SearchPanes filter the rows returned by the Ajax call (data) ?

  My guess is "no", because the returned searchPanes.options would also have to be altered (count and total).
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  June 2022 Answer ✓

  Hi Pascal,

  You are absolutely correct. A custom pane would require hooks for logic and conditions on the server-side which I'm afraid the libraries do not provide at this time.

  Allan
• pgerundt Posts: 90Questions: 13Answers: 2

  June 2022

  Hi @allan,

  thanks for the quick answer.

  For everyone struggeling to build a filter for selected rows in serverSide: true mode, here is a working solution:

  1) Add an <input id="selectedIds" type="hidden" value="[ids from database as JSON array]"> to your website storing the ids of the selected rows
  2) init DataTables with selected ids added to the data option:

  ajax: {
    url: '[your serverside url]',
    data: function(data) {
      data = jQuery.extend(data, {selectedIds: JSON.parse(jQuery('input#selectedIds').val())})
    }
  }
  

  3) modify your serverside script to use the request variable selectedIds for filtering returned rows and search panes options
  4) add an select/deselect event handler to add/remove ids from the hidden input:

  tableElement.on('select.dt deselect.dt', function(event, dt, type, indexes) {
    var DataTableApi = tableElement.dataTable().api();
    var data = DataTableApi.row(indexes).data();
    var ids = JSON.parse(jQuery('input#selectedIds').val());
    if(data) {
      switch(event.type) {
        case 'select':
          if(ids.indexOf(data['DT_RowId']) === -1) {
            ids.push(data['DT_RowId']);
            jQuery('input#selectedIds').val(JSON.stringify(ids));
            DataTableApi.ajax.reload();
          }
          break;
        case 'deselect':
          if(ids.indexOf(data['DT_RowId']) !== -1) {
            ids.splice(ids.indexOf(data['DT_RowId']), 1);
            jQuery('input#selectedIds').val(JSON.stringify(ids));
            DataTableApi.ajax.reload();
          }
          break;
      }
    }
    event.stopPropagation();
  });
  

  5) add an draw event handler to prevent selected rows to be unselected after using the search panes filter:

  tableElement.on('draw.dt', function(event) {
    var DataTableApi = tableElement.dataTable().api();
    var ids = JSON.parse(jQuery('input#selectedIds').val());
    DataTableApi.rows().every(function() {
      var data = this.data();
      if(data) {
        if(jQuery.inArray(data['id'], ids) > -1) {
          this.select();
        }
      }
    });
    event.stopPropagation();
  });
  

  Hope that helps!
  Pascal