Row created callback (custom jQuery) causes issues

  • Resolved onetrev

    (@onetrev)


    2 years, 4 months ago

    I am adding classes to my table cells based on values using the simple script below. It works and adds the classes as expected. However, I get the following error notice: “DataTables warning: table id=tablepress-1 – Cannot reinitialise DataTable.”

    I’m using code suggested by the DataTables docs, so nothing out of the ordinary:

    
$('#tablepress-1').DataTable({
  createdRow: function (row, data, index) {
    if (data[3].replace(/[$*%]/g, '') <  0) {
      $('td', row).eq(3).addClass( 'highlight' );
    }
    if (data[3].replace(/[$*%]/g, '') >=  0) {
      $('td', row).eq(3).addClass( 'lowlight' );
    }
  },
});

    I can prevent this by adding "retrieve": true to the Custom Commands in TablePress, but there are still issues if I do. Things like the “Previous” and “Next” buttons do not work, and most importantly the Responsive Plugin (which I donated to support ?? ) doesn’t work.

    Am I adding this custom script incorrectly or doing something else wrong? I scoured the documentation but didn’t see anything unfortunately.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    thanks for your post, and sorry for the trouble.

    The reason for this is that you are indeed adding a second call to DataTable() for the same table. Instead, just tell TablePress to also add your command (the part inside the DataTables( ... ) call). For that, you can use the “Custom Commands” text field on the table’s “Edit” screen. Thus, just add

    createdRow: function (row, data, index) {
    if (data[3].replace(/[$*%]/g, '') <  0) {
        $('td', row).eq(3).addClass( 'highlight' );
    }
    if (data[3].replace(/[$*%]/g, '') >=  0) {
        $('td', row).eq(3).addClass( 'lowlight' );
    }
}

    into that field.
    You will not need the "retrieve": true then and the other features will also work.

    Regards,
    Tobias

    Thread Starter onetrev

    (@onetrev)

    Awesome! Thank you so much. It works perfectly now. I wondered if that needed to be added to the “Custom Commands” section, but couldn’t any details about that. I should have experimented with dropping the extra DataTable() call, so you didn’t have to spend time replying.

    One related query, happy to create a new topic for this if preferred, I noticed the added classes from the code don’t appear in data in “collapsed” area when using responsive=collapse. I’m guessing that’s just the way it has to be, but thought I would check. ??

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    good to hear that this helped!

    Unfortunately, I’m not familiar with how the added CSS classes are handled by DataTables when the collapse mode is used (this is based on https://datatables.net/extensions/responsive/ , so you would have to check there).

    Best wishes,
    Tobias
    ?
    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

    Thread Starter onetrev

    (@onetrev)

    No worries! In case anyone else is encountering this in the future, what you need to do is use columns.render (more details) instead of createdRow.

    Plugin Author TobiasBg

    (@tobiasbg)

    Hi,

    sounds good! Thanks for sharing this!

    Best wishes,
    Tobias
    ?
    P.S.: In case you haven’t, please rate TablePress here in the plugin directory. Thanks!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Row created callback (custom jQuery) causes issues’ is closed to new replies.