there is a way to clear search parameter i'm using Rails

Basit khan

$('.js-users-table').dataTable({
serverSide: true,
bLengthChange: false,
bInfo: false,
ajax: $('.js-users-table').data('source'),
order: [[ 5, 'desc' ]],
columns: [
{
data: 'name',
render: function (data, type, row, meta) {
return '<a href="/admin/users/' + row.id + '/edit">' + data + '</a>';
}
},
{
data: 'email',
render: function (data, type, row, meta) {
return '<span class="u-text-break-word">' + data + '</span>'
}
},
{
data: 'location'
},
{
data: 'projects',
sortable: false
},
{
data: 'lastlogin',
render: function (data, type, row, meta) {
return moment(data).isValid() ? moment(data).format("DD/MM/YY") : 'Never';
}
},
{
data: 'created_at',
render: function (data, type, row, meta) {
return moment(data).format("DD/MM/YY");
}
},
{
data: 'project_subscription_data'
},
{
data: 'business_subscription_data',
// visible: false
},
{
data: null,
sortable: false,
render: function (data, type, row, meta) {
return '<a class="tooltip" title="Edit" href="/admin/users/' + row.id + '/edit"><%= image_tag("icons/pencil.svg", class: "icon icon--dark icon--small") %></a>' + (data.role === 'superadmin' ? '<a class="tooltip" title="Delete" rel="nofollow" data-method="delete" href="/admin/users/' + row.id + '" data-confirm="Are you sure?"><%= image_tag("icons/trash.svg", class: "icon icon--dark icon--small") %></a> ' : '') + (row.disabled ? '<a class="tooltip" title="Enable" data-method="put" href="/admin/users/' + row.id + '/enable"><%= image_tag("icons/verified.svg", class: "icon icon--dark icon--small") %></a>' : '<a class="tooltip" title="Disable" data-method="put" href="/admin/users/' + row.id + '/disable"><%= image_tag("icons/close-small.svg", class: "icon icon--dark icon--small") %></a>');
}
},
],
dom: "ritp",
pageLength: 30,
initComplete: function() {
var table = this;

 // Select project Subscription filters
$('.js-select-filters1').each(function () {
var $filterSelect = $(this);
var columnIndex = +$filterSelect.data('column');
var column = table.api().column(columnIndex);
console.log(column,'column');
// Filter the column when the user picks an option
$filterSelect.on('change', function() {
  var val = $.fn.dataTable.util.escapeRegex($filterSelect.val());
  console.log(val,'val before');
  val = val+"Project" 
  console.log(val,'val after');
  column.search(val ? val : '', false, false).draw();
  setTimeout(() => {
    val = $filterSelect.val()
    console.log(val,'val after settimeout');
  }, 2000);
});

});

// Select Business Subscription filters
$('.js-select-filters2').each(function () {
  var $filterSelect = $(this);
  var columnIndex = +$filterSelect.data('column');
  var column = table.api().column(columnIndex);
  console.log(column,'column');
  // Filter the column when the user picks an option
  $filterSelect.on('change', function() {
    var val = $.fn.dataTable.util.escapeRegex($filterSelect.val());
    val = val+"My Business" 
    console.log(val,'val');
    column.search(val ? val : '', false, false).draw();
    setTimeout(() => {
      val = $filterSelect.val()
      console.log('my sec settie');
    }, 2000);
  });

});

// Select filters
$('.js-select-filter').each(function () {
  var $filterSelect = $(this);
  var columnIndex = +$filterSelect.data('column');
  var column = table.api().column(columnIndex);

  // Filter the column when the user picks an option
  $filterSelect.on('change', function() {
    var val = $.fn.dataTable.util.escapeRegex($filterSelect.val());
    column.search(val ? val : '', false, false).draw();
  });

  // Add all possible options to the select
  $filterSelect.append('<option value="">' + column.header().innerHTML + '</option>');

  var entries = column.data().unique().sort().map( function (d, j) {
    if (d === null) { return };

    if (typeof d === 'object' && !d.length) {
      return d.name;
    } else {
      return d;
    }
  });

  // undefined is falsey so filtering false values works to remove undefined
  entries = _.uniq(_.flattenDeep(entries)).filter(function(value) { return value !== undefined });

  entries.forEach(function(entry) {
    $filterSelect.append('<option value="' + entry + '">' + entry + '</option>');
  });
});

// Text filters
$('.js-text-filter').each(function() {
  var $filterInput = $(this);
  var columnIndex = +$filterInput.data('column');
  var column = table.api().column(columnIndex);

  $filterInput.on('keyup change', function() {
    if (column.search() !== this.value) {
      column.search(this.value).draw();
    }
  }); // filterInput
}); // js-text-filter

} // initComplete
});

Basit khan

i need a quick help kindly if you guyz can.

i have two different select Tags i'm calling these selectors uisng jquery on change method.

when i try to filter first one it's work fine on page reload
when i try to filter second one it's work fine on page reload

but when i filter first one either it''s project OR business the second one not working correctly.

the reason why it's not working because it's taking all the search values of the table but i don't want these value everytime.

i just wan't to clear search value everytime after search if there is way to do this please help me i'm stuck.

kthorngren

Using an empty string as the search parameter will clear the search parameter sent with server side processing. This applies to both api search() and column().search(). For example:

table.column( 1 ).search( "" );

This will clear the search for column 1 and on the next draw() the ajax request will be sent to the server. This won't change the values in the column search inputs so you will need to handle those appropriately.

Kevin