jQuery dataTables-基于原始行数据的自定义过滤

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?

Answer 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

Answer 2

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.