Wie ignoriere ich HTML beim Filtern einer jQuery Datentabelle?

Question

Ich benutze die jQuery DataTables plugin, und ein kleines Problem mit der Filterfunktion darin. Wenn ich eine Tabellenzelle mit Inhalt wie <a href='foo6'>Blah</a> habe, und ich filtere nach "6", wird diese Zelle angezeigt, obwohl es in "Blah" keine "6" gibt. Was ich tun möchte, ist, dass das DataTables-Plug-in HTML beim Filtern ignoriert.

Ich habe versucht, die DataTables-Website zu durchsuchen und widersprüchliche, nicht hilfreiche Leads gefunden. Ein Beitrag vorgeschlagen, dass ich eine sType:'html' Option in der Definition meiner aaColumns benötigt, aber ich habe versucht, und es hat nicht geholfen ... und ein späterer Beitrag vorgeschlagen, dass die aktuelle Version von DataTables automatisch die HTML-sType erkennt. Ich fand auch den Code-Schnipsel:

// Make filtering ignore HTML (see http://datatables.net/plug-ins/filtering) 
$.fn.dataTableExt.ofnSearch['html'] = function (sData) { 
    var n = document.createElement('div'); 
    n.innerHTML = sData; 
    if (n.textContent) { 
     return n.textContent.replace(/\n/g," "); 
    } else { 
     return n.innerText.replace(/\n/g," "); 
    } 
}; 

die Dinge beheben sollte ... aber es kam nicht.

Also meine Frage ist: weiß jemand da draußen DataTables zu ignorieren Nicht-Text (dh HTML) Inhalt beim Filtern Zeilen?

Answer 1

Es stellte sich heraus, dass ich eine benutzerdefinierte mRender Funktion auf meiner Spaltenüberschriften benötigt. Noch wichtiger (da ich dies zuerst versucht habe, ohne das Argument "type" zu überprüfen), müssen Sie das Argument type verwenden, das für diese Funktion bereitgestellt wird, damit es nur beim Filtern angewendet wird.

Mein sah Endergebnis etwas wie folgt aus:

aaHeaders: [{ 
    mRender: function(data, type, full) { 
     // If we're filtering, don't look at the HTML; only filter on the text 
     return type == 'filter' ? $(data).text() : data 
    } 
}], //... 

Answer 2

Sie können dieses versuchen:

$.fn.dataTableExt.ofnSearch['html'] = function (sData) { 
    return $("<div/>").html(sData).text(); 
} 

Answer 3

// To override basic search functionality of datatable 
      $.fn.dataTable.ext.search.push(
        function(settings, data, dataIndex) { 
         var tableId = settings['sTableId']; 
         var searchTerm = settings.oPreviousSearch.sSearch; 
         if ('tableId' == tableId){ 
//I added tableId condition as I have multiple table on same page.. 
          if(data[0].indexOf(searchTerm) > -1 ||data[2].indexOf(searchTerm) > -1||data[3].indexOf(searchTerm) > -1||data[4].indexOf(searchTerm) > -1||data[5].indexOf(searchTerm) > -1 || data[6].indexOf(searchTerm) > -1){ 
           return true; 
          }else{ 
           return false; 
          } 
         } 
         return true; 
        } 
      ); 

Answer 4

einfach Ihre datatable.js Upgrade .. Ich habe 1.9.4 verwendet und bekam das gleiche Problem nach dem 1.10.9 Upgrade das Problem behoben ..