Come ignoro HTML quando si filtra una tabella di dati jQuery?

Question

Sto usando il jQuery DataTables plugin e ho un leggero problema con la funzione di filtro in esso. Se ho una cella di tabella con contenuto come <a href='foo6'>Blah</a> e filtro per "6", quella cella verrà visualizzata, anche se non c'è "6" in "Blah". Quello che mi piacerebbe fare è che il plug-in DataTables ignori l'HTML quando fa il suo filtraggio.

Ho provato a setacciare il sito DataTables e ho trovato lead in conflitto e non utili. Un post suggeriva di aver bisogno di un'opzione sType:'html' nella definizione delle mie aaColumns, ma l'ho provato e non è stato d'aiuto ... più un post successivo suggeriva che la versione corrente di DataTables rileva automaticamente lo sType HTML. Ho anche trovato questo snippet di codice:

// 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," "); 
    } 
}; 

che doveva risolvere le cose ... ma non è stato.

Quindi, la mia domanda è: qualcuno di fuori sa come rendere DataTables ignora il contenuto non di testo (ad esempio HTML) quando filtra le righe?

Answer 1

Si è scoperto che mi serviva una funzione personalizzata mRender sulle intestazioni delle colonne. Ancora più importante (dal momento che ho provato questo in un primo momento senza controllare l'argomento "tipo") è necessario utilizzare l'argomento type fornito a quella funzione per renderlo applicabile solo durante il filtraggio.

mio risultato finale sembrava qualcosa di simile:

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

Si può provare questo:

$.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

Basta aggiornare il tuo datatable.js .. Ho usato 1.9.4 e ottenuto lo stesso problema dopo l'aggiornamento a 1.10.9 il problema risolto ..