Buttons for 2 tables on 1 page

bayeni

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!

allan

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

bayeni

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

bayeni

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');

allan

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

bayeni

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!

allan

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

bayeni

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

allan

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

bayeni

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.

allan

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

bayeni

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)?

allan

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

bayeni

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!!