Additional request to backend firing as datatable is repainted/rerendered

metadev

Example link to case:
https://live.datatables.net/pijoquzo/1/edit

No error. But the request to the backend is firing for n times when datatable is rendered for n times which is unwanted

I am working on a PHP project using datatables where when I search for a list of employees by their name in search input, the resulting employees would be displayed as a datatable (with id #example in the test case). Then, I view their detail by clicking the Select button in the corresponding datatable row.

My issue arises when I search for another employee name (without page refresh) and submit, and then click on the Select button for the employee for whom I want to view details, the request to the backend (the case GET_EMP_PAYSLIP in this case) is fired twice. If the search has been done 3 times, the request is fired 3 times and so on.

The amount of request for getting employee payslip details seems to increase as the datatable is re-rendered as a result of the search query being executed. Can anyone help me solve this issue?

I have included a (non-working) example which includes the relevant code for my issue purely meant to showcase my problem in detail. Thank you for reading.

kthorngren

The problem is you are creating the click event handler inside the loadDataTable() function so it creates a new instance of the event handler each time the function is called. Some options:

1. Turn off, with jQuery off(), in the function before creating it.
2. Move the event handler creation outside the function, like this updated test case:
   https://live.datatables.net/seyizaga/1/edit

Note the change in selectors as the tbody does not exist on page load. Also the variable resultsTable is not available outside the loadDataTable() so you need to either get an instance of the Datatable API, as shown in the example, or create resultsTable as a global variable.

Kevin

metadev

@kthorngren I have tried approach 2 before and couldn't get it to work. As the entire function failed to fire/execute altogether. I will look into it more. Thanks for the response.

kthorngren

As the entire function failed to fire/execute altogether.

Check the browser's console for errors.

Kevin

metadev

@kthorngren Moving the click event handler outside the loadDatatable() function scope didn't solve the issue in my case. As the table is dynamically created and not available in the DOM on the initial page load. So I assume the jQuery selector doesn't seem to work.

I had to define a separate function clickHandler(data) and move the whole logic into it.

function clickHandler(data) {
    // rest of code
    fun_get_qry("GET_EMP_PAYSLIP", data.childNodes[1].innerHTML);
    // rest of code
}

Then invoke it when the button is clicked

columnDefs: [{
    "targets": 3,
    "defaultContent": "<button ... onclick='clickHandler(this.parentNode.parentNode);'>Select</button>"
}],

Thanks for the help.

kthorngren

So I assume the jQuery selector doesn't seem to work.

What did you use? Assuming the table exists when the code to create teh event handler runs you should be able to move tbody into the selector parameter sent in the jQuery on() method.

Kevin

metadev

Sorry for being late. I was out of station.
I used jQuery as the selector like

$('#example tbody').on('click', 'button', function() {
    // rest of code
}

and put this function outside the scope of the function with the Datatable initialization.

allan

That would require #example tbody to resolve to an element. It sounds like that might not be the case for you. You could use:

$(document).on('click', '#example tbody button', function() {
    // rest of code
});

Which would allow for the element being created dynamically.

Allan

metadev

@allan Thanks for the suggestion. I will try this too.

Dev