善用CSV - 顯示於網頁Table

csv 的格式很容易維護以及可以在Excel 中直接打開，csv-to-html-table 這個Javascript 插件直接讀取csv 的內容，並利用datatables 這個組件顯示成表格，總體來說還是很方便的。

具體怎麼做呢？

下載 csv-to-html-table

https://github.com/derekeder/csv-to-html-table

關鍵步驟

<link href="css/bootstrap.min.css" rel="stylesheet">n<link href="css/dataTables.bootstrap.css" rel="stylesheet">nn<div id=table-container-summary></div>nn<script type="text/javascript" src="js/jquery.min.js"></script>n<script type="text/javascript" src="js/bootstrap.min.js"></script>n<script type="text/javascript" src="js/jquery.csv.min.js"></script>n<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>n<script type="text/javascript" src="js/dataTables.bootstrap.js"></script>n<script type="text/javascript" src="js/csv_to_html_table.js"></script>nn<script type="text/javascript">n CsvToHtmlTable.init({n csv_path: data/summary.csv,n element: table-container-summary, n allow_download: true,n csv_options: {separator: ,},n datatables_options: {"paging": false}n });n</script>n

效果

1. search
2. sort
3. download

推薦閱讀：