Putting add and delete buttons in header when using several tables on same page

Putting add and delete buttons in header when using several tables on same page

alex_alex_ Posts: 5Questions: 0Answers: 0
edited September 2012 in Plug-ins
For Datatables Editable I have a setup very similar to the one shown on http://jquery-datatables-editable.googlecode.com/svn/trunk/customization.html regarding the add and delete buttons. When having several datatables instances on the same page, you can't rely on the "add_delete_toolbar" div class, but need to create separate buttons for each one of them, according to http://code.google.com/p/jquery-datatables-editable/wiki/AddingNewRecords#Customization.

I don't get how to implement the add and delete buttons to each of these tables headers (as I can't then use the "sAddDeleteToolbarSelector" and "add_delete_toolbar" class). Been struggling with for a while, so I'm happy for all suggestions!

Thanks in advance!

Replies

  • alex_alex_ Posts: 5Questions: 0Answers: 0
    [SOLVED]

    1. The toolbar () only needs to be called upon once in the html code. It will then work for all tables that need add and delete buttons.
    2. Configure the sDOM in each datatable's javascript, so that they host unique DIV ids for each table (for example "sDom": '<"H" <"#tableOne"fpr>>t' for the first table "sDom": '<"H" <"#tableTwo"fpr>>t' for the second etc)
    3. For each initiation of makeEditable, populate the Add and Delete buttons to the appropriate DIV created in the previous bullet. Use sAddDeleteToolbarSelector for this (following the above example sAddDeleteToolbarSelector: "#tableOne" for the first table sAddDeleteToolbarSelector: "#tableTwo" for the second etc).
This discussion has been closed.