狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

datatables是一款基于JQuery的表格插件，主要用來優(yōu)化table，支持表格分頁、搜索、排序、顯示條數(shù)、異步加載等眾多好用的功能

項目地址：https://datatables.net/

基本使用

需要用到的JS和CSS文件位于項目代碼下的media目錄中，需要將這個目錄中的對應文件放入你的項目里，這一步不贅述

1. 引入CSS/JS文件，由于Datatables是基于Jquery的，所以要先引入Jquery，這里我們都直接引入CDN的地址

<!-- 加載 Jquery --><script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><!-- 加載 Datatables --><link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" /><script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

1. 初始化Datatables

<table id="myTable" class="display" style="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>
    <tbody>
        <tr>
            <td>Ops Coffee</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>18</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <!-- 中間省略一些tr數(shù)據(jù) -->
        <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>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot></table>
$(document).ready( function () {
    $('#myTable').DataTable();
});

1. 完成以上兩步可以看到頁面效果如下

功能開啟/關(guān)閉

默認界面下除了原始的table外，還為table額外增加了搜索、列排序、分頁及信息顯示這些內(nèi)容，如果不需要其中一個或多個可以通過以下設(shè)置隱藏

$('#myTable').DataTable({    "paging": false,    "ordering": false,    "info": false,    "searching": false,
});

paging： 控制分頁是否開啟，默認開啟，開啟后會顯示表格左上角的每頁行數(shù)選擇和右下角的頁碼跳轉(zhuǎn)

ordering： 控制是否進行排序，默認開啟，且默認會對第一列數(shù)據(jù)進行排序

info： 控制是否顯示表格左下角的信息，默認開啟

searching： 控制是否顯示表格右上角的搜索，默認開啟

排序配置

單列排序

可以通過order來設(shè)置初始排序的列以及排序方向

"order": [[ 3, "desc" ]],

列號默認從0開始算起，這里的3實際上對應的是第4列，這點要注意，以下所有用到列號的地方都是從0開始

注意：開啟stateSave之后會導致columnDefs失效，兩個參數(shù)盡量不要同時設(shè)置

多列排序

當然也可以在order里邊配置同時按多列排序

"order": [[ 3, "desc" ], [ 0, "desc" ]],

如上配置的意思是先按照3列進行排序，如果3列相同，則再按照0列進行排序

搜索框提示設(shè)置

