dataTable 导出excel 打印

今天药忘吃喽~ 2021-10-08 06:26 385阅读 0赞

![20180516141357742][]

![20180516141405151][]

1.  <script src="../vendors/jquery/dist/jquery.min.js"></script>  
        <script src="../vendors/bootstrap/dist/js/bootstrap.min.js"></script>  
        <script src="../vendors/datatables.net/js/jquery.dataTables.min.js"></script>  
        <script src="../vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>  
        <script src="../vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>  
        <script src="../vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>  
        <script src="../vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>  
        <script src="../vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>  
        <script src="../vendors/datatables.net-buttons/js/buttons.print.min.js"></script>  
       <script src="../vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>  
        <script src="../vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>  
        <script src="../vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>  
        <script src="../vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script
2.  
3.

<table id="datatable-buttons" class="table table-striped table-bordered">
                          <thead>
                            <tr>
                              <th>Name</th>
                              <th>Position</th>
                              <th>Office</th>
                              <th>Age</th>
                              <th>Start date</th>
                              <th>Salary</th>
                            </tr>
                          </thead>
    
    
    
    
                          <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>
                            <tr>
                              <td>Ashton Cox</td>
                              <td>Junior Technical Author</td>
                              <td>San Francisco</td>
                              <td>66</td>
                              <td>2009/01/12</td>
                              <td>$86,000</td>
                            </tr>
                            <tr>
                              <td>Cedric Kelly</td>
                              <td>Senior Javascript Developer</td>
                              <td>Edinburgh</td>
                              <td>22</td>
                              <td>2012/03/29</td>
                              <td>$433,060</td>
                            </tr>
                            <tr>
                              <td>Airi Satou</td>
                              <td>Accountant</td>
                              <td>Tokyo</td>
                              <td>33</td>
                              <td>2008/11/28</td>
                              <td>$162,700</td>
                            </tr>
                          
                            <tr>
                              <td>Michael Bruce</td>
                              <td>Javascript Developer</td>
                              <td>Singapore</td>
                              <td>29</td>
                              <td>2011/06/27</td>
                              <td>$183,000</td>
                            </tr>
                            <tr>
                              <td>Donna Snider</td>
                              <td>Customer Support</td>
                              <td>New York</td>
                              <td>27</td>
                              <td>2011/01/25</td>
                              <td>$112,000</td>
                            </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>

$(document).ready(function() {
        $('#datatable-buttons').DataTable({
            language: {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            },
            dom: "Bfrtip",
            buttons: [{
                extend: "copy",
                className: "btn-sm"
            },
            {
                extend: "csv",
                className: "btn-sm"
            },
            {
                extend: "excel",
                className: "btn-sm"
            },
            {
                extend: "pdfHtml5",
                className: "btn-sm"
            },
            {
                extend: "print",
                className: "btn-sm"
            },
            ],
        })
    
    });

[20180516141357742]: /images/20211008/1d18535ae8024082bcb50668ba56a390.png
[20180516141405151]: /images/20211008/8afb76dcc14f49da865fabbba1762f58.png