如何编辑 DataTable() 打印标题

Question

我在谷歌上搜索如何更改datatable标题，找到了这个帖子Datatables API: how to change Print page title

这个帖子中最好的答案是：

 var table = $('table').DataTable({
   buttons: [
      extend: 'print',
      title: function(){
         return foo.title
      }
   ]
});

我不理解如何使用它，因为这会在控制台中给我一个'indexOf...'错误。

这是我想要更改的图片： DataTable网站定制打印示例

编辑1 尝试此代码

 var table = $('table').DataTable({
   buttons: [
      extend: 'print',
      title: function(){
        var printTitle = 'New Title';
         return printTitle.title
      }
   ]
});

- Mark Angelo

Answer 1

请看：

https://datatables.net/extensions/buttons/examples/print/customisation.html

您可以在按钮扩展中使用标题：

title: 'Datatables example: Customisation of the print view window'

或者只是标签

<caption>Datatables example: Customisation of the print view window</caption>

调试一个例子： https://jsfiddle.net/f14ykjem/1/

    <table id="example" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>Edinburgh</td>
                    <td>61</td>
                    <td>2011/04/25</td>
                    <td>$320,800</td>
                </tr>
                <tr>
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>Tokyo</td>
                    <td>63</td>
                    <td>2011/07/25</td>
                    <td>$170,750</td>
                </tr>
      </tbody>
    </table>

    $('#example').DataTable( {
            dom: 'Bfrtip',
            buttons: [
                {
                    extend: 'print',
                    text: 'ButtonLabelHere',
                    title: 'Datatables example: Customisation of the print view window',
                    customize: function ( win ) {
                        $(win.document.body)
                            .css( 'font-size', '10pt' )
                            .prepend(
                                '<img src="http://datatables.net/media/images/logo-fade.png" style="position:absolute; top:0; left:0;" />'
                            );

                        $(win.document.body).find( 'table' )
                            .addClass( 'compact' )
                            .css( 'font-size', 'inherit' );
                    }
                }
            ]
    });

**External code:**

//code.jquery.com/jquery-1.12.4.js
https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.4.0/js/dataTables.buttons.min.js
//cdn.datatables.net/buttons/1.4.0/js/buttons.print.min.js

https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css
https://cdn.datatables.net/buttons/1.4.0/css/buttons.dataTables.min.css

- Caique Romero

---

我很高兴能够帮助。 - Caique Romero

Answer 2

您的“编辑1”是正确的，但有一个错误。我在下面纠正了代码。以这种方式进行操作使标题动态化，即：它在打印时生成。这样可以使您 您还可以在每次打印时更改标题。否则，在创建打印按钮时，标题将被固定为字符串...

var table = $('table').DataTable({
    buttons: [
        extend: 'print',
        title: function(){
            var printTitle = 'New Title';
            return printTitle
        }
    ]
});

- Jonesy78

Answer 3

Datatables buttons扩展并不是关于你想要实现什么，只需使用标题标签即可。

<table>
    <caption id="tablecaption"></caption>
    ....
</table>

$('#tablecaption').text(foo.title);

- Vanojx1