Ignore HTML tags in the search

slolo · October 29

Link to test case: https://live.datatables.net/lufumimi/1/
Debugger code (debug.datatables.net):
Error messages shown: NA
Description of problem: Hello,

I would like to know how to configure the columns or the search function so that searches are performed only on the text actually displayed within the data table columns.

Please refer to the test case mentioned at the beginning of the message.

For instance, if you look at the "id" column and perform a search; whether via the column header or a global search; you will notice that the search takes into account ALL the characters present in the column's HTML, rather than just the content actually displayed.
In other words, every character within <span class="badge badge-danger p-2 link-id">0000X</span> can trigger a match, instead of just the value 00001.

I am certain that this is possible, because exporting or copying the rows (using the buttons) only preserves the information actually displayed on the screen.

Thank you in advance for your help, and I wish you a pleasant day.

allan · October 29

{type : "string"},

Is wrong. It should be {type : "html"}, to have the filter data type strip out the HTML: https://live.datatables.net/lufumimi/2/edit .

In general, I would strongly recommend not setting the columns.type option. To the point that I regret putting it in as an option! Let DataTables figure out the data type for you, and if it doesn't match, then forcing it to be something else would just result in something unexpected happening (like here).

Allan

slolo · October 30

Hello @allan,

Thank you very much, this is exactly what I need.
And apologies for having overlooked this option. I had seen it before, but I didn’t remember it.

One more question.

You stated the following:

In general, I would strongly recommend not setting the columns.type option.

But how should I initialize my columns array?

Should I set it to "null" everywhere?

// columns parameters
"columns" : [
   {
    "type": null,
    "searchable": false,
    "orderable": false,
    "columnControl": [{"target": 0, "content": []}, {"target": 1, "content": []}],
    "className": "no-col-searchable ..."
  },
  {type : null},//{type : "html"},
  {type : null},//{type : "string"},
  {type : null},//{type : "num"},
  {type : null},//{type : "date"},
  {
    "type": null,
    "searchable": false,
    "orderable": false,
    "columnControl": [{"target": 0, "content": []}, {"target": 1, "content": []}],
    "className": "no-col-searchable ..."
  },
],

Have a great day.

allan · October 30

You can either use null or an empty object:

// columns parameters
"columns" : [
   {
    "searchable": false,
    "orderable": false,
    "columnControl": [{"target": 0, "content": []}, {"target": 1, "content": []}],
    "className": "no-col-searchable ..."
  },
  null,
  null,
  null,
  {}, // alternative
  {
    "searchable": false,
    "orderable": false,
    "columnControl": [{"target": 0, "content": []}, {"target": 1, "content": []}],
    "className": "no-col-searchable ..."
  },
],

Another option is to use columnDefs to target the two columns which do need a configuration object.

Allan

Ignore HTML tags in the search

Ignore HTML tags in the search

Answers