Datatable Column draw events issue

Karthikkasiram2018

Hi Experts,

We have implemented column searching (text inputs) in datatable and we have <a> tag in table cells. We also have events attached to these <a> tags. These events work fine on all pages when the table is not filtered. But when the results are filtered the click event works only second time when the <a> tag is clicked.

I am suspecting the cause might be because the <a> tag is loosing focus. So the first click is regaining focus and on second click the attached event is triggered. Any suggestions on how to trigger the event on first click after filtering (or) searching.
I am using below code for SearchBoxes in table.
<tfoot>
<tr>
<td class="textCenterAlign "></td>
<td class="textCenterAlign "><input type="text" placeholder="Search Code"></input></td>
<td class="textCenterAlign"><input type="text" placeholder="Search Label"></input></td>
<td class="textCenterAlign"><input type="text" placeholder="Search Label"></input></td>
<td class="textCenterAlign"><input type="text" placeholder="Search Code"></input></td>
<td class="textCenterAlign"><input type="text" placeholder="Search Business"></input></td>
<td class="textCenterAlign displayNone"></td>
<td class="textCenterAlign"></td>
<td class="textCenterAlign displayNone"></td>
</tr>
</tfoot>

I am using the below code for filtering.
var table = $('#tablename').DataTable();
table.columns().every(function()
{
var term = this;
$('input',this.footer()).on( 'keyup change', function () {
term
.search( this.value )
.draw();
});
}
);
And I am appending the search boxes to <thead> using the below lines.
$('#tablename tfoot tr').appendTo('#tablename thead');

Event attached to <a> tag:
$('#myTable').on( 'click', '.edt', function (event)
{
//script goes here
}

allan

Can you link to a test case showing the issue please? I don't immediately see what is going wrong there in your code I'm afraid.

Allan

Karthikkasiram2018

Hi Allan,

I have used the solution given in this link.
https://datatables.net/examples/api/multi_filter.html

As you can see in the link the search boxes are in the footer but I have moved those to my header. The below is my table body
<tbody>
<tr>
<td class="textCenterAlign">
<div id="editDelete">
<a class="edt textLink padding1" id="editbtn" href="#">Edit</a>
</div>
</td>
<td> Some Content </td>
<td> Some Content </td>
<td> Some Content </td>
<td> Some Content </td>
<td> Some Content </td>
<td> Some Content </td>
<td> Some Content </td>
<td> Some Content </td>
</tr>
</tbody>

I am searching a value using the search boxes for a particular column. The search/filter functionality works fine. The <a> element is available as a <td> in all rows. But when I click on the <a> tag, first time nothing happens. When I click second time the event attached to the <a> tag is triggered.

Please let me know if any further details are required.

Karthikkasiram2018

@allan please use this for testing.

https://jsfiddle.net/Karthikkasi2018/tdg59xtu/31/

Try Searching Assignment Code with "Br" ans results row would be displayed with Brazil. First time when you click "Edit" nothing happens but second time when you click a pop up would be shown.

TIA

kthorngren

It seems to work fine in chrome on a Mac. I search for "br" then click Edit for Brazil. The first click works and displays the alert message. Maybe a browser issue - have you tried other browsers?

What browser are you using?

Kevin

Karthikkasiram2018

@kthorngren I'm checking in both IE 11 as well as Chrome but only second click works. Could you let me know if you are using the individual column search "Search Assignment Code" just below the headers. When I use the global filter first click seems to work. But when I use column filter only second click works for "Edit".

allan

Remove the change event and it works.

It looks a bit like a Chrome issue to be honest - Firefox works okay. Looking at the profiler in Chrome what is happening is that the click on the link (with focus currently in the column input element) will trigger the change event, which is redrawing the table. But the click event is getting lost in the process.

Either way, remove change and it works.

Allan

Karthikkasiram2018

thanks @allan that worked for me. But the below fix also worked for me when including "change" event.
var table = $('#myTable').DataTable();
table.columns().every(function()
{
var term = this;
$('input',this.footer()).on( 'keyup change', function () {
if ( term.search() !== this.value ) //added this line
{
term
.search( this.value )
.draw();
}
});

                    }
                );