Elice Ee Elice Ee - 6 months ago 26
jQuery Question

DataTable cannot click the button after pagination

I have done a datatable and custom it's data but when i click the button on the first column, it only works on the first page and cannot click on other forward pages.

$('#tbl').DataTable( {
responsive: true,
data: data1,
autoWidth: false,
"order": [[ 7, "asc" ]],
"iDisplayLength": 5,
"pagingType": "full_numbers",
"dom": '<"top">rt<"bottom"p><"clear">',
"oLanguage": {
"sEmptyTable": "Not Record"
},
"columnDefs": [
{ "visible": false, "targets": [ 6,7,8 ] }
],
"columns": [
{},{"sClass": "dt-body-justify"},{},{},{},{},{},{},{},{}
]
} );


BUT when for the click function in live mode, it still cannot work

$('#tbl tbody tr #edit_current_product').delegate('a', 'click', function () {
.......
} );

Answer

id's must be unique. We dont know your markup but

$('#tbl tbody tr #edit_current_product').delegate('a', 'click', function () 

seems utterly wrong. Either you have multiple <a>'s with the same id #edit_current_product or the right thing actually happens, you have paginated away from the page where #edit_current_product is present.

I guess that what you really want is

$('#tbl').on('click', 'tbody tr a', function() 

or use a class instead of an id

$('#tbl').on('click', 'tbody tr .edit_current_product', function() 

BTW, why

"columnDefs": [
    { "visible": false,  "targets": [ 6,7,8 ] }
],
"columns": [
    {},{"sClass": "dt-body-justify"},{},{},{},{},{},{},{},{}
]

you just need

"columnDefs": [
    { "visible": false,  "targets": [ 6,7,8 ] },
    { "sClass": "dt-body-justify", targets : [1] }
]