DataTables多列多值筛选：多选框值处理方法问询

Got it, switching a single select to a multiple select for DataTables column filtering is totally doable—let me walk you through the exact steps with code examples that you can drop right into your project.

1. Update the HTML to Use a Multiple Select #

First, modify your existing <select> element to include the multiple attribute. Adding a size attribute will also make it easier for users to see and select multiple options at a glance:

<!-- Replace your single select with this -->
<select id="multiColumnFilter" multiple size="4">
  <option value="">All</option>
  <option value="New York">New York</option>
  <option value="London">London</option>
  <option value="Tokyo">Tokyo</option>
  <option value="Sydney">Sydney</option>
</select>

2. Add a Custom DataTables Filter Function #

DataTables doesn’t handle multi-value filtering out of the box, so we’ll use a custom search filter to handle the array of selected values. Here’s the full implementation:

// Initialize your DataTable first (adjust the selector to match your table)
const myTable = $('#dataTable').DataTable();

// Push a custom search filter into DataTables' search pipeline
$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
  // Get selected values from the multiple select (returns an array)
  const selectedVals = $('#multiColumnFilter').val() || [];

  // If no values are selected, show all rows
  if (selectedVals.length === 0) {
    return true;
  }

  // Get the value from the target column (use 0-based index for your column)
  const columnValue = data[1]; // Example: filtering the 2nd column

  // Check if the column value exists in the selected values array
  return selectedVals.includes(columnValue);
});

// Listen for changes on the multiple select to trigger filtering
$('#multiColumnFilter').on('change', function() {
  myTable.draw(); // Redraw the table to apply the updated filter
});

3. Key Adjustments for Your Use Case #

• Column Index: Make sure data[1] matches the 0-based index of the column you want to filter. For example, if your target column is the 3rd one in the table, use data[2].
• Case Insensitivity: If you need to ignore case when matching values, tweak the comparison:

  return selectedVals.some(val => val.toLowerCase() === columnValue.toLowerCase());
  

• Empty/Null Column Values: If your column has empty or null entries, add a safety check to avoid errors:

  const columnValue = data[1] || '';
  

4. Optional: Clean Up the Filter #

If you need to remove this custom filter later (e.g., when initializing a new table), you can pop it from the search array:

$.fn.dataTable.ext.search.pop();

This setup will let users select multiple values from the dropdown, and DataTables will automatically show only rows where the target column matches any of the selected options.

内容的提问来源于stack exchange，提问作者M.E.