CODEWITHSUNDEEP
jquerydatatables
David
David

Reputation: 6111

Apply Search to Multiple Columns

I am using DataTables version 1.10.16 and I currently have a datatable initialized as such:

// Setup the emails datatable
var auto_responders = $('#auto_responders').DataTable({
  ajax: {
    url: "assets/php/get_auto_responders.php",
    dataSrc: ''
  },
  columns: [
    { data: 'user_first_name', title: 'User Name', createdCell:
  function (td, cellData, rowData, row, col) {
  $(td).text(cellData + ' ' + rowData['user_last_name']);
}
},
    { data: 'user_last_name', visible: false},
    { data: 'customer_first_name', title: 'Customer Name', createdCell:
  function (td, cellData, rowData, row, col) {
  $(td).text(cellData + ' ' + rowData['customer_last_name']);
}
},
    { data: 'customer_last_name', visible: false},
    { data: 'email', title: 'Email', createdCell:
  function (td, cellData, rowData, row, col) {
  $(td).html('<a href="mailto:' + cellData + '">' + cellData + '</a>');
}
},
    { data: 'customer_id', searchable: false, visible: false },
    { data: 'date_entered', title: 'Date Entered' },
    { data: 'title', title: 'Auto-Responder' },
    { data: 'queued_ids', title: 'Upcoming Responders', searchable: false, createdCell:
      function (td, cellData, rowData, row, col) {
        if (!cellData) {
    $(td).html('<span class="text-danger text-center d-block">No Automatic Responders Queued</span>');
  } else {
    $(td).html('<button type="button" class="btn btn-block btn-outline-success queued_auto_responders" data-queued-ids="' + cellData + '" data-toggle="modal" data-target="#modal_queued_responders">View Queued Automatic Responders</button>');
  }
      }
    }
  ]
});

As you can tell, I'm combining the first two (user's first and last name) and then next two columns (customer's first and last name) when they're displayed, but I'm setting the respective last name columns' visibility to false.

To create a dropdown filter for the person on the webpage to quickly view all rows for a particular user I have the following code:

auto_responders.columns([0, 1]).search(filter).draw();

Where the value filter equals that of the full name of a user. My issue is that I thought by specifying the first two columns that it'd try to match the name in the filter to the first and last name of the user, but when I try to use that code, no rows are returned. How can I get it to where it returns the row based on where the first and second column both contain at least a portion of the filter?

Upvotes: 1

Views: 221

Answers (1)

hawkstrider
hawkstrider

Reputation: 4341

You can do custom search filtering with the search api in datatables

$.fn.dataTable.ext.search

Example here Custom Filtering

Upvotes: 2

Related Questions