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

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

Sergio ProtechSergio Protech Posts: 22Questions: 4Answers: 0
edited February 2022 in DataTables

$('#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

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 17,688Questions: 25Answers: 4,197

    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 ProtechSergio Protech Posts: 22Questions: 4Answers: 0

    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 ProtechSergio Protech Posts: 22Questions: 4Answers: 0

    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 ProtechSergio Protech Posts: 22Questions: 4Answers: 0
    edited February 2022


  • Sergio ProtechSergio Protech Posts: 22Questions: 4Answers: 0

    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

  • kthorngrenkthorngren Posts: 17,688Questions: 25Answers: 4,197

    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 ProtechSergio Protech Posts: 22Questions: 4Answers: 0

    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 ProtechSergio Protech Posts: 22Questions: 4Answers: 0
    edited February 2022

    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.

  • kthorngrenkthorngren Posts: 17,688Questions: 25Answers: 4,197

    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 ProtechSergio Protech Posts: 22Questions: 4Answers: 0

    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 ProtechSergio Protech Posts: 22Questions: 4Answers: 0

    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

  • kthorngrenkthorngren Posts: 17,688Questions: 25Answers: 4,197
    Answer ✓

    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 ProtechSergio Protech Posts: 22Questions: 4Answers: 0

    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

  • kthorngrenkthorngren Posts: 17,688Questions: 25Answers: 4,197
    edited February 2022 Answer ✓

    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 ProtechSergio Protech Posts: 22Questions: 4Answers: 0

    Thanks a lot again
    Have a nice day

Sign In or Register to comment.