## 基礎做法
### 1.dataTable基本使用
[樣式](https://datatables.net/examples/styling/index.html)
[範例](https://datatables.net/examples/)
[基礎語法](https://hackmd.io/@JYU/BkSAdrf8U)
[button](https://datatables.net/extensions/buttons/examples/html5/simple.html)
#### 1. 引用

//css
<link rel="stylesheet" type="text/css" href="styles/inems/jquery.dataTables.css">
//jquery
<script type="text/javascript" src="scripts/bootstrap-4.6.0/js/bootstrap.bundle.min.js"></script> 
<script src="scripts/jquery/plugin/dataTables-1.12.1/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="scripts/jquery/plugin/dataTables-buttons-2.2.3/dataTables.buttons.min.js"></script> 
<script type="text/javascript" src="scripts/jquery/plugin/dataTables-buttons-2.2.3/buttons.html5.min.js"></script> 

#### 2. html

<table class="hover stripe row-border" id="dataListTable">
<thead>
		<tr>
<%-- table 表頭--%>
		<th style="border-right-color: #a8b0b6;"</th>
</tr>  
</thead>
	<tbody>
	<%-- table 資料--%>
</tbody>
</table>

#### 3. 初始化table
[document參考](https://datatables.net/manual/index#DataTables-Manual)

var table =  $('#dataListTable').DataTable({ //對應html table的id
	//table相關設定	
    屬性/預設功能區塊,
    資料來源區塊(data or ajax….等),
    資料欄位區塊(columns),
    語言區塊(language),
    欄位元素定義區塊(columnDefs),
    列元素區塊(rowCallback)…等
     });

-
- 不同方式用ajax拿到之資料

-

#### 4.後端分頁
數據量大或查找資料較多
[參數需求](https://datatables.club/manual/server-side.html)