DataTables 套件複習

官方文件網址

雖然bootstrap的css已經足夠好看了，但是這款套件除了可以好看， 還能做到許多支持，模糊搜尋、分頁、排序等等，還有許多功能我也還在摸索階段。

這篇文章也講得不錯，有各種設置說明

CDN引入

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

<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

1.簡配版

$(document).ready(function(){
  $('#myTable').DataTable();
});

2.過長可以滾動版本

 $('#myTable').DataTable({
    scrollY:'100px',
});

3.只有表格的版本

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

4.顯示數量客製化版本

 $('#myTable').DataTable({
    lengthMenu: [[5, 10, 15,-1], [5, 10, 15, "All"]],
});