Data Table Print Button

mrshahidamin

My JS is here:

 $(document).ready(function () {
        $("#GridViewReport").prepend($("<thead></thead>").append($("#GridViewReport").find("tr:first"))).dataTable({
            "paging": true,
            "ordering": true,
            "order": [[7, "desc"]],
            "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
               buttons: [
            'print'
        ]
        });
    });

I am not getting any errors in my console, but the print button is still missing on my page!

tangerine

Are you including the Buttons extension?
https://datatables.net/extensions/buttons/

colin

As well as checking the files as tangerine suggested, you also need to include 'B' in dom,

Colin

mrshahidamin

@tangerine
Yes, all files are included in the project.

mrshahidamin

dom: 'Bfrtip',
Thanks, it's fixed!

mrshahidamin

@colin Data table buttons are not showing with delete row functionality. Any help?

        $(document).ready(function () {


            $("#Report_Table").prepend($("<thead></thead>").append($("#Report_Table").find("tr:first"))).dataTable({
                "paging": true,
                "ordering": true,
                //"order": [[7, "desc"]],
                "bInfo": true,
                dom: 'lBfrtip',
                "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
                buttons: [
                    {
                        extend: 'print',

                        //autoPrint: false,
                        text: 'Print Results',
                        title: '',
                        exportOptions:
                        {
                            columns: ':visible'
                        },
                        //title: 'Customisation of the print view window',
                        messageTop: '',
                        //messageTop: 'This print was produced using the Print button for DataTables',
                        customize: function (win) {
                            $(win.document.body)
                                .css('font-size', '10pt')

                            $(win.document.body).find('table')
                                .addClass('compact')
                                .css('font-size', 'inherit');

                        }
                    },



                    {
                        extend: 'excel',
                        text: 'Export to Excel',
                        title: 'UnderProcess Report',
                        exportOptions:
                        {
                            columns: ':visible'
                        }
                    },

                    'colvis'
                ],
                columnDefs: [{
                    //targets: -1,
                    visible: false
                }],
            });
              //Delete row
            var table = $('#Report_Table').DataTable();
            $('#Report_Table tbody').on('click', 'tr', function () {
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                }
                else {
                    table.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                }
            });

            $('#button').click(function () {
                table.row('.selected').remove().draw(false);
            });


        });

colin

I suspect it's something to do with that first line, and how you're initialising the table - I imagine you're initialising two tables, with line 56 being the second without the -iotion dom.

If that doesn't help, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

mrshahidamin

@colin thanks for your kind help and prompt response. That issue was due to the sequence of JS files included in the project!