jQuery colorbox failing on Responsive and page 2+

shunluoifong

I have a table with a column that includes a jQuery colorbox link (class="status_individual_info") to inline html content. I am also using the Responsive extension that hides this column when on mobile. Originally I initialized my DataTable, and then initialized the colorbox. This, of course, broke the colorbox functionality in two scenarios:

• when on the pages beyond the first page of table data
• when on mobile and the column with the colorbox link is hidden

I tried using the solution similar to what was posted here: http://www.datatables.net/forums/discussion/comment/8217/#Comment_8217

var oTable = $("#data").DataTable({
  "sPaginationType": "full_numbers",
  "bFilter": true,
  "lengthChange": false, // Disable functionality for user to select how many results to see per page
  "sDom":"lrtip", // default is lfrtip, where the f is the filter
  "fnInitComplete": function() {
    $(".status_individual_info", oTable.fnGetNodes()).colorbox({inline:true, width:"75%"});
    }
});

However, I got an error that "oTable" was undefined. I tried setting this up in DataTables Live, but the responsive aspect isn't working...however, I am seeing the colorbox functionality broken when trying to use the "fnInitComplete": http://live.datatables.net/hilusize/1/edit?html,js,output

Any suggestions on where I'm going wrong?

shunluoifong

Bump. Any thoughts or suggestions for resolving this?

shunluoifong

No thoughts on this? Seems like I'm probably missing something obvious since this has been a question asked in the past. Could really use a second set of eyes on this to give some guidance.

allan

Use this.fnGetNodes() in that context. oTable isn't defined there since fnInitComplete is called during the initialisation of that very variable!

It will work in the other thread since they are using Ajax, which causes fnInitComplete to be run after the data has been loaded asynchronously.

Allan