如何编辑 DataTable() 打印标题答案

【问题标题】：How to edit DataTable() Print Title如何编辑 DataTable() 打印标题
【发布时间】：2017-08-16 14:18:13
【问题描述】：

我尝试在谷歌搜索如何更改数据表标题，我发现了这个线程Datatables API: how to change Print page title

这个帖子的最佳答案是

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

我不明白它是如何工作的

这是我想要改变的图片 DataTable Website Customized Print Example

EDIT 1尝试此代码

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

【问题讨论】：

标签： jquery datatable

【解决方案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

【讨论】：

很高兴为您提供帮助

【解决方案2】：

您的“编辑 1”在正确的轨道上，但有一个错误。我在下面更正了代码。这样做会使标题动态化，即；它是在打印时生成的。这使您可以否则，创建打印按钮时，标题将固定在字符串中...

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

【讨论】：

【解决方案3】：

Datatables buttons 扩展名与您要实现的目标无关，只需使用标题标签

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

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

【讨论】：