JSP 代碼：

Html代碼  

1.   <table id="datatable" class="table table-bordered table-striped">  
2. <thead>  
3.  <tr>  
4.   <th>計(jì)劃名稱</th>  
5.   <th>計(jì)劃執(zhí)行者</th>  
6.    <th>計(jì)劃開始時(shí)間</th>  
7.     <th>計(jì)劃結(jié)束時(shí)間</th>  
8.     <th>運(yùn)行總時(shí)間</th>  
9.    <th>操作</th>  
10.  </tr>  
11. </thead>  
12. <tbody>  
13. </tbody>  
14. able>  

 js代碼：

Js代碼  

1. $(document).ready(function() {  
2.       var config_ext = {  
3.           "aaSorting":[[0, "asc"]],  
4.           "bAutoWidth": false,  
5.           "bServerSide": true,  
6.           "sAjaxSource": "${ctx}/plans?action=ajax",  
7.           "sServerMethod": "POST",  
8.           "bPaginate": true,  
9.           "fnDrawCallback": function( oSettings ) {  
10.                 $("#datatable td a").css("margin-left", "12px");  
11.           },  
12.        "aoColumns": [  
13.             { "mDataProp": "planName"},  
14.            { "mDataProp": "ownerName"},  
15.            { "mDataProp": "startTime"},  
16.            { "mDataProp": "endTime"},  
17.            { "mDataProp": "executeTime"},  
18.              
19.            { "mDataProp": "planId","fnRender": function(obj) {  
20.                   var str = "";  
21.                   if(obj && obj.aData && obj.aData.planId){  
22.                    var planId = obj.aData.planId;  
23.                    str =  
24.                     "<a href='${ctx}/planDetails?planId="+planId+"'>"  
25.                     +"<i class='splashy-documents_edit'></i>詳細(xì)信息"  
26.                    +"</a>"  
27.                   }  
28.                   return str;  
29.               }, "bSortable": false}  
30.             ]  
31.          };  
32.      var table_config = jQuery.extend({}, def_dt_config, config_ext);  
33.   var dt = $('#datatable').dataTable(table_config);  
34.      
35.   });  

java代碼：

Java代碼  

1. String sStart = request.getParameter("iDisplayStart");  
2.          String sEcho = request.getParameter("sEcho");  
3.          String sAmount = request.getParameter("iDisplayLength");  
4.               
5.          //查詢總的記錄條數(shù)  
6.          int total = manager.getPlansTotal();  
7.            
8.          //分頁查詢  
9.          int pageNow =0;  
10.          if(Integer.parseInt(sStart) == 0){  
11.            pageNow = 1;    
12.          }  
13.            
14.          pageNow = Integer.parseInt(sStart);  
15.          int pageSize = Integer.parseInt(sAmount);   
16.            
17.          List<Plan> planlist = manager.queryPlansByPage(pageNow,pageSize);  
18.   
19.         Map<String, Object> result = new HashMap<String, Object>();  
20.         result.put("iTotalRecords", total);  
21.         result.put("iTotalDisplayRecords", sAmount);  
22.         result.put("aaData", planlist);  
23.           
24.         String json = com.alibaba.fastjson.JSON.toJSONString(result);  
25.           
26.           
27.         PrintWriter out = response.getWriter();  
28.         //傳到頁面  
29.         out.write(json);  
30.         out.flush();    
31.         out.close();  

其它一些屬性：

分頁
bPaginite:true;是否啟用分頁功能
sPaginationType:two_button  或者full_numbers 分頁風(fēng)格
sFirst:告訴他第一頁怎么寫
sLast:告訴他最后一頁怎么寫
sNext:告訴他下一頁怎么寫
sPrevious:告訴他上一頁怎么寫
語言
"sInfo":"共_TOTAL_頁 第_START_到_END_頁",
"sEmptyTable":"沒有數(shù)據(jù)"
"sInfoFiltered":"從_MAX_條記錄中搜索",
"sInfoPostFix": "      底邊欄的靜態(tài)信息",
"sInfoThousands": "我靠",//格式化信息用的
"sLengthMenu":"顯示<select><option>20</option><option>40</option></select>條信息"
  "sSearch":"搜索"
基本的命令
aaSorting:參數(shù)是個(gè)數(shù)組  [[],[]]單獨(dú)定義每一列的排序方式
aaSortingFixed:鎖定某一列的排序方式  用戶不能改變
iDisplayLength:規(guī)定每一頁的顯示數(shù)目
aLengthMenu:[[兩個(gè)數(shù)組要一樣],[真正顯示的是這個(gè)數(shù)組中的內(nèi)容 最后一個(gè)是”all”]]
bAutoWidth:自動(dòng)調(diào)整列寬
bDestroy:好比重新部署
bFilter:是否啟用過濾器
bInfo:是否啟用底邊信息欄
bLengthChange:就是是否啟用上面那個(gè)可以方便顯示幾頁的下拉框
bProcessing:表格在處理數(shù)據(jù)時(shí)是否要顯示信息
sProcessing:定義表格在處理數(shù)據(jù)時(shí)要顯示的信息
bScrollAutoCss:是否允許顯示滾動(dòng)條
sScrollY:表格的高度 不夠的話用滾動(dòng)條
bScrollCollapse:當(dāng)設(shè)置sScrolly時(shí)  如果數(shù)據(jù)沒那么高  表格是否自適應(yīng)高度
bScrollInfinite:允許無限滾動(dòng)  和google的圖片搜索功能一樣  一滾到最后就自動(dòng)刷新
sScrollXInner:是個(gè)百分比 實(shí)際就是表格的寬度一樣
sScrollX:也是百分比  實(shí)際就是水平方向滾動(dòng)條件
bSort:是否啟用排序功能

其它一些網(wǎng)站：

http://blog.csdn.net/mickey_miki/article/details/8240477