Topic: DataTables buttons-option not supportet?

Gohl pro asked 4 years ago


Hello, i'm using datatables but i'm missing the buttons-feature?


Piotr Glejzer staff commented 4 years ago

Hi,
which buttons do you talking about?


Mighty Midget pro commented 4 years ago

https://datatables.net/extensions/buttons/examples/

I assume he means these buttons. They would be incredibly useful if implemented. Do you plan to do so?


Piotr Glejzer staff commented 4 years ago

It''s good idea so I will put that in our task to do. Thank you so much.


Piotr Glejzer staff answered 4 years ago


Hello,
I think this is not still available in our packages. You probably have to add javascript code with buttons for your own.

Best,
Piotr


Piotr Glejzer staff answered 4 years ago


Yes, we know that. We have a task for that to check it and implement it. MDB styles not connected with datatables buttons csv, pdf, excel . We didn't included tihs to our package yet but if you are including datatables script like :

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/datatables.min.js"></script>

and style like

  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.18/b-1.5.4/b-colvis-1.5.4/b-flash-1.5.4/b-html5-1.5.4/b-print-1.5.4/datatables.min.css" />

Buttons will work but styling is bad. How I said.


maskinarbeten premium commented 4 years ago

we're also in need of having the buttons in our project, any timeframe on when it could be implemented? Thanks :)


MDBootstrap staff commented 4 years ago

This topic awaits its turn in our production cycle. Thank you for pointing out that you want this feature to be done. I pushed this task to a higher priority list.


r.sonnenberg free commented 4 years ago

An implementation of the buttons would be great. The styling is bad when MDB styles are not connected.


MDBootstrap staff commented 4 years ago

Thanks for the feedback. I already pushed it higher on our priority list. Now we need to wait for the next release cycle. Someone should take care of this issue.


.jodadev. pro commented 4 years ago

Any update on this? Buttons are extremely important to use in DataTables. I would replace the plug-in that comes from MDB with the original one since it doesn't include the feature, but it then creates whole other problems on the page. So any update for this very important feature? Thanks!


Mighty Midget pro answered 4 years ago


Using your solution as a base I got the jquery version to work by replacing the datatables.js that comes with MDB Pro. I used a copy downloaded from datatables.net which included the necessary code for the buttons. I didn't replace the CSS as everything required is in the MDB CSS files.

All that is needed then is to set the options when calling the function.

$(document).ready(function () {
    $('#dtMaterialDesignExample').DataTable({
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'csv',
                className: 'btn btn-outline btn-sm',
                text: 'Save to CSV',
            },
            {
                extend: 'excel',
                className: 'btn btn-outline btn-sm',
                text: 'Save to Excel',
            },
            {
                extend: 'print',
                className: 'btn btn-outline btn-sm',
                text: 'Print Table',
            },
            {
                extend: 'pdf',
                className: 'btn btn-outline btn-sm',
                text: 'Save to PDF',
                orientation: 'landscape',
                pageSize: 'A4'
            },
            {
                extend: 'copy',
                className: 'btn btn-outline btn-sm',
                text: 'Copy to clipboard',
            }
        ]
    });
    $('#dtMaterialDesignExample_wrapper').find('label').each(function () {
        $(this).parent().append($(this).children());
    });
    $('#dtMaterialDesignExample_wrapper .dataTables_filter').find('input').each(function () {
        $('input').attr("placeholder", "Search");
        $('input').removeClass('form-control-sm');
    });
    $('#dtMaterialDesignExample_wrapper .dataTables_length').addClass('d-flex flex-row');
    $('#dtMaterialDesignExample_wrapper .dataTables_filter').addClass('md-form');
    $('#dtMaterialDesignExample_wrapper select').removeClass('custom-select custom-select-sm form-control form-control-sm');
    $('#dtMaterialDesignExample_wrapper select').addClass('mdb-select');
    $('#dtMaterialDesignExample_wrapper .mdb-select').material_select();
    $('#dtMaterialDesignExample_wrapper .dataTables_filter').find('label').remove();
});

This approach breaks the number of entries per page selector though.


Marta Wierzbicka staff commented 4 years ago

Hi, do you need more help with that? Best, Marta


Mighty Midget pro commented 4 years ago

Hi, since the datatables addon included with MDB doesn't contain the packages needed to implement datatable buttons and replacing with a package from datatables.net breaks some functionality - yes please.

Thank you



Datatables-buttons don't need anything special from MDB to work out of the box. Here's how I have it set up on our control panel:

import pdfMake from 'pdfmake/build/pdfmake';
import pdfFonts from 'pdfmake/build/vfs_fonts';
import 'datatables.net';
import 'datatables.net-buttons';
import 'datatables.net-buttons-bs4';
import '../node_modules/datatables.net-buttons/js/buttons.html5';
import '../node_modules/datatables.net-buttons/js/buttons.print';
import * as JSZip from 'jszip';

pdfMake.vfs = pdfFonts.pdfMake.vfs;
window.JSZip = JSZip;

const $table = $('#myTableWithButtons').DataTable({
  dom: 'Bfrtip',
  buttons: [
    {
      extend: 'csv',
      className: 'btn-mdb-color mr-2',
    },
    {
      extend: 'pdf',
      className: 'btn-mdb-color mr-2',
    },
    {
      extend: 'print',
      className: 'btn-mdb-color mr-2',
    },
  ],
});

Mighty Midget pro answered 4 years ago


Do you have a timeframe for this? Thank you.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.7.3
  • Device: windows
  • Browser: chrome
  • OS: win10
  • Provided sample code: No
  • Provided link: No