"fnPreDrawCallback": function( oSettings ) {
    $('.dataTables_filter input').attr({'name':'search','placeholder': '按名稱搜索'});//提示},

屏蔽錯誤提示和自定義錯誤提示

官方參考：https://datatables.net/reference/event/error

//初始化之前設(shè)置$.fn.dataTable.ext.errMode = 'none';       //屏蔽掉報錯彈窗
 $('#Table')//初始化的datatables
    .on( 'error.dt', function ( e, settings, techNote, message ) {    //接收并打印錯誤信息，也可自行添加相應處理方法
        console.log( 'An error has been reported by DataTables: ', message );
    } ).DataTable({    	//其他配置
    });

隱藏列

可以通過columnDefs來設(shè)置列屬性

"columnDefs": [
    {
        "targets": [ 2 ],
        "visible": false,
        "searchable": false
    },
    {
        "targets": [ 3 ],
        "visible": false,
    }]

targets： 指定列

visible： 是否可顯示

searchable： 是否可搜索，當僅設(shè)置visable為false，但searchable不設(shè)置時這一列仍然可以被搜索

注意：開啟stateSave之后會導致columnDefs失效，兩個參數(shù)盡量不要同時設(shè)置

動態(tài)隱藏列

/**
 * #tagTable 表格id
 * column(5) 第6列
 * visible(false) true 顯示 false不顯示
 */$('#tagTable').DataTable().column(5).visible(false);

語言配置

默認提示語都是英文，可以通過language來設(shè)置為中文

"language": {
    "decimal": "",    "emptyTable": "表中數(shù)據(jù)為空",    "info": "顯示第 _START_ 至 _END_ 項結(jié)果，共 _TOTAL_ 項",    "infoEmpty": "顯示第 0 至 0 項結(jié)果，共 0 項",    "infoFiltered": "(由 _MAX_ 項結(jié)果過濾)",    "InfoPostFix": "",    "thousands": ",",    "lengthMenu": "顯示 _MENU_ 項結(jié)果",    "loadingRecords": "載入中...",    "processing": "處理中...",    "search": "搜索:",    "zeroRecords": "沒有匹配結(jié)果",    "Paginate": {
        "sFirst": "首頁",        "sPrevious": "上一頁",        "sNext": "下一頁",        "sLast": "尾頁"
    },
    "Aria": {
        "sSortAscending": ": 以升序排列此列",        "sSortDescending": ": 以降序排列此列"
    }
}

狀態(tài)保持

可以通過stateSave來設(shè)置是否保持狀態(tài)，stateSave會調(diào)用HTML5的localStorage和sessionStorageAPIs將頁面狀態(tài)數(shù)據(jù)保存在瀏覽器本地，當你刷新頁面時會自動加載這些狀態(tài)信息，這些狀態(tài)可以是你的排序信息、當前頁碼以及已輸入的搜索數(shù)據(jù)等

"stateSave": true,

分頁類型

可以通過pagingType來設(shè)置分頁類型

"pagingType": "simple_numbers",

simple_numbers： 類型會顯示上一頁、下一頁按鈕和頁碼，這也是默認的分頁類型

其他幾種分頁類型如下：

numbers： 僅顯示頁碼

simple： 僅顯示上一頁、下一頁按鈕

full： 僅顯示首頁、尾頁、上一頁和下一頁按鈕

full_numbers： 顯示首頁、尾頁、上一頁、下一頁按鈕和頁碼

first_last_numbers： 顯示首頁、尾頁按鈕和頁碼

滾動配置

當table的寬、高超過頁面設(shè)置大小時，可以通過以下配置來添加滾動條

"scrollX": "true","scrollY": "200px","scrollCollapse": true,

scrollX： 允許水平滾動條

scrollY： 設(shè)置垂直body的高度，當超過這個這個高度時出現(xiàn)垂直滾動條

scrollCollapse： 設(shè)置當數(shù)據(jù)占用高度小于scrollY設(shè)置的高度時自動收縮body高度

數(shù)據(jù)加載

上篇文章中的所有數(shù)據(jù)都是直接渲染的html中的table數(shù)據(jù)，datatables還支持其他幾種數(shù)據(jù)源，以方便實現(xiàn)更靈活的控制

從數(shù)組中獲取

<table id="myTable-x" class="display" style="width:100%"></table>
$(document).ready(function() {    var dataSet = [
      ["3","https://ops-coffee.cn","2018-07-03"],
      ["9","https://demo.ops-coffee.cn", "2019-08-06"],
    ];
    $('#myTable-x').DataTable({        "data": dataSet,        "columns": [
          { title: "Id" },
          { title: "Site" },
          { title: "Date" },
        ]
    })
});

data： 指定數(shù)組

columns： 配置每一列的title

注意：從數(shù)組中獲取數(shù)據(jù)一定要有表頭，如果沒有則可能會報下邊的錯：

Uncaught TypeError: Cannot read property 'aDataSort' of undefined

解決方法就是datatables添加columns配置，或者寫上table的thead

<table id="myTable-x" class="display" style="width:100%">
    <thead>
        <tr>
            <th>ID</th>
            <th>Site</th>
            <th>Date</th>
        </tr>
    </thead></table>

從對象中獲取

<table id="myTable-x" class="display" style="width:100%"></table>
$(document).ready(function() {    var dataSet = [
      {"Id":"3","Site":"https://ops-coffee.cn","Date":"2018-07-03"},
      {"Id":"9","Site":"https://demo.ops-coffee.cn","Date":"2019-08-06"},
    ];
    $('#myTable-x').DataTable({        "data": dataSet,        "columns": [
          {"data": "Id", "title": "Id"},
          {"data": "Site", "title": "Site"},
          {"data": "Date", "title": "Date"},
        ]
    })
});

使用對象數(shù)組，一定要配置columns的data，告訴DataTables每列對應的屬性，title配置可選，添加title會給表格添加表頭

從實例中獲取

$(document).ready(function() {    function dataSet(id, site, date) {      this.id = id;      this.site = site;      this.date = date;
    };
    $('#myTable-x').dataTable({      data: [        new dataSet("3", "https://ops-coffee.cn", "2018-07-03"),        new dataSet("9", "https://demo.ops-coffee.cn", "2019-08-06"),
      ],      columns: [
          {"data": "id", "title":"Id"},
          {"data": "site", "title":"Site"},
          {"data": "date", "title":"Date"}
      ]
    });
});

Ajax異步獲取

Datatables還支持Ajax的方式異步加載數(shù)據(jù)，簡單的方式是直接配置一個url地址即可

$(document).ready(function() {
    $('#myTable-x').dataTable({        "ajax": 'sdata.json'
    });
});

ajax接收的數(shù)據(jù)可以是數(shù)組或者對象，注意columns的配置，可以對應參考前文兩種格式數(shù)據(jù)的處理

Ajax異步刷新

$('#tagTable').DataTable().reload() 直接刷新

$('#tagTable').DataTable().ajax.url() 支持新的url異步刷新

$('#tagTable').DataTable().ajax.url('{:url("index/material/listAll")}?seachClassId='+id).load();

表格重載

var table = $('#example').DataTable();
table.ajax.reload();

或者

$('#example').DataTable().ajax.reload();

當前頁面重載

//重新加載當前頁，且保持當前頁碼不變$('#'+tableId).DataTable().draw(false);true：重置表格的初始狀態(tài)，回到第一頁，false：只是重新加載當前頁，且保持當前頁碼不變。

列數(shù)據(jù)處理

上邊的table可以發(fā)現(xiàn)有個site列的內(nèi)容是一個網(wǎng)址，如果我們想讓網(wǎng)址能夠點擊該如何實現(xiàn)呢？可以利用columns的render屬性對展示結(jié)果進行更改

$(document).ready(function() {
    $('#myTable-x').dataTable({        "ajax": 'sdata.json',        "columns": [
            {"data": "id", "title":"Id"},
            {                "data": "site", 
                "title":"Site",                "render": function (data, type, row) {                  return '<a href='+data+' target="_blank">'+data+'</a>'
                }
            },
            {"data": "date", "title":"Date"}
        ]
    });
});

render后邊跟了個函數(shù)，每當數(shù)據(jù)表需要獲取列中某個單元格的數(shù)據(jù)時render函數(shù)都會執(zhí)行，且函數(shù)可能會被執(zhí)行多次，函數(shù)默認接收三個參數(shù)，意思分別是：

data： 單元格的具體數(shù)據(jù)，例如https://ops-coffee.cn

type： 標識了這一次調(diào)用的請求類型，會有filter、display、type、sort

row： 這一行的完整數(shù)據(jù)源，如果像Demo示例傳了對象數(shù)據(jù)，那么可以通過row.site獲取到這一行site列的數(shù)據(jù)

拿到參數(shù)進行一系列的處理后可以通過return返回最終想要展示的內(nèi)容

當然也可以通過columns在表格末尾添加一列以實現(xiàn)編輯、刪除的按鈕展示

"columns": [
    {"data": "id", "title":"Id"},
    {        "data": "site", 
        "title":"Site",        "render": function (data, type, row) {          return '<a href='+data+' target="_blank">'+data+'</a>'
        }
    },  
    {"data": "date", "title":"Date"},
    {   
      "data": "id",      "title": "操作",      "render": function (data, type, row) {        return '<a href="#update/'+row.id+'/" class="btn btn-warning btn-sm">編輯</a> ' +               '<a href="#delete/'+row.id+'/" class="btn btn-danger btn-sm">刪除</a>'
      } 
    }   
]

最終呈現(xiàn)結(jié)果如下圖

Dom操作

如果我不需要datatables顯示左上角的每頁顯示條數(shù)信息，而要換成一個添加按鈕改怎么做呢？這里可以借助datatables的dom來實現(xiàn)

默認情況下表格都會有左上角的每頁顯示條數(shù)、右上角的搜索、左下角的表格信息、右下角的分頁、中間的數(shù)據(jù)加載等待以及表格本身，這些都是datatables的DOM，它們實際上就是一個div包裹起來的select、input之類的html標簽，datatables中的每個DOM都與一個字母相對應，他們的對應關(guān)系如下：

l： length，代表左上角的每頁顯示條數(shù)控件

f： filtering，代表右上角的搜索控件

t： table，代表表格本身

i： information，代表左下角的表格信息控件

p： pagination，代表右下角的分頁控件

r： processing，代表中間數(shù)據(jù)加載等待提示控件

這些控件在datatables里可以通過配置dom來控制他們的顯示位置，以及是否顯示，默認的顯示順序是lfrtip

$('#myTable-x').dataTable({    "dom": 'lfrtip'})

你如果不想顯示某個控件，可以通過去掉dom配置項里對應的字母實現(xiàn)，同時Datatables支持四個自定義的標簽，通過這四個標簽可以方便的來修改DOM的展示

< > 尖括號就代表html里的div

<"class"> 代表了添加了class的div

<"#id"> 代表了添加了id的div

<"#id.class"> 代表添加了id和class的div

我們想把右上角的每頁顯示條數(shù)控件換成添加按鈕的話可以這樣寫

$('#myTable-x').dataTable({    "dom": '<"#add-btn.toolbar">frtip'})
$("#add-btn.toolbar").html(  '<button href="#add" class="btn btn-success btn-sm"> + 添加</button>')

遇到樣式問題，需要添加css

<style type="text/css">
  .toolbar {float:left}</style>

這樣就完美實現(xiàn)了

服務(wù)器端處理

Datatables支持使用服務(wù)端進行數(shù)據(jù)處理，當開啟服務(wù)端數(shù)據(jù)處理后，Datatables將在頁面執(zhí)行分頁、排序、搜索等操作時向服務(wù)端發(fā)出Ajax請求，Ajax請求會傳遞許多變量給服務(wù)端，服務(wù)端接收到請求后根據(jù)變量的值對數(shù)據(jù)進行處理，處理完成按照固定的格式返回給前端頁面，頁面對返回的數(shù)據(jù)進行渲染提供給用戶查看

開啟服務(wù)器模式只需要兩個設(shè)置項serverSide和ajax

$('#myTable-x').dataTable({    "serverSide": true,    "processing": true,    "ajax": '/api/site/data'})

serverSide： 為true時表示開啟服務(wù)端處理模式

processing： 為true時會開啟數(shù)據(jù)處理中的提示，非必須

ajax： 指定服務(wù)器端的地址，可以像上邊一樣是個字符串，也可以像jQuery.ajax一樣作為一個對象使用，例如我想傳遞額外的參數(shù)（datatables默認會給后端傳遞許多的參數(shù)，下邊有講）給后端服務(wù)器的話，可以這樣用

$('#myTable-x').dataTable({    "serverSide": true,    "processing": true,    "ajax": {        "url": "/api/site/data",        "data": function (d) {
            d.type = 'ops-coffee';
        }
    }
})

data： 可以在發(fā)送請求給后端時額外增加type=ops-coffee的參數(shù)

發(fā)送到服務(wù)器端的參數(shù)

當開啟服務(wù)端數(shù)據(jù)處理后，默認會給服務(wù)端傳遞許多參數(shù)，大概如下：

draw：繪制計數(shù)器，主要用來確保Ajax從服務(wù)器端接收到的數(shù)據(jù)是對應同一次請求的
start：第一條數(shù)據(jù)的起始位置
length：每頁顯示的條數(shù)
search[value]：全局的檢索關(guān)鍵字order[i][column]：告訴服務(wù)器哪些列是需要排序的，i為排序列的序號，下邊的i相同含義，注意i是從0開始的order[i][dir]：告訴服務(wù)器排序的方式"desc","asc"columns[i][data]：columns上定義的data屬性值columns[i][name]：columns上定義的name屬性值columns[i][searchable]：告訴服務(wù)器哪些列可以被搜索columns[i][orderable]：告訴服務(wù)器哪些列可以進行排序columns[i][search][value]：告訴服務(wù)器某些列的具體搜索條件

如果需要后臺分頁，那么需要拿到start、length兩個參數(shù)做相應的處理，

如果有搜索的內(nèi)容，那么需要拿到serch[value]參數(shù)做處理

服務(wù)端返回數(shù)據(jù)的格式

服務(wù)端需要返回datatables可以處理的數(shù)據(jù)格式，具體數(shù)據(jù)格式如下：

{
    "draw": 1,
    "recordsTotal": 7,
    "recordsFiltered": 7,
    "data": [
        {
            "id": 3,
            "site": "https://ops-coffee.cn",
            "date": "2018-07-03"
        },
        {
            "id": 9,
            "site": "https://demo.ops-coffee.cn",
            "date": "2019-08-06"
        }
        // 省略其他結(jié)果
    ]}

draw： 客戶端調(diào)用服務(wù)端次數(shù)標識，客戶端傳過來是什么原樣返回回去即可，無需修改

recordsTotal： 數(shù)據(jù)總條數(shù)，沒有過濾的數(shù)據(jù)總條數(shù)

recordsFiltered： 過濾后符合要求的條數(shù)，如果沒有搜索參數(shù)那么這個值與recordsTotal一致

data： 需要顯示的具體數(shù)據(jù)，json格式

API調(diào)用

Datatables提供了強大的API來處理表格上的數(shù)據(jù)，可以通過API添加數(shù)據(jù)到已經(jīng)存在的表格，或者對已經(jīng)存在的數(shù)據(jù)進行操作，API的類型非常豐富，詳細的信息可以查閱官網(wǎng)，使用方法如下：

跳轉(zhuǎn)到頁

跳轉(zhuǎn)到第3頁：

var table = $('#myTable').DataTable()
table.page(2).draw(false)

page(2)： page為分頁方法，后邊的2表示跳轉(zhuǎn)到第幾頁，可以是一個數(shù)字，也可以是first、next、previous、last這樣的字符串，當為數(shù)字時要從0算起，例如示例中為2實際上是跳轉(zhuǎn)到了第3頁

draw(false)： 對表格進行重繪以實現(xiàn)表格更新的顯示，大多數(shù)的api操作都不會直接更新在頁面上，所以需要調(diào)用下draw，默認情況下重繪后分頁會被重置回到第一頁，當設(shè)置為false時分頁不會被重置

搜索某列

搜索第2列包含https://ops-coffee.cn的行

var tablx = $('#myTable').dataTable()
tablx.api().column(1).search('https://ops-coffee.cn').draw()

首先需要注意這個例子中的API調(diào)用使用了.api()，這是因為上一個例子在初始化時用了.DataTable()而這個例子初始化時用了.dataTable()，僅僅是d字母大小寫的區(qū)別而已，但意義確不同，前者直接返回API實例，后者返回的是jQuery實例

重新設(shè)置ajax data屬性

 var api = $('#tagTable').dataTable().api(); //初始化的ajax data選項
 $data = api.settings()[0].ajax.data; //重新設(shè)置
 $data.type = '12321321'; //重載表格
 api.draw();

導出

https://datatables.net/download 官方下載

導出Excel

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>tableTools</title>
    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <!--datatables 的樣式和導出excel的js-->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-flash-1.6.2/b-html5-1.6.2/datatables.min.css"/>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-flash-1.6.2/b-html5-1.6.2/datatables.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#myTable').DataTable({                dom: 'Bfrtip',                buttons: [                    'excelHtml5',
                ]
            });
        });    </script></head><body><div class="col-md-12 col-sm-12">
    <!-- BEGIN EXAMPLE TABLE PORTLET-->
    <div class="portlet box blue-hoki">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-list"></i>數(shù)據(jù)列表            </div>
            <div class="tools">
            </div>
        </div>
        <div class="portlet-body">
            <table id="myTable" class="table table-striped table-bordered table-hover"
                   style="width:100%">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
                <tr>
                    <th>Name111</th>
                    <th>Position111</th>
                    <th>Office111</th>
                    <th>Age111</th>
                    <th>Start date111</th>
                    <th>Salary111</th>
                </tr>
                </thead>
                <tbody>
                <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>Brielle Williamson</td>
                    <td>Integration Specialist</td>
                    <td>New York</td>
                    <td>61</td>
                    <td>2012/12/02</td>
                    <td>$372,000</td>
                </tr>
                <tr>
                    <td>Herrod Chandler</td>
                    <td>Sales Assistant</td>
                    <td>San Francisco</td>
                    <td>59</td>
                    <td>2012/08/06</td>
                    <td>$137,500</td>
                </tr>
                <tr>
                    <td>Jonas Alexander</td>
                    <td>Developer</td>
                    <td>San Francisco</td>
                    <td>30</td>
                    <td>2010/07/14</td>
                    <td>$86,500</td>
                </tr>
                <tr>
                    <td>Shad Decker</td>
                    <td>Regional Director</td>
                    <td>Edinburgh</td>
                    <td>51</td>
                    <td>2008/11/13</td>
                    <td>$183,000</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>
                <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
                </tfoot>
            </table>
        </div>
    </div></div></body></html>

