Datatable Initialization

?

這里介紹如何使用Objects類型的數據源初始化Datatable，當然Object的來源也可以分為多種，比如JS定義的、server side定義的、從文件讀取的等。對于datatable初始化來講，基本一樣。不同的地方只在于配置Data數據來源。

?

依賴包

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

?

使用objects數據源初始化

?

（1）引進依賴包

（2）JS定義Object以及初始化Datatable

1 <script type="text/javascript"> 2 3 //定義Object(也可以是經過Json格式化的Server Side Object) 4 var objectData = [ 5 6 { 7 "name" : "Tiger Nixon", 8 "position" : "System Architect", 9 "start_date" : "2011/04/25", 10 "office" : "Edinburgh", 11 12 }, { 13 "name" : "Eason Wang", 14 "position" : "System Manager", 15 "start_date" : "2015/04/25", 16 "office" : "IT", 17 18 } 19 20 ]; 21 22 $(document).ready(function() { 23 $('#example').DataTable({ //初始化DataTable 24 data : objectData, //數據來源objectData變量 25 columns : [ { 26 data : "name" //data 設置某一列顯示哪個屬性名的值，例如這一行表示，在第一列顯示 屬性名為name的值 27 }, { 28 data : "position" //表示在第二列顯示 屬性名為position的值 29 }, { 30 data : "start_date" //表示在第二列顯示 屬性名為start_date的值 31 }, { 32 data : "office" //表示在第二列顯示 屬性名為office的值 33 } 34 35 ] 36 }); 37 }); 38 </script>

?

（3）編寫HTML，聲明一個table(定義id/class)，這里的列名可以隨便定義，與上面的JS無關

1 <table id="example" class="display"> 2 <thead> 3 <tr> 4 <th>Name</th> 5 <th>Position</th> 6 <th>Start_date</th> 7 <th>Office</th> 8 </tr> 9 </thead> 10 <tfoot> 11 <tr> 12 <th>Name</th> 13 <th>Position</th> 14 <th>Start_date</th> 15 <th>Office</th> 16 </tr> 17 </tfoot> 18 </table>

?

（4）最終顯示

?

轉載于:https://www.cnblogs.com/whisky-cool/p/7715007.html

總結

以上是生活随笔為你收集整理的Datatable Initialization - 使用objects数据源初始化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。