how to create buttons in same tag ?

how to create buttons in same tag ?

faraz_faraz_ Posts: 14Questions: 1Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • faraz_faraz_ Posts: 14Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,148Questions: 26Answers: 4,736

    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_faraz_ Posts: 14Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 20,148Questions: 26Answers: 4,736

    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_faraz_ Posts: 14Questions: 1Answers: 0

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

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

    it doesn't work tho .. :tired_face:

  • kthorngrenkthorngren Posts: 20,148Questions: 26Answers: 4,736

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

    Kevin

  • faraz_faraz_ Posts: 14Questions: 1Answers: 0

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

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    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

  • kthorngrenkthorngren Posts: 20,148Questions: 26Answers: 4,736

    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_faraz_ Posts: 14Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 20,148Questions: 26Answers: 4,736

    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_faraz_ Posts: 14Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 20,148Questions: 26Answers: 4,736
    edited August 2022

    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_faraz_ Posts: 14Questions: 1Answers: 0

    @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.

  • kthorngrenkthorngren Posts: 20,148Questions: 26Answers: 4,736

    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_faraz_ Posts: 14Questions: 1Answers: 0

    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_faraz_ Posts: 14Questions: 1Answers: 0
  • faraz_faraz_ Posts: 14Questions: 1Answers: 0

    icons does not important tho ..

  • faraz_faraz_ Posts: 14Questions: 1Answers: 0

    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);
                                },
    
                            },
                               
    
  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    Answer ✓

    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_faraz_ Posts: 14Questions: 1Answers: 0

    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'));
    
    
Sign In or Register to comment.