Jumpy table when navigating via the pagination

Jumpy table when navigating via the pagination

WebCodexWebCodex Posts: 52Questions: 9Answers: 3
edited January 9 in Free community support

After adding some custom rendering using the "rowCallback": function (only way I could think to do this) my table is jumpy when navigating using the pagination, I think it is down to the buttons rendering in.

The page is live here: https://vccalc.vapingcommunity.co.uk/flavours

I am using an AJAX call to determine the button rendered, so Add to Stash or Remove from Stash is shown depending on the AJAX result.

"rowCallback": function (row, data) {
checkInStash(exid, data.flavour_name, data.flavour_company_name).done(function(data){ 
    if(data == true) {
        $(row).addClass( 'instash' );
        $(row).find('td:eq(4)').html('<button class="btn btn-primary flavour-stash">Remove From Stash</button>');
    } else {
        $(row).removeClass( 'instash' );
        $(row).find('td:eq(4)').html('<button class="btn btn-primary flavour-stash">Add To Stash</button>');

This is the AJAX success function:

success: function(data){
    table.row( 4 ).invalidate().draw('page');

This question has an accepted answers - jump to answer


  • colincolin Posts: 5,549Questions: 0Answers: 970
    Answer ✓

    Hi @WebCodex ,

    Yep, as you say, the Ajax response will be delayed, which would cause the buttons to draw later - and as they're larger than the text, this causes the rows to all shuffle down.

    One option would be by default, in columns.render, display one of those buttons so that the row height will be set, then the ajax can then overwrite the button if it's the other one. You might see a slight change due to the button altering, but it shouldn't flicker.

    Hope that does the trick,



  • WebCodexWebCodex Posts: 52Questions: 9Answers: 3
    edited January 9

    @colin , that is awesome, worked a treat, thanks for your time. Here is the final result:

    { 'data': 'action', 
        "render": function ( data, type, row, meta ) {
        return '<button class="btn btn-primary flavour-stash">Add To Stash</button>';                   
Sign In or Register to comment.