4

I want to have a button with js click in each datatable row, but my code is broken by datatables paging system - default datatable option. Click works only on first datatable page. My only idea is to disable paging and create scrolable datatable, but I would prefer to keep paging for better UX.

Example datatable:

<table id="data_tables">
<thead>
    <tr>
        <td>Action</td>
        <td>Name</td>
        <td>Surname</td>
    <tr>      
</thead>
<tbody>
    <!-- Datarow 1 -->
    <tr>
        <td><input type='button' class='my_button' data-id='1' value='click' /></td>
        <td>John</td>
        <td>Wayne</td>
    </tr>
    <!-- Datarow 2 -->      
    <tr>
        <td><input type='button' class='my_button' data-id='2' value='click' /></td>
        <td>Clark</td>
        <td>Kent</td>
    </tr>
</tbody>
</table> 

Click event handler

//simple on() in jquery would do the trick in normal <table>
$( ".my_button" ).on( "click", function() {
    var id = $(this).attr("data-id");
    alert(id); 
});     

Is there a way to workaround this problem? Or maybe datatable api solution?

3
  • Here it is: jsfiddle.net/vy0fjpbg I hope its fine, becouse I use jsfiddle rarelly. Commented Feb 14, 2019 at 11:11
  • Ask yourself this question "Does this fiddle reproduce my problem?", if that answer is yes then it's fine, if the answer is no then you need to reproduce your problem. Commented Feb 14, 2019 at 11:15
  • It does. However Arthur Shveidas solution works fine. Thanx anyway. Commented Feb 14, 2019 at 11:17

1 Answer 1

6

You can do something like this:

$("#data_tables").on("click", ".my_button", function() {
    var id = $(this).data("id");
    alert(id);
});
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.