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

Uh oh!

Uh oh!

Print page customization #3101

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 3 replies

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Print page customization #3101

Uh oh!

Uh oh!

markplus Nov 30, 2023

Replies: 1 comment · 3 replies

Uh oh!

yajra Nov 30, 2023 Maintainer

Uh oh!

markplus Dec 7, 2023 Author

Uh oh!

yajra Dec 12, 2023 Maintainer

Uh oh!

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