DataTable cannot click the button after pagination

Question

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 () {
    ....... 
} );

davidkonrad · Accepted Answer · 2015-11-30 11:07:00Z

1

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] }
]

answered Nov 30, 2015 at 11:07

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Elice Ee Over a year ago

It can success click on other pages of the table, Thank you so much!!!! But now have another problem occurs, the data retrieved on the same row is different. For example, first page maximum is five row, on the second page, when I click the first row, it still give me the first row data of the first page, not first row data of the second page.

Elice Ee Over a year ago

var rowindex=$(this).closest('tr').index(); var data1 = $('#tbl').DataTable().row( this.row_selected ).columns(8).data(); var a= data1[0][rowindex];

davidkonrad Over a year ago

@EliceEe - this is because $(this).closest('tr').index(); give you the jQuery DOM index, you need the dataTables index -> table.row(this).index() (if it is inside a tr-click handler)

Collectives™ on Stack Overflow

DataTable cannot click the button after pagination

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related