Open Closed

add buttons (pdf, excel ,ect ... ) to Datatable #3143


User avatar
0
yasin.hallak.89@gmail.com created
  • ABP Framework version: v5.2.1
  • UI type: MVC
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): no
  • Steps to reproduce the issue:"

Hi Support

I want to add buttons (pdf, excel ,ect ... ) to Datatable in index.js.

please any idea for this


5 Answer(s)
  • User Avatar
    0
    EngincanV created
    Support Team .NET Developer

    Hi, you can use the rowAction and define a single item as below:

    {
        //...
        title: l('MyButton'),
        target: 0,
        rowAction: {
            items:
                [
                    {
                        text: l('MyButtonText'),
                        visible: abp.auth.isGranted('MyPermissionGroup.Default'), //add permission
                        action: function (data) {
                            //your logic (when clicked the button)
                        }
                    }
                ]
            }
        }
    }
    

    This will be rendered as a button.

  • User Avatar
    0
    yasin.hallak.89@gmail.com created

    Hi, you can use the rowAction and define a single item as below:

    { 
        //... 
        title: l('MyButton'), 
        target: 0, 
        rowAction: { 
            items: 
                [ 
                    { 
                        text: l('MyButtonText'), 
                        visible: abp.auth.isGranted('MyPermissionGroup.Default'), //add permission 
                        action: function (data) { 
                            //your logic (when clicked the button) 
                        } 
                    } 
                ] 
            } 
        } 
    } 
    

    This will be rendered as a button.

    Hi EngincanV . but I want to use this button Like this screenshot below:

  • User Avatar
    0
    EngincanV created
    Support Team .NET Developer

    If you want buttons outside of the Datatable, you can directly add it to your .cshtml file as below:

    <abp-card>
        <abp-card-body>
            <button class="btn btn-primary mb-3">My Button</button>
            <abp-table striped-rows="true" id="MyTable" class="nowrap"></abp-table>
        </abp-card-body>
    </abp-card>
    

    Also instead of this, you might want to use Page Toolbar Extensions.

  • User Avatar
    0
    yasin.hallak.89@gmail.com created

    If you want buttons outside of the Datatable, you can directly add it to your .cshtml file as below:

    <abp-card> 
        <abp-card-body> 
            <button class="btn btn-primary mb-3">My Button</button> 
            <abp-table striped-rows="true" id="MyTable" class="nowrap"></abp-table> 
        </abp-card-body> 
    </abp-card> 
    

    Also instead of this, you might want to use Page Toolbar Extensions.

    I want to use the same buttons in Datatables Library so that I don't have to write any Implemenation for these buttons in the server-side .. it is Implemented by default with DataTables

    you can just write this code in js :

    $(document).ready(function() { $('#example').DataTable( { dom: 'Bfrtip', buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ] } ); } );

  • User Avatar
    0
    EngincanV created
    Support Team .NET Developer

    To use the Buttons extension from DataTable, you need to add some additional js files to your application.

    • https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js
    • https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js
    • https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js -> if you want excel button
    • https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js -> if you want pdf button

    Alternatively, you can use the download builder of Datatables (https://datatables.net/download/) to ensure install all related packages.

    Then you can use it like you mentioned:

    $(document).ready(function() {
        $('#example').DataTable( {
            dom: 'Bfrtip',
            buttons: [
                'copyHtml5',
                'excelHtml5',
                'csvHtml5',
                'pdfHtml5'
            ]
        } );
    } );
    

    It's not fully related with ABP Framework, you can follow the documentation of Datatables (Buttons Extension) and make the necessary configurations (you need to add the above js files to your project) to make it work.

Made with ❤️ on ABP v9.1.0-preview. Updated on December 05, 2024, 12:19