how to create buttons in same tag ?

faraz_

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

faraz_

i'm having a datatable that the table it self is in card-body and card-header has already exists in html.
how to append buttons in same card-header ?

<card>
 <card-header>
  // some content here .. and i want to append buttons here in javascript
 </card-header>
 <card-body>
  <table id='table_data'>
  </table>
 </card-body>
</card>

p.s : sorry for bad questioning .. tried to edit it .. but couldn't find any edit option.

kthorngren

how to append buttons in same card-header ?

Do you mean the buttons from the Buttons extension or other buttons you are creating?

See the Displaying the buttons docs for details of how to display the Datatables buttons.

Kevin

faraz_

@kthorngren
yes .. i read this document .. i need to put some value in dom: to point siblings parent tag (which has card-header class).. and then create necessary tags for buttons and more ..
what would this value be ?

kthorngren

Use the Direct insertion method , instead of dom, to place the buttons where you want.

If you need help with this then create a simple test case showing your card environment so we can offer more specific suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

faraz_

@kthorngren
i gave card-header an id and impelented this :

table.buttons().container()
                .appendTo($('#card_header', table.table().container()));

it doesn't work tho ..

kthorngren

You probably need to remove table.table().container() from the jQuery selector.

Kevin

faraz_

@kthorngren
yeah .. i did .. but again didn't work.

allan

Probably going to need a link to a page showing the issue for this one. In one post you have '#card_header' which is an ID selector, but prior to that you have <card-header> which is a custom HTML tag. In Bootstrap (if that is what you are using) it would be a class name.

As I say, please provide a link to a page showing the issue.

Allan

faraz_

@allan
@kthorngren
here's an example code, click here :pray:

kthorngren

As I said before:

Remove the B from the dom option or don't use the dom option and change the table.buttons().container() to just use the ID selector by removing ,table.table().container(). Something like this:

       table.buttons().container()
           .appendTo($('#card-header'));

If this doesn't work then put your code into a running test case that we can tinker with.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

faraz_

@kthorngren
i have put code in this link too.. i'll appreciate your help.

kthorngren

There are some rquirements, like PDFMake and JSZip, for some of the export buttons. You are loading these which is why the buttons aren't showing. Use the Download Builder to get the appropriate BS 5 files and other requirements. See the Buttons docs for a list of the requirements. Here is the updated test case.

http://live.datatables.net/kasuzove/1/edit

Kevin

faraz_

@kthorngren
exporting is not my issue for now .. now i just want to place a simple button in other tag .. that's all.

kthorngren

now i just want to place a simple button in other tag

Not sure what you mean. You have a Test button there now and I thought you wanted the Datatables buttons placed in that div. Does the test case not do what you want?

Are you wanting to create a Custom button?

Kevin

faraz_

@kthorngren
yes .. in project that I'm working with .. there are custom buttons that export data as PDF,excel and more ..
what i want is place this button on existing tag .. i don't know why if dose't work ..
this is defined buttons in project.

buttons: [
                                {
                                    extend: 'print',
                                    text: feather.icons['printer'].toSvg({class: 'font-small-4 me-50'}) + 'Print',
                                    className: 'dropdown-item',
                                },
                                {
                                    extend: 'csv',
                                    text: feather.icons['file-text'].toSvg({class: 'font-small-4 me-50'}) + 'Csv',
                                    className: 'dropdown-item',

                                },
                                {
                                    extend: 'excel',
                                    text: feather.icons['file'].toSvg({class: 'font-small-4 me-50'}) + 'Excel',
                                    className: 'dropdown-item',

                                },
                                {
                                    extend: 'pdf',
                                    text: feather.icons['clipboard'].toSvg({class: 'font-small-4 me-50'}) + 'Pdf',
                                    className: 'dropdown-item',

                                },
                                {
                                    extend: 'copy',
                                    text: feather.icons['copy'].toSvg({class: 'font-small-4 me-50'}) + 'Copy',
                                    className: 'dropdown-item',

                                }
                            ],

basically it is a drop down button that i want to move it to other tag/place.

kthorngren

Sorry, I'm still not clear on what you are trying to do. The example I provided places the buttons in the div that you specified. Are you just wanting to move one of the buttons?

Please describe what you want my example to do differently.

Kevin

faraz_

im trying to move this custom dropdown inside div .card-header.

{
                    extend: 'collection',
                    className: 'btn btn-outline-secondary dropdown-toggle me-2',
                    text: 'Export',
                    buttons: [
                        {
                            extend: 'print',
                            text: 'Print',
                            className: 'dropdown-item',
                        },
                        {
                            extend: 'csv',
                            text: 'Csv',
                            className: 'dropdown-item',

                        },
                        {
                            extend: 'excel',
                            text: 'Excel',
                            className: 'dropdown-item',

                        },
                        {
                            extend: 'pdf',
                            text: 'Pdf',
                            className: 'dropdown-item',

                        },
                        {
                            extend: 'copy',
                            text:  'Copy',
                            className: 'dropdown-item',

                        }
                    ],
                    init: function (api, node, config) {
                        $(node).removeClass('btn-secondary');
                        $(node).parent().removeClass('btn-group');
                        setTimeout(function () {
                            $(node).closest('.dt-buttons').removeClass('btn-group').addClass('d-inline-flex');
                        }, 50);
                    },

                },

i removed icons in here

faraz_

@kthorngren

faraz_

icons does not important tho ..

faraz_

I'm trying to move custom dropdown button into div .card-header.

{
                            extend: 'collection',
                            className: 'btn btn-outline-secondary dropdown-toggle me-2',
                            text: 'Export',
                            buttons: [
                                {
                                    extend: 'print',
                                    text: 'Print',
                                    className: 'dropdown-item',
                                },
                                {
                                    extend: 'csv',
                                    text:  'Csv',
                                    className: 'dropdown-item',

                                },
                                {
                                    extend: 'excel',
                                    text: 'Excel',
                                    className: 'dropdown-item',

                                },
                                {
                                    extend: 'pdf',
                                    text:  'Pdf',
                                    className: 'dropdown-item',

                                },
                                {
                                    extend: 'copy',
                                    text:  'Copy',
                                    className: 'dropdown-item',

                                }
                            ],
                            init: function (api, node, config) {
                                $(node).removeClass('btn-secondary');
                                $(node).parent().removeClass('btn-group');
                                setTimeout(function () {
                                    $(node).closest('.dt-buttons').removeClass('btn-group').addClass('d-inline-flex');
                                }, 50);
                            },

                        },
                           

allan

I totally don't get what you are trying to do either.

Do you want to perform a custom action when a button is activated? If so the docs for that are here.

But what it sounds like is you are trying to move your own dropdown into Buttons' one? Not sure why you would do that, but if that is what you are trying to do, I wouldn't bother. Buttons isn't designed for that. You'd be much better just doing your own drop down.

Allan

faraz_

i solve it .. i had a Ajax request after configuring export keys. so i moved it before of configuring export buttons .. than it works.
funny to say i configure it both in dom and external config

table.buttons().container().appendTo($('#card_header'));