在我開發過的系統,沒有一個可以接受一次把所有資料撈出來後在Client上做分頁的。
所以Server端的回應模式一定要能被處理。
先理解DataTables做法的重點。
- 要自Server端取得資料,必需要有一個參數“sAjaxSource“指定資料的來源,資料來源可以是文字檔或是PHP,ASP,Servlet等程式的URL
- Server端回傳資料的格式,可以是JSON或XML,但以JSON為佳;回傳資料的property名稱要為aaData。
- DataTables會將回傳的資料更新table中<tbody></tbody>的部份。
- 自Server端取得資料的時機是在呼叫$("#tableId").dataTable();後,所以一開始的<tbody></tbody>內不需要有資料。
以純文字檔做為Server回傳資料的來源做個示範。
先將下列文字存為檔案serverdata.txt
{"aaData":[["A123","Adam","0910"],["B123","Bob","0819"],["C123","Child","0739"]]}
再建一個<tbody>為空的table
<table id="sample" class="display"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Phone</th> </tr> </thead> <tbody> </tbody> </table>
最後呼叫DataTables的javascript method.
<script type="text/javascript"> $().ready(function() { $("#sample").dataTable({ "sAjaxSource": './serverdata.txt' }); }); </script>
就可以看到下列的結果
(跟之前一樣才是....)
沒有留言:
張貼留言