Mouse click search not in all columns

Mouse click search not in all columns

John DowJohn Dow Posts: 16Questions: 6Answers: 0

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>

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 19,864Questions: 26Answers: 4,685
    edited October 2023

    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 DowJohn Dow Posts: 16Questions: 6Answers: 0
    edited October 2023

    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()
            })
          },
          
    
  • kthorngrenkthorngren Posts: 19,864Questions: 26Answers: 4,685
    edited October 2023 Answer ✓

    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 DowJohn Dow Posts: 16Questions: 6Answers: 0

    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()
    
Sign In or Register to comment.