0
votes

In my project I've created a dataTable, Everything is working fine except one particular case.

While performing searching, my datatable is also searching the text inside the href with in the anchor tag. But i don’t want to consider this case.

http://datatables.net/examples/advanced_init/html_sort.html

EDIT:

i know if i use sType="html" and version(v 1.9.0) as suggested by DataTable 1.9.3 searching issue - prevent Data Table from considering href value - it is resolved

but i want custom sorting by dataTables sorting plug-in that column, so is it possible to use sType="html" which will strip HTML tags from a search string, and my custom sorting plugin together, is it possible to have multiple sType defined for one column's sType?

consider this link, it use dataTables sorting plug-in for sorting,

http://datatables.net/release-datatables/examples/plug-ins/sorting_sType.html

in that example how can i use sType="html" so my datatable do not search the text inside the href with in the anchor tag.

Hope you understood my issue. Any help will be much appreciated.

I'm using version DataTable 1.9.4 because in lower version i got error regarding dataTables sorting plug-in.

1

1 Answers

2
votes

DataTables has a built in type called 'html' which will strip HTML tags from a search string, but it doesn't cope with nested HTML inside another element's attributes. You can do this like this:

    var oTable = $('#example').dataTable({
        "aoColumns": [
            "sType": "html", //here the first column is of type 'html'
            null //auto detect data type for second column
        ]
    });

You can also use column type based filtering plug in. This plug-in function overrules the built-in method and provides complete HTML tag removal. Note that this function is not included in DataTables by default because it is slightly slower than the built-in method, which is good enough for by far the majority of use cases.

Ho to do it:

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

As I can see with your code, using the first option (see exact code below) will be just fine.

$('#example').dataTable({
  "aoColumns": [null,{"sType":"html"}]
});