Data Table Print Button

Data Table Print Button

mrshahidaminmrshahidamin Posts: 5Questions: 1Answers: 0

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!

Answers

  • tangerinetangerine Posts: 3,054Questions: 24Answers: 357

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

  • colincolin Posts: 12,100Questions: 0Answers: 2,055

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

    Colin

  • mrshahidaminmrshahidamin Posts: 5Questions: 1Answers: 0

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

  • mrshahidaminmrshahidamin Posts: 5Questions: 1Answers: 0
    edited June 15

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

  • mrshahidaminmrshahidamin Posts: 5Questions: 1Answers: 0

    @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);
                });
    
    
            });
    
    
    
  • colincolin Posts: 12,100Questions: 0Answers: 2,055

    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

  • mrshahidaminmrshahidamin Posts: 5Questions: 1Answers: 0

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

Sign In or Register to comment.