Jquery DataTables - column filtering with multiple elements in td

Question

Using jquery datatables I want to filter a column which can contain multiple values in a single td.

I followed the datables link

In below picture I want to filter the office column and as you can see one td containsstrong text two values: "Edinburgh" and "New York". Even though the names appear in the filter they don't return a value once selected. For the single elements it is working fine.

So in below example my expected result would be to filter for New York and have a single row returned (including the text of "Edinburgh").

I've created a sample fiddle

$(document).ready(function() {
    $('#example').DataTable( {
        initComplete: function () {
  this.api().columns('.dt-filter').every(function () {
var column = this;
var select = $('<select class="form-control" tabindex="-1" aria-hidden="true" style="max-width:200px"><option></option></select>')
    .appendTo($("#filters").find("th").eq(column.index()))
  .on('change', function () {
  var val = $.fn.dataTable.util.escapeRegex(
  $(this).val());
  column.search(val ? '^' + val + '$' : '', true, false).draw();});

                column.data().unique().sort().each( function ( d, j ) {
        if (d.indexOf("<p>") >= 0) {
                            var b = d;
                                $(b).each(function (index) {
                        var text = $(this).text();
                    select.append('<option value="' + text.trim() + '">' + text.trim() + '</option>')
                    });
                }
                  .....

Is it possible to have multiple values in one column in order to filter by a value?

BTW I just use the p-Element for testing, I don't mind the "li" element or something else.

nashcheez · Accepted Answer · 2016-07-12 09:00:38Z

Instead of column.search(val ? '^' + val + '$' : '', true, false).draw();});, just use column.search(val).draw();});

Should search you table rows with multiple strings.

So the overall code becomes as follows:

$(document).ready(function() {
$('#example').DataTable({
initComplete: function() {
  this.api().columns('.dt-filter').every(function() {
    var column = this;
    var select = $('<select class="form-control" tabindex="-1" aria-hidden="true" style="max-width:200px"><option></option></select>')
      .appendTo($("#filters").find("th").eq(column.index()))
      .on('change', function() {
        var val = $.fn.dataTable.util.escapeRegex(
          $(this).val());
        column.search(val).draw();
      });

    column.data().unique().sort().each(function(d, j) {
      if (d.indexOf("<p>") >= 0) {
        var b = d;
        $(b).each(function(index) {
          var text = $(this).text();
          select.append('<option value="' + text.trim() + '">' + text.trim() + '</option>')
        });
      }
    });
  });
}
});
});

score 0 · Accepted Answer · 2019-03-12 08:39:20Z

To do exact match of one column against multiple criteria, I would recommend external search plugin $.fn.DataTable.ext.search.

That is array where you may push your custom function that iterates over table rows and should return true if the row is matching your criteria (supplied from external variable) and false otherwise.

In general this logic is implemented by this DataTable plug-in. It solves your exact problem, though data-specific processing of other datatypes (numbers, dates) is yet to come.

Your given example may look like:

var srcData = [
  {name: 'Bruce Wayne', office: 'Gotham', position: 'CEO'},
  {name: 'Clark Kent', office: 'Metropolis', position: 'Journalist'},
  {name: 'Arthur Curry', office: 'Atlantis', position: 'Diver'},
  {name: 'Barry Allen', office: 'Central City', position: 'Forensics expert'},
  {name: 'Diana Prince', office: 'Themyscira', position: 'Art Consultant'}
];

$('#mytable').DataTable({
  sDom: 'tF',
  data: srcData,
  columns: [
    {title: 'Name', data: 'name'},
    {title: 'Office', data: 'office'},
    {title: 'Position', data: 'position'},
  ]
});

<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script type="application/javascript" src="https://cdn.mfilter.tk/js/mfilter.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.mfilter.tk/css/mfilter.min.css">
</head>
<body>
<table id="mytable"></table>
</body>

Collectives™ on Stack Overflow

Jquery DataTables - column filtering with multiple elements in td

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related