jquery datatable例子

JSP 代码：

           <table id="datatable" class="table table-bordered table-striped">
							  <thead>
								  <tr>
									  <th>计划名称</th>
									  <th>计划执行者</th>
									   <th>计划开始时间</th>
									    <th>计划结束时间</th>
									    <th>运行总时间</th>
									   <th>操作</th>
								  </tr>
							  </thead>
							  <tbody>
							  </tbody>
			</table>

 js代码：

 

	$(document).ready(function() {
	      var config_ext = {
           "aaSorting":[[0, "asc"]],
           "bAutoWidth": false,
           "bServerSide": true,
           "sAjaxSource": "${ctx}/plans?action=ajax",
           "sServerMethod": "POST",
           "bPaginate": true,
           "fnDrawCallback": function( oSettings ) {
           		$("#datatable td a").css("margin-left", "12px");
           },
		   "aoColumns": [
           	{ "mDataProp": "planName"},
            { "mDataProp": "ownerName"},
            { "mDataProp": "startTime"},
            { "mDataProp": "endTime"},
            { "mDataProp": "executeTime"},
            
            { "mDataProp": "planId","fnRender": function(obj) {
                   var str = "";
                   if(obj && obj.aData && obj.aData.planId){
                	   var planId = obj.aData.planId;
                	   str =
	                   	"<a href='${ctx}/planDetails?planId="+planId+"'>"
	                   	+"<i class='splashy-documents_edit'></i>详细信息"
	                   +"</a>"
                   }
                   return str;
               }, "bSortable": false}
             ]
          };
      var table_config = jQuery.extend({}, def_dt_config, config_ext);
	  var dt = $('#datatable').dataTable(table_config);
    
	  });

 

java代码：

String sStart = request.getParameter("iDisplayStart");
		 String sEcho = request.getParameter("sEcho");
	     String sAmount = request.getParameter("iDisplayLength");
	        
	     //查询总的记录条数
	     int total = manager.getPlansTotal();
	     
	     //分页查询
	     int pageNow =0;
	     if(Integer.parseInt(sStart) == 0){
	       pageNow = 1;	 
	     }
	     
	     pageNow = Integer.parseInt(sStart);
	     int pageSize = Integer.parseInt(sAmount); 
	     
	     List<Plan> planlist = manager.queryPlansByPage(pageNow,pageSize);

		Map<String, Object> result = new HashMap<String, Object>();
		result.put("iTotalRecords", total);
		result.put("iTotalDisplayRecords", sAmount);
		result.put("aaData", planlist);
		
		String json = com.alibaba.fastjson.JSON.toJSONString(result);
		
		
		PrintWriter out = response.getWriter();
		//传到页面
		out.write(json);
		out.flush();  
        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.youkuaiyun.com/mickey_miki/article/details/8240477