Question

我有一个带有计数器列的表，但是当我打印它时，计数器列是空的。并且有一个＆＃39; id＆＃39;柱。这是隐藏在表格视图中的。

如何使用计数器列打印？！

<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
    var table = $('#example').DataTable( {
        "dom": 'lBfrtip',
        "buttons": [ 'print'],
        "ajax": "data/mine.txt",
        "columns": [
            { "data": "" },
            { "data": "id" },
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "extn" },
            { "data": "start_date" },
            { "data": "salary" },
            { "data": "functions" }
        ],
        "columnDefs": [ {
            "searchable": false,
            "orderable": false,
            "targets": -1,
            "data": null,
            "defaultContent": "<qwerty_1>Bla bla!</qwerty_1>"
        } ],
        "order": [[ 1, 'asc' ]]

    } );


    table.column(1).visible(false);

    $('#example tbody').on( 'click', 'qwerty_1', function () {
        var data = table.row( $(this).parents('tr') ).data();
        alert(data['id']);
    } );

    table.on( 'order.dt search.dt', function () {
        table.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
            cell.innerHTML = i+1;
        } );
    } ).draw();

} );

Answer 1

您在数据表文档中使用的counter column代码实际上并没有将该列的值添加到datatables内存中的表中，而只是在DOM中设置html。这就是打印表格时显示空白的原因。但是，您可以扩展“打印”功能以在打印页面上运行自定义脚本以创建所需的结果。

尝试将“按钮”声明更改为以下内容：

"buttons": [{
    extend: 'print',
    customize: function(win) {
        $(win.document.body).find( 'tr' ).each( function(index) {
             $(this).find('td:first').html(index);
        });
    }
 }],

如果你想玩它，我用jsfiddle

计算出来

Answer 2

要添加@ Adam的打印答案，请按以下步骤添加行计数器到Excel或CSV导出。

buttons: [
        {
            extend: 'excel',
            text: 'Export To Excel',
            exportOptions: {
                format: {
                    body: function (data, rowindex, colindex, node) {
                        // add row count to first column
                        return colindex === 0? rowindex + 1: data;
                    }
                }
            }
        }
    ]

CSV的工作方式相同。

DataTables，用计数器列打印

2 个答案: