Question

I tried to setup datatables on a table which is inside of jquery UI tabs, and its not working, I dont see any change in the table, no search box no pagination nothing.

Also there were no errors in the javascript error console.

All the javascript files are in order(jquery first then jquery ui then coffee script)

and I also tried calling the datatables through javascript console ie I executed
$('#list').dataTable();
in javascript console, it returned the node but nothing happened!

Can anyone help me with this please?

Should I post anything here in addition, if that would be helpful?
UPDATE:
If I remove datatable initializer and call it manually it is working.
I think the problem is dataTable is getting intialized before partial loads.

How to intialize datatable after getting the partial?


$ ->
$("#tabs").tabs ajaxOptions:
error: (xhr, status, index, anchor) ->
$(anchor.hash).html "Couldn't load this tab."

The above is the code for my Jquery UI tabs.

Answer 1

I fixed it by using load callback in which I intialized datatables on newly ajax fetched table.

$ ->
  $("#tabs").tabs
    event: "mouseover"
    load: (event, ui) ->
      if $(ui.panel.children[0]).attr("id") is "list"
        $(ui.panel.children[0]).dataTable
          sPaginationType: "full_numbers"
          bJQueryUI: true


    ajaxOptions:
      error: (xhr, status, index, anchor) ->
        $(anchor.hash).html "Couldn't load this tab."