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

5 Answer(s)

• 

  0

  EngincanV created 2 years ago

  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.

  Save Cancel
• 

  0

  yasin.hallak.89@gmail.com created 2 years ago

  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:

  

  Save Cancel
• 

  0

  EngincanV created 2 years ago

  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.

  Save Cancel
• 

  0

  yasin.hallak.89@gmail.com created 2 years ago

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

  Save Cancel
• 

  0

  EngincanV created 2 years ago

  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.

  Save Cancel

  2