運行結(jié)果

導出PDF

pdf是不支持中文的暫時無解決方案

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>tableTools</title>
    <!-- jQuery -->
    <script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <!--datatables 的樣式和導出excel的js-->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-flash-1.6.2/b-html5-1.6.2/datatables.min.css"/>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/jszip-2.5.0/dt-1.10.21/b-1.6.2/b-flash-1.6.2/b-html5-1.6.2/datatables.min.js"></script>
    <!--PDF-->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.21/b-1.6.2/b-html5-1.6.2/datatables.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#myTable').DataTable({                dom: 'Bfrtip',                buttons: [                    'excelHtml5',                    'pdfHtml5',
                ]
            });
        });    </script></head><body><div class="col-md-12 col-sm-12">
    <!-- BEGIN EXAMPLE TABLE PORTLET-->
    <div class="portlet box blue-hoki">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-list"></i>數(shù)據(jù)列表            </div>
            <div class="tools">
            </div>
        </div>
        <div class="portlet-body">
            <table id="myTable" class="table table-striped table-bordered table-hover"
                   style="width:100%">
                <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
                <tr>
                    <th>Name111</th>
                    <th>Position111</th>
                    <th>Office111</th>
                    <th>Age111</th>
                    <th>Start date111</th>
                    <th>Salary111</th>
                </tr>
                </thead>
                <tbody>
                <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>Brielle Williamson</td>
                    <td>Integration Specialist</td>
                    <td>New York</td>
                    <td>61</td>
                    <td>2012/12/02</td>
                    <td>$372,000</td>
                </tr>
                <tr>
                    <td>Herrod Chandler</td>
                    <td>Sales Assistant</td>
                    <td>San Francisco</td>
                    <td>59</td>
                    <td>2012/08/06</td>
                    <td>$137,500</td>
                </tr>
                <tr>
                    <td>Jonas Alexander</td>
                    <td>Developer</td>
                    <td>San Francisco</td>
                    <td>30</td>
                    <td>2010/07/14</td>
                    <td>$86,500</td>
                </tr>
                <tr>
                    <td>Shad Decker</td>
                    <td>Regional Director</td>
                    <td>Edinburgh</td>
                    <td>51</td>
                    <td>2008/11/13</td>
                    <td>$183,000</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>
                <tfoot>
                <tr>
                    <th>Name</th>
                    <th>Position</th>
                    <th>Office</th>
                    <th>Age</th>
                    <th>Start date</th>
                    <th>Salary</th>
                </tr>
                </tfoot>
            </table>
        </div>
    </div></div></body></html>

