Print page customization #3101

markplus · 2023-11-30T06:11:11Z

markplus
Nov 30, 2023

currently if I click on print the page opens but it doesn't give me the options to print, the table remains in full screen but I don't see the side options box and the print button.
How can I customize the table print page? I would like to insert the logo, page number, table name top header and give a suitable format to the page, I don't know where to start to do this, any help?

DataTables warning: table id=tickets - Invalid JSON response. For more information about this error

<script>
        $(document).ready(function() {
            var numberRenderer = $.fn.dataTable.render.number( ',', '.',   ).display;
            var table = $('#tickets2023').DataTable({
                processing: true,
                serverSide: true,
                dom: 'Bfrtip',
                filter: true,
                pageLength : 12,
                responsive: true,
                lengthChange: false,
                autoWidth: false,
                fixedHeader: true,
                orderCellsTop: true,
                select: false,
                paging: false,
                info: false,
                buttons: ['csv', 'excel', 'pdf', 'print'],
                language: {
                    url: "//cdn.datatables.net/plug-ins/1.13.1/i18n/it-IT.json"
                },
                "footerCallback": function ( row, data, start, end, display ) {
                    var api = this.api(), data;
                    var intVal = function ( i ) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '')*1 :
                            typeof i === 'number' ?
                                i : 0;
                    };
                    var Totale = api
                    .column( 1 )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );
                    var Positivo = api
                    .column( 2 )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );
                    var Negativo = api
                    .column( 3 )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );
                    $( api.column( 0 ).footer() ).html('TOTALE');
                    $( api.column( 1 ).footer() ).html(''+numberRenderer( Totale ));
                    $( api.column( 2 ).footer() ).html(''+numberRenderer( Positivo ));
                    $( api.column( 3 ).footer() ).html(''+numberRenderer( Negativo ));
                }
            });
        });
    </script>

yajra · 2023-11-30T08:27:41Z

yajra
Nov 30, 2023
Maintainer

Server-side or client-side print?

For server-side, override the $printPreview property of your dataTable class. Copy datatables::print blade file for the template.

3 replies

markplus Dec 7, 2023
Author

in both cases it doesn't work for me, I would like to have a personalized print page so as to have the letterhead with the logo and the style of the model I use. Where can I find documentation to do this? Default printing doesn't currently work either

yajra Dec 12, 2023
Maintainer

Unfortunately, I think this is not documented yet. You need to browse the default DataTable service class.

Will try to document this when I get the chance.

Example:

class UsersDataTable extends DataTable
{
    protected string $printPreview = 'users::_print';

Users Module with _print.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Print Table</title>
    <meta charset="UTF-8">
    <meta name=description content="">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <style>
        body {margin: 20px}
    </style>
</head>
<body>

<h3>My Custom Users Table</h3>
<table class="table table-bordered table-condensed table-striped">
    @foreach($data as $row)
        @if ($loop->first)
            <tr>
                @foreach($row as $key => $value)
                    <th>{!! $key !!}</th>
                @endforeach
            </tr>
        @endif
        <tr>
            @foreach($row as $key => $value)
                @if(is_string($value) || is_numeric($value))
                    <td>{!! $value !!}</td>
                @else
                    <td></td>
                @endif
            @endforeach
        </tr>
    @endforeach
</table>
</body>
</html>

markplus Dec 13, 2023
Author

Thanks, now I'll try to do as you advised

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Print page customization #3101

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 3 replies

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Print page customization #3101

markplus Nov 30, 2023

Replies: 1 comment · 3 replies

yajra Nov 30, 2023 Maintainer

markplus Dec 7, 2023 Author

yajra Dec 12, 2023 Maintainer

markplus Dec 13, 2023 Author

markplus
Nov 30, 2023

Replies: 1 comment 3 replies

yajra
Nov 30, 2023
Maintainer

markplus Dec 7, 2023
Author

yajra Dec 12, 2023
Maintainer

markplus Dec 13, 2023
Author