API Callback, cell content to search filter. How to limit to some colums only?

Christian Friebel

Link to test case: http://live.datatables.net/quheleqi/6/edit
Debugger code (debug.datatables.net): an error occurred while uploading data
Error messages shown: no error
Description of problem:
Based on this example: https://datatables.net/examples/api/api_in_init.html I implemented this script into my code.
I like the function of getting cell content into Search box / filter. I have a button in the first row of my table as show here:
<button type="submit" class="btn btn-outline-codangreen btn-sm" formaction="Telephonebook/Request" title="@Localizer["AddRequest"]"><i class="fa-regular fa-user-headset"></i></button>.

The javascript click event prevents the usage of this button. Also, I have phone numbers and email addresses in the list formatted as html link, which should also be not be clickable. Now, the html link will be provided in the Search box / filter.

I tried around with adding classes to the cells, but this did not work

<td class="searchtarget">Lastname</td>
var api = this.api(); api.$('searchtarget').click(function () { api.search(this.innerHTML).draw(); });

Sadly my knowledge about javascript is low, I have no glue how to limit the function to some colums/cells only.

Please advice!

Thank you,
Chris

allan

Hi Chris,

The key is your selector: api.$('td') - you need to have it select only the columns you want - which you might add by setting the columns.className option.

I'd actually suggest you do it like this:

          $('#example').on('click', 'td.clickSearch', function () {
            table.search(this.innerHTML).draw();
          });

outside of the initComplete function. Why? Because this delegated event will allow for any new rows that might be added to the table.

Here is an updated example: http://live.datatables.net/vaferamo/1/edit .

Allan