Individual Column Search not working when i apply edit and delete buttons in each row

Sergio Protech

$('#myTable tfoot th').each( function ()
{
var title = $(this).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
});

  var dataTable = $('#myTable').DataTable(
  {
      "paging":true, 
      "processing" : false,
      "serverSide" : false,
      "ordering": true,
      "order" : [],
      "ajax" : 
      {
          url:"readFunction.php",
          type:"POST",
          dataSrc: function(data) 
          {
              return data.data.items;
          },
          complete: function(json)
          {
              // console.log(json);
          },

      },
      "columns": 
      [
          { "data": "id" },
          { "data": "emri" },
          { "data": "mbiemri" },
          { "data": null ,
            render:function (data, type, row) 
            {
              return `<button type="button" name="update" id="${data.id}" class="btn btn-primary btn-sm update">Edit</button>`; 
            },
          },

          { "data": null ,
            render:function (data, type, row) 
            {
              return `<button type="button" name="delete" id="${data.id}" class="btn btn-danger btn-sm delete">Delete</button>`; 
            },
          },

      ],

  });

//apply search for each column funtion
dataTable.columns().every( function () 
{
    var that = this;
    $( 'input', this.footer() ).on( 'keyup change', function () 
    {
        that
            .search( this.value )
            .draw();
    });
});

SO WHAT I AM TRYING TO DO IS TO MAKE THAT WORK. EACH TIME I REMOVE THE BUTTONS IT WORKS PROPERLY BUT WHENEVER I ADD THEM IT STOPS WORKING. ANY HELP WOULD BE GRATEFUL

kthorngren

WHENEVER I ADD THEM IT STOPS WORKING

What happens?

Do you get errors in the browser's console?

Please provide a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Sergio Protech

I do not get errors in the console. SO this is what happens. If from my table i remove the columns called Edit And Delete which will stand for the buttons on the rows, and remove this part too, which i used to add the buttons
{ "data": null ,
render:function (data, type, row)
{
return <button type="button" name="update" id="${data.id}" class="btn btn-primary btn-sm update">Edit</button>;
},
},

      { "data": null ,
        render:function (data, type, row)
        {
          return `<button type="button" name="delete" id="${data.id}" class="btn btn-danger btn-sm delete">Delete</button>`;
        },
      },

individual and column search work perfectly fine, but if i add them it doesnt work anymore. The script is client side

Sergio Protech

I do not get errors in the console. Reminder that i am fetching the data of the database table with a php file in the ajax call of the function.

Another reminder: Buttons works perfectly fine if added
I do not know if i am able to provide the test case you are asking for. If code images would work to you i can send them too.

Sergio Protech

Sergio Protech

NOW IF I REMOVE THE BUTTONS

It works and i do not understand the reason behind all this. I am stuck for days at this

kthorngren

Its difficult to debug code snippets and screenshots. For help debugging your code please provide a link to your page or a running test case showing the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Here is an ajax loaded Datatable example you can start from:
http://live.datatables.net/ajax-objects/1/edit

Kevin

Sergio Protech

http://live.datatables.net/fuzexoxi/1/edit?html,css,js,console,output

Since i am fething the data from a php file i have included the code on the css to make it more simple for you

Sergio Protech

In the html table tag i added manually some data. So the only thing i need is the header and the footer of the table, the body will be loaded with data from php.
If something is still unclear for you let me clarify it again.

kthorngren

Your test case is getting this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'style')

You need to define all the columns in HTML. You have 3 th but need 5 to match the Datatables config. I added the 2 th.

I also fixed your example to use the ajax resource I linked above. Now the test case runs. Since you don't want the column search applied to all the columns use a column-selector to select the appropriate columns. I simply used an array of [0, 1, 2], like this:

dataTable.columns( [0, 1, 2] ).every( function () 

See the example:
http://live.datatables.net/wanaliqo/1/edit

Kevin

Sergio Protech

Still does not work on me. Since i am getting the data from the db i am using, shown to you in the css code example.

Sergio Protech

I also forgot to mention that whenever i click on add or Edit button when i input a certain name to be added or edited, in the background you can see that search is being done whenever i press a key

kthorngren

Still does not work on me. Since i am getting the data from the db i am using, shown to you in the css code example.

My example is getting data from a DB with Ajax. The process is no different its just a different data structure.

I also forgot to mention that whenever i click on add or Edit button when i input a certain name to be added or edited, in the background you can see that search is being done whenever i press a key

What change did you make to the column-selector (dataTable.columns( [0, 1, 2] ).every( function ())?

Sounds like the change isn't correct. The problem with your original test case is that this selector $( 'input', this.footer() ), doesn't have a th for the buttons columns so its returning undefined :

$( 'input', this.footer() ).on( 'keyup change', function ()

When the this.footer() selector is undefined in the two buttons columns jQuery is applying the click event to all input elements. This is why you are seeing the column searches execute while using your modal input.

If you still need help with this then update the test case to show the issue.

Kevin

Sergio Protech

I read somewhere that: Either server-side is on and you're using AJAX or it's off and you're not
In my case is false and i am still using ajax. Is this information useful?
Finally i would like to inform you that i fixed the problem, it was on the datatable column function
Thanks a lot for your help
I appreciate it

kthorngren

In my case is false and i am still using ajax.

Server side processing (serverSide: true) is used for server side paging, search, etc. You can use ajax without server side processing. In this case all the data is at the client.

Glad you got it working!

Kevin

Sergio Protech

Thanks a lot again
Have a nice day