How to obtain the page numbers and total number of pages for each page when printing a bootstrap table, and fill them in the header of the table?

Question

How to obtain the page numbers and total number of pages for each page when printing a bootstrap table, and fill them in the header of the table?

MuXuanYa opened this issue 5 months ago · comments

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>

    <th:block th:include="include :: header('111')"/>
    <link rel="stylesheet" th:href="@{/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/ajax/libs/layui/css/modules/laydate/default/laydate.css}">
    <style>
        .table-hide {
            display: none;
        }

        @media print {
            @page {
                size: landscape;
            }

            body {
                font-size: 8pt; /* 修改字体大小 */
            }

            table {
                width: 100%; /* 表格宽度设置为100% */
                border-collapse: collapse; /* 合并边框 */
                page-break-inside: avoid; /* 避免表格内部分页 */
            }

            tbody tr {
                height: 45px;
                page-break-inside: avoid;
                page-break-after: auto;
            }
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 select-table table-striped">
            <div class="bootstrap-table table-striped table1">
                <table id="table1" class="table-bordered"></table>
            </div>
            <div style="width: 100%;margin: 10px auto; text-align: center;">
                <button id="btn_print" type="button" class="layui-btn layui-btn-normal layui-btn-sm">打印</button>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var type = "print"
    var sumClaimAmount = 0;

    function searchForm() {
        $.ajax({
            type: "GET",
            dataType: "json",
            url: prefix + "/url",
            error: function (request) {
                $.modal.alertError("系统错误");
            },
            success: function (data) {
                console.log(data, 'data')
                var objTable= {
                    exportUrl: prefix + "/url",
                    pagination: false,
                    striped: true,
                    showSearch: false,
                    showRefresh: true,
                    columns: [
                        [{
                            title: "第一行标题",
                            valign: "middle",
                            align: "center",
                            colspan: 14,
                        }],
                        [{
                            title: "第二行标题",
                            valign: "middle",
                            align: "left",
                            colspan: 5,
                        }, {
                            title: "第二行标题",
                            valign: "middle",
                            align: "left",
                            colspan: 6,
                        }, {
                            title: "display pageInfo",
                            valign: "middle",
                            align: "left",
                            colspan: 3,
                            class: 'pageInfo'
                        }],
                        [
                        	{
                                title: '序号',
                                align: "center",
                                width: 40,
                                formatter: function (value, row, index) {
                                    return index + 1;
                                }
                            },
                            // 各个列字段
                        ]
                    ],
                    data: data.data.listMap
                };
                initTable1(objTable);
            }
        });
    }

    function initTable1(objTable) {
        $('#table1').bootstrapTable('destroy');
        $('#table1').bootstrapTable(objTable);

        var currentPage = (window.pageYOffset / window.innerHeight + 1);
        var totalPages = Math.ceil(document.body.scrollHeight / window.innerHeight);
        $('.pageInfo').text('第 ' + currentPage + ' 页，共 ' + totalPages + ' 页');
    }
    
    $("#btn_print").click(function (event) {
        $(".fixed-table-loading").html("");
        $("#table1").printThis({
            debug: false,
            importCSS: true,
            importStyle: true,
            printContainer: true,
            pageTitle: "",
            removeInline: false,
            header: null,
            formValues: false,
            doctypeString: '<!DOCTYPE html>',
            printDelay: 0,
        });
    });
    searchForm();
</script>```

Jason Day · Answer 1 · Thu Mar 14 2024 00:27:13 GMT+0800 (China Standard Time)

You may be able to use CSS to achieve this through the use of @page:
https://developer.mozilla.org/en-US/docs/Web/CSS/@page