How does Datatable editor and Tabletools work together

cranworth

In the example in:
https://editor.datatables.net/examples/inline-editing/simple.html

I am trying to get the TableTools buttons "New", "Edit", and "Delete" to appear, but I can't.

I initialize a table using

var data_table = $('#table').Datatable({
 data: data, 
 columns :[ /* some columns */],
 tableTools: {
      sRowSelect: "os", 
      sRowSelector: 'td:first-child', 
      aButtons: [ 
              { sExtends: "editor_create", editor: editor },
              { sExtends: "editor_edit",   editor: editor },
              { sExtends: "editor_remove", editor: editor }
        ]
  }
}); 

However, it might be worth mentioning that I use the Bootstrap datatable css and js files for bootstrap integration: dataTables.bootstrap.js and dataTables.bootstrap.css

tangerine

First, are you including the TableTools js file?
Second, your initialisation might need a path to swf.

allan

Looks like you might be missing this part:

dom: "Tfrtip",

The T in dom tells DataTables to use the TableTools extension.

Allan

cranworth

Thanks both suggestions helped. The buttons do appear now, but when I press 'New' no popup appears, but the entire page gets pushed dynamically further down, seemingly to make room for the pop-up form which never appears. Hope it made sense?

allan

Sounds like you need to include the Editor CSS is my guess.

Can you link to the page so we can confirm what is happening?

Allan

allan

Thanks for the link in the PM. It does indeed look like there are a couple of files missing. Specifically:

• //cdn.datatables.net/plug-ins/725b2a2115b/integration/bootstrap/3/dataTables.bootstrap.js
• //editor.datatables.net/examples/resources/bootstrap/editor.bootstrap.js
• //cdn.datatables.net/plug-ins/725b2a2115b/integration/bootstrap/3/dataTables.bootstrap.css
• //editor.datatables.net/examples/resources/bootstrap/editor.bootstrap.css

The Editor Bootstrap examples shows all of the include files needed: http://editor.datatables.net/examples/styling/bootstrap.html

Allan

cranworth

Indeed some of the .js and .css were missing. I have now included them but with no avail. The problem still occurs. I am stumped, nothing comes up in my chrome javascript console for me to debug this problem. Any pointers?

allan

edit - Sorry, crossed threads! Will reply back to this one shortly!

allan

The console in Chrome shows:

[Error] TypeError: 'undefined' is not an object (evaluating '$.fn.dataTable.Editor.defaults')

Include the Editor script before the plug-in for it and hopefully that should do it.

Allan

cranworth

This is the order my js incudes now. I still get the 'undefined' error in console.

html <script src="../bootstrap/bootstrap-3.1.1/dist/js/bootstrap.min.js"></script> <script src="../bootstrap/bootstrap-3.1.1/docs/assets/js/docs.min.js"></script> <script src="../datatable/DataTables-1.10.0/media/js/jquery.js"></script> <script src="../datatable/DataTables-1.10.0/media/js/jquery.dataTables.js"></script> <script src="../datatable/DataTables-1.10.0/extensions/Scroller/js/dataTables.scroller.js"></script> <script src="../datatable/DataTables-1.10.0/bootstrap/dataTables.bootstrap.js"></script> <script src="../datatable/DataTables-1.10.0/extensions/TableTools/js/dataTables.tableTools.min.js"></script> <script src="../datatable/DataTables-1.10.0/extensions/Editor-1.3.2/js/dataTables.editor.min.js"></script> <script src="../datatable/DataTables-1.10.0/bootstrap/dataTables.bootstrap.js"></script> <script src="../datatable/DataTables-1.10.0/extensions/Editor-1.3.2/examples/resources/bootstrap/editor.bootstrap.js"></script>

allan

Yup need to update to TableTools 2.2.2 :-). As the release notes for Editor 1.3.2 note, TableTools 2.2.2 or later is required if you are using TableTools. Sorry about that - it was a bug across the two libraries.

Allan