運行效果

導出按鈕的配置

例：

dom: 'Bfrtip',buttons: [
{    //按鈕    extend: "copy",    //按鈕名稱    text: '復制',    //按鈕的class名稱
    className : 'export-btn'},
{    extend: "excelHtml5",    text: '導出excel',
    className : 'export-btn'},
{    extend: "copy",    text: '導出pdf',
    className : 'export-btn'
    },    //'copy', 'excelHtml5','pdfHtml5'],

所有配置選項

https://datatables.net/reference/option/buttons.buttons

• buttons.buttons.action -描述激活動作的功能

• buttons.buttons.className -按鈕類名稱

• buttons.buttons.enabled -初始啟用狀態(tài)

• buttons.buttons.extend -基于擴展對象

• buttons.buttons.init -按鈕初始化回調(diào)函數(shù)

• buttons.buttons.key -按鍵激活配置

• buttons.buttons.name -在選擇器中使用的按鈕名稱

• buttons.buttons.text -可見文字

導出設(shè)置

https://datatables.net/extensions/buttons/examples/html5/outputFormat-function.html

參考文章：https://ops-coffee.cn/s/mx2gjLmO7jHKagGsWF6eJw

事件相關(guān)

http://datatables.club/reference/event/

Datatables對自己所觸發(fā)的事件都有監(jiān)聽，我們可以監(jiān)聽這些動作做相應的處理，比如表格重繪的時候，我需要做一些操作

Datatables的事件監(jiān)聽使用 on()API方法或者 jQuery.on(),事件的命名都用dt結(jié)尾， 保證和其他的命名不沖突，下面的例子顯示了如何監(jiān)聽 drawEvent事件

$('#myTable').on('draw.dt',function() {	alert('Table redrawn');
});

事件(Events)