如何编辑DataTable()打印标题

时间:2017-08-16 14:18:13

标签: jquery datatable

我尝试在谷歌搜索如何更改数据表标题,我找到了这个帖子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

编辑1 尝试此代码

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

3 个答案:

答案 0 :(得分: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

答案 1 :(得分:1)

你的&#34;编辑1&#34;是在正确的轨道,但有一个错误。我已经更正了以下代码。这样做会使标题动态,即;它是在打印时生成的。这样就可以了,否则,在创建打印按钮时,标题会固定在字符串上......

App2

答案 2 :(得分:0)

Datatables buttons扩展不是关于你想要实现的目标,只需使用标题标记

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

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