jquery datatable例子

JSP 代码：

Html代码  

1.   <table id="datatable" class="table table-bordered table-striped">  
2. <thead>  
3.  <tr>  
4.   <th>计划名称</th>  
5.   <th>计划执行者</th>  
6.    <th>计划开始时间</th>  
7.     <th>计划结束时间</th>  
8.     <th>运行总时间</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>详细信息"  
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.          //查询总的记录条数  
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 分页风格
sFirst:告诉他第一页怎么写
sLast:告诉他最后一页怎么写
sNext:告诉他下一页怎么写
sPrevious:告诉他上一页怎么写
语言
"sInfo":"共_TOTAL_页 第_START_到_END_页",
"sEmptyTable":"没有数据"
"sInfoFiltered":"从_MAX_条记录中搜索",
"sInfoPostFix": "      底边栏的静态信息",
"sInfoThousands": "我靠",//格式化信息用的
"sLengthMenu":"显示<select><option>20</option><option>40</option></select>条信息"
  "sSearch":"搜索"
基本的命令
aaSorting:参数是个数组  [[],[]]单独定义每一列的排序方式
aaSortingFixed:锁定某一列的排序方式  用户不能改变
iDisplayLength:规定每一页的显示数目
aLengthMenu:[[两个数组要一样],[真正显示的是这个数组中的内容 最后一个是”all”]]
bAutoWidth:自动调整列宽
bDestroy:好比重新部署
bFilter:是否启用过滤器
bInfo:是否启用底边信息栏
bLengthChange:就是是否启用上面那个可以方便显示几页的下拉框
bProcessing:表格在处理数据时是否要显示信息
sProcessing:定义表格在处理数据时要显示的信息
bScrollAutoCss:是否允许显示滚动条
sScrollY:表格的高度 不够的话用滚动条
bScrollCollapse:当设置sScrolly时  如果数据没那么高  表格是否自适应高度
bScrollInfinite:允许无限滚动  和google的图片搜索功能一样  一滚到最后就自动刷新
sScrollXInner:是个百分比 实际就是表格的宽度一样
sScrollX:也是百分比  实际就是水平方向滚动条件
bSort:是否启用排序功能

 

其它一些网站：

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