jQuery datatable 左上角改粘贴，导出，复制按钮

╰半夏微凉° 2022-12-05 01:36 207阅读 0赞

图一  
去除部分  
![在这里插入图片描述][2020090818191511.png_pic_center]  
图二  
修改后  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTExMTI4NA_size_16_color_FFFFFF_t_70_pic_center]  
第一步  
引入datatable的相关js，css

//css
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">

//js
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

第二步  
引入按钮功能相关js，css

//css
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css">

//js
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>

ps：添加特殊按钮功能请去官网引入相关js与css  
datatable官网参考页https://datatables.net/download/release

第三步  
html代码

//css
    <table id="example" class="display" style="width:100%">
        <thead>
        <tr>
            <th></th>
            <th >Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Salary</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th></th>
            <th>Tiger Nixon</th>
            <th>System Architect</th>
            <th>Edinburgh</th>
            <th>$320,800</th>
        </tr>
        <tr>
            <th></th>
            <th>Tiger Nixon2</th>
            <th>System Architect</th>
            <th>Edinburgh</th>
            <th>$320,800</th>
        </tr>
        </tbody>
    
        </table>

js代码

//css
    $(document).ready(function(){
        
        var table = $('#example').DataTable( {
        
            dom: '<"pull-left"B>ft<"pull-left"i>p',
            buttons: [
                {
        
                    text: '<span class="glyphicon glyphicon-save"    title="导出"><font>导出</font></span>',
                    extend: 'csv'
                },
                'copy',
            ],
        } );

创建成功

[2020090818191511.png_pic_center]: /images/20221123/af8a0b707477478b9d0fae3f5ef094d7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTExMTI4NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/af1142275ac14b95a433e76e8ef52830.png