jQuery dataTables - Custom Filtering Based On Original Row Data

Question

JSBin: http://live.datatables.net/nujehixu/3/edit?js,console,output

$(document).ready( function () {

  // push our custom filter onto the stack of filters
  $.fn.dataTable.ext.search.push(function(settings, searchData, index, rowData, counter) {
    // get filter value
    var value = $("#example_filter > label > input").val().toLowerCase();
    // check filter value against original row data
    var original = rowData[1].toLowerCase();
    console.log(original);
    return original.indexOf(value) > -1;
  });

  function addEllipsis(original, charLimit) {
    if (original.length > charLimit) {
      // substring the original and add ellipsis with a title attribute of the original
      return '<div title="' + original + '">' + original.substr(0, charLimit) + '&hellip;' + '</div>';
    }
    // return the original value since it is already short enough
    return '<div title="' + original + '">' + original + '</div>';
  }

  var table = $('#example').DataTable({
    columnDefs: [
      {
        targets: 1,
        render: function (data, type, row) {
          // render with ellipsis if necessary
          return addEllipsis(data, 6);
        }
      }
    ]
  });
} );

Check out the linked example, I'm trying to use a custom filter based on the original row data, but the issue surfaces when entering a filter value like systems. The rows with Systems Administrator are filtered out when I would expect systems to match 'Systems Administrator' and show those rows.

Reading through the source, it looks like there is a global filter applied first against a search string, which is compiled from the rendered values.

Has anyone found a solution for this?

@OlaviSau, I mean that I would expect systems to match Systems Administrator and show that row, this is not the case. I'll edit to make that more clear. — Jay Taggart
– Jay Taggart, Commented Nov 2, 2015 at 23:00
@JayTaggart - Have edited the code into the question. You should really include some code in a question, especially when the question is about some specific code not working. A link does not help future visitors to recognise the problem and no one can be sure that your link will persists or expire in 3 days, 3 months or 3 years. — davidkonrad
– davidkonrad, Commented Nov 3, 2015 at 5:09

davidkonrad · Accepted Answer · 2015-11-05 07:05:01Z

1

Your problem is that the default search still is performed, and by that it cannot find any matches to "systems" since the values of the columns is rendered to "system...". You can do it like this :

$("#example_filter > label > input").unbind().bind('keyup', function() {
  var value = this.value.toLowerCase();
  // push our custom filter onto the stack of filters
  $.fn.dataTable.ext.search.push(function(settings, searchData, index, rowData, counter) {
    // get filter value
    // check filter value against original row data
    var original = rowData[1].toLowerCase();
    console.log(original);
    return original.indexOf(value) > -1; 
  });
  table.draw();
  $.fn.dataTable.ext.search.pop();
})

altered code -> http://live.datatables.net/dalesexe/4/edit

A better answer is to return different values from render() based on type that can be _, filter or display. On display return the ellipsied' value, otherwise return the original value. By that you can skip the custom filter entirely :

render: function (data, type, row) {
             switch (type) {
               case 'display' : 
                 return addEllipsis(data, 6); break;
               default :
                 return data; break;  
             }             
        }

new code -> http://live.datatables.net/dalesexe/6/edit

edited Nov 5, 2015 at 7:05

answered Nov 3, 2015 at 5:02

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jay Taggart Over a year ago

The problem with this is that you lose all filtering except for the specific cases you code. For example, if you want to search for a specific name, you would have to code in some logic to check rowData[0]. Ideally, I would like to keep default behavior and augment it with my logic.

Jay Taggart Over a year ago

I'm going to upvote this as it does solve the immediate problem, but I would still like to see if there is a better answer. If I don't have anything better in 24 hours, I'll mark this as the answer.

davidkonrad Over a year ago

@JayTaggart - see update, there is a better answer, or at least better solution - I was just focusing on getting your custom filter to work.

Olavi Sau · Accepted Answer · 2015-11-02 23:05:31Z

0

The issue is that your charlimit cuts the characters and your matching with the displayed data not the original data. Basically systems can't be found because system is the maximum length.

answered Nov 2, 2015 at 23:05

Olavi Sau

1,63913 silver badges21 bronze badges

4 Comments

Jay Taggart Over a year ago

If you look at my function though, I look at the original data and it is Systems Administrator. I've updated to include a console.log

Olavi Sau Over a year ago

I tried adding +1 to the substring and it worked then :O

Olavi Sau Over a year ago

Where does the rowdata come from?

Jay Taggart Over a year ago

rowData is being passed in via datatables and corresponds to the original data for the row, not the rendered data.

Collectives™ on Stack Overflow

jQuery dataTables - Custom Filtering Based On Original Row Data

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related