Mouse click search not in all columns

John Dow

How can I exclude some columns from this function? Some of my columns are rendered in HTML links and the link is sent to the search bar
My column render:

      {
        data: 'telephoneNumber',
        title: 'Телефон',
        defaultContent: '',
        className: 'my_cells',
        render(data) {
          return `<a href=tel:${data}>${data}</a>`
        },
      },

and this is transferred to the search string

<a href="tel:441059">441059</a>

kthorngren

The example you linked to has this code:

    initComplete: function () {
        var api = this.api();
 
        api.$('td').on('click', function () {
            api.search(this.innerHTML).draw();
        });
    }

Change the selector used to apply the click event to exclude the appropriate columns. Something like this:

api.$('td:not(.my_cells)').on('click', function () {

Kevin

John Dow

Kevin, I may have misunderstood you. Here are my settings, simply inserting column names does not produce any result. Data from ajax

columns: [
      { title: '№', defaultContent: '' },
      { data: 'cn', title: 'Employer', defaultContent: '' },
      { data: 'company', title: 'Company', defaultContent: '' },
      { data: 'physicalDeliveryOfficeName', title: 'Office', defaultContent: '' },
      { data: 'streetAddress', title: 'Address', defaultContent: '' },
      { data: 'department', title: 'Department', defaultContent: '' },
      { data: 'title', title: 'Title', defaultContent: '' },
      {
        data: 'ipPhone',
        title: 'Phone IP',
        defaultContent: '',
        className: 'my_cells',
        render(data) {
          return `<a href=tel:${data}>${data}</a>`
        },
      ],
      
      initComplete: function () {
        var api = this.api()

        api.$('td:not(.ipPhone, .department)').on('click', function () {
          api.search(this.innerHTML).draw()
        })
      },
      

kthorngren

The `` is a jQuery selector which does not know anything about the Datatables attributes like columns.data or columns.title. You can use a class name or an index with :eq(). See the jQuery selector docs for more optinos.

Kevin

John Dow

Kevin, thanks for the help and pointing out the path to finding a solution! As you can see, on the cells I need, I use the class = my_cells (centering the text vertically and horizontally) and based on this, with your help, I got the working solution I needed

      api.$('td').not('.my_cells').on('click', function () {
        api.search(this.innerHTML).draw()