如何使数据表页脚出现在打印页面上

时间:2018-11-26 10:03:01

标签: javascript jquery html

我在这里只看到两个问题,这没有用/我听不懂。这是我的桌子

<table class="table table-bordered make_datatable">
    <thead>
        <tr>
            <th>SL No</th>
            <th>Member Code</th>
            <th>Name</th>
            <th>Total</th>
        </tr>                                    
    </thead>
    <tbody>            
        <tr>
            <td></td>
            <td>11910</td>
            <td>KRATOS</td>
            <td>SH001</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="3" style="text-align:right">Grand Total:</th>
            <th></th>
        </tr>
    </tfoot>
</table>

其他所有内容都可以正确打印,并且我现在使用了customize选项来打印页脚,但我想知道如何将其与数据表(用于数据表的jquery)一起打印:

var make_datatable = $('.make_datatable').DataTable( {
        "columnDefs": [{
            "searchable": false,
            "orderable": false,
            "targets": 0,
        }],

        "searching": false,
        "order": [ 1, 'asc'],
        dom: 'Blfrtip',
        buttons: [
        {   
            extend: 'print',
            title : ' ', 
            text: '<i class="glyphicon glyphicon-print"></i><span>Print</span>',
            className: 'btn btn-info printclass textSan' ,
            customize: function ( win ) {
                $(win.document.body)
                    .prepend(
                        '@include("report/memberreportheader")'
                    );
                $(win.document.body)
                    .append(
                        '@include("report/shop/printmemberconsolidate")'
                    )
            }
        },
        ],
    });

1 个答案:

答案 0 :(得分:0)

使用 footer:true 解决了该问题,并删除了colspan并添加了th以匹配其他行

export function addProject(data) {
const token = localStorage.getItem(CONFIG.AUTH_TOKEN);
const url = `${CONFIG.API_BASE_URL}/api/projects`;
    axios.post(url, data, { headers:{ Authorization:`${token}`}}).then(function(response){
        console.log(response);
        return response;
    })
    .catch(function(response){
        console.log(response);
        return response;
    })
}

HTML:

buttons: [
                    {
                        extend: 'print',
                        footer: true,
                        title: ' ',
                        text: '<i class="glyphicon glyphicon-print"></i><span>Print</span>',
                        className: 'btn btn-info printclass textSan',
                        customize: function (win) {
                            $(win.document.body)
                                .prepend(
                                    '@include("report/memberreportheader")'
                                );
                        }
                    },
                ]