Buttons for 2 tables on 1 page

Buttons for 2 tables on 1 page

bayenibayeni Posts: 57Questions: 8Answers: 0

As I understood it is not possible to use for 2 DataTables on one page dom: 'Blfrtip' for positioning of special buttons for each table. I understood that it should be possible to define the buttons in DataTable(){}, but than I have to set the position for e.g. with table2.buttons().container().insertBefore('#example2');. But in my test http://live.datatables.net/wotivaye/2/edit, no buttons are shown. Can you tell me what's wrong? I made this test because I have in my application 2 tables and if I use dom: 'Blfrtip' in the second table, too, the whole second table isn't shown anymore. Without dom the table is shown, but I don't have buttons, so I need to know how I can show the buttons in the second table, too. thanks!

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

    As I understood it is not possible to use for 2 DataTables on one page dom: 'Blfrtip' for positioning of special buttons for each table

    Yes it is - example.

    You cannot use one since Buttons instance to control a single table which might be what you mean?

    But in my test http://live.datatables.net/wotivaye/2/edit, no buttons are shown. Can you tell me what's wrong?

    1. The Buttons plug-in was being loaded before DataTables. Therefore it had nothing to attach to and showed an error in the browser's console.
    2. There were no button types loaded for the button types you've specified.

    I've added that file and rearranged the loading and it works as expected: http://live.datatables.net/wotivaye/3/edit

    Allan

  • bayenibayeni Posts: 57Questions: 8Answers: 0

    thanks for the examples, I understand and with the class is a good idea, too, if the same buttons should be used. Thanks

  • bayenibayeni Posts: 57Questions: 8Answers: 0

    I have again a question about buttons. I saw the solution for the the buttons csv, ... But it seems to be different for buttons used with editor, or is it only because I'm not able to add the editor files? http://live.datatables.net/wotivaye/2/edit In my real application I'm wondering, why I can see the buttons of the first table but adding the buttons of the second table doesn't show the second button group.

     editor = new $.fn.dataTable.Editor( {...});
    
     companyTable = $('#companyTable').DataTable( {
            dom: 'Blfrtip',
                   ...
                    { extend: "create", 
                      editor: editor, 
                      formTitle: "Fill in Company releated Information" 
                    },
                    { extend: "edit",   
                      editor: editor, 
                      formTitle: "Change of Company Information" 
                    },
                    { extend: "remove", editor: editor },
                ],
    });
    
     contactEditor = new $.fn.dataTable.Editor( {...});
    
    contactTable = $('#contactTable').DataTable( {
                    //don't want to have lfip
            dom: "rt",
                    ...
                buttons: [
                        { extend: "create", 
                          editor: "contactEditor", 
                          formTitle: "Fill in Contact Information" 
                        },
                        { extend: "edit",   
                          editor: "contactEditor", 
                          formTitle: "Change of Contact Information" 
                        },
                        { extend: "remove", editor: "contactEditor" },
            ...
     } );
    contactTable.buttons().container().insertBefore('#contactTable');
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    There are JS errors in that example so I'm not entirely sure what the issue is. The basic code looks correct. Could you link me to the actual page showing the issue so I can debug the issue please?

    If you are using ajax then you would need to insert the Buttons in initComplete - but I don't know if you are using Ajax or not.

    Allan

  • bayenibayeni Posts: 57Questions: 8Answers: 0

    oh sorry, I didn't think that this is important, yes I'm using ajax. I do that for both tables, the first one is ok. But I don't understand how to use initComplete for buttons. Can't I use

                buttons: [
                        { extend: "create",
                          editor: "contactEditor",
                          formTitle: "Fill in Contact Information"
                        },
                        { extend: "edit",  
                          editor: "contactEditor",
                          formTitle: "Change of Contact Information"
                        },
                        { extend: "remove", editor: "contactEditor" }
                ]
    
    

    for the button definition, if I'm using ajax? Have I to define the buttons in the function, or have I to use the insert in the function? Can you give me an example, please? Thanks!

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Just move the Buttons insert line into initComplete.

    Beyond that, we'd need a link to a working test case that shows the issue.

    Allan

  • bayenibayeni Posts: 57Questions: 8Answers: 0

    Hi Allan, I tried to insert the Button in initComplete, but the buttons are not shown for the second table. Sorry, there is no possibility to access my application, because it is not connected to internet. I made an example http://live.datatables.net/qekipure/1/ with normal buttons. With that buttons it works to define them in the normal way in DataTable and on both tables they are shown. But with my editor buttons (set on comment in the example) only the editor buttons from the first table are shown and it doesn't change anything to add something like contactTable.buttons().containers().insertBefore('#contactTable'); to initComplete of the second table or define the buttons outside of DataTable with

    new $.fn.dataTable.Buttons( contactTable, {
                buttons: [...]
    }
    

    debug info is axayow.

    In my application it is the same as in the example, if I only use non-editor buttons in the second table like:

         contactTable = $('#contactTable').DataTable( {
            dom: 'Blfrtip',
            ajax: { 
                    url: url+"/0/contacts",
                    dataSrc: "" 
              },
                  ...
             buttons: [ 'copy', 'csv', 'excel' ],
                 ...
        })
    

    the buttons are shown without initComplete in the second table, too. But I need editor buttons and with that I don't find a solution to show them. I hope you can tell me how to show the editor buttons of the second table, too

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    The example doesn't actually appear to have any output at all. Are you able to modify it so it will run and I'll see if I can add the Editor buttons.

    Simply adding the Editor buttons to the list shouldn't make any difference! Note that the Editor buttons are dependent upon the Select extension - that would also need to be included.

    Allan

  • bayenibayeni Posts: 57Questions: 8Answers: 0

    sorry, at the moment JS bin don't like me. I made that example last time 3 times, because it was always damaged with a click, than I thought I have it, but that seems to be not the correct one, so I made again a new one http://live.datatables.net/patareto/1/edit. At the moment it looks correct, when I try to open it.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Just to confirm my understanding - the test case shows the Buttons being added to both tables. In your page (which I don't have access to) that is not working. Is that correct?

    I'd need a test case that shows the issue to be able to offer any help.

    Allan

  • bayenibayeni Posts: 57Questions: 8Answers: 0

    for the standard HTML5 buttons it is working as in the example, but for the buttons with editor functionality it is not working (only the buttons from the first table are shown), but I can't make a test case for that, because editor is not usable in JS bin, I only added this buttons in comment. Can you see soemthing about in the debug information I added above (axayow)?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    You can include Editor from http://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js on live.datatables.net. It won't work on other domains, but it will there. Just including it would be enough to have the buttons defined.

    Allan

  • bayenibayeni Posts: 57Questions: 8Answers: 0

    thanks for the information! I tried to prepare a page with 2 tables and editor buttons http://live.datatables.net/pulavake/1/edit. But I only can add the button definition without showing the buttons in the page. Every time, if I try to show the buttons, the page is empty. Can you help me and show me in this example, what I have to do, to show for both tables their own create, edit and remove button? Thanks!!

This discussion has been closed.