jquery dataTable

看产品里数据显示用了dataTable,自己写了一小段测试了一下

JS:

	$(document).ready(function() {
	      var config_ext = {
           "aaSorting":[[0, "asc"]],
           "bAutoWidth": false,
           "bServerSide": true,
           "sAjaxSource": "${ctx}/plans?action=ajax",
           "sServerMethod": "POST",
           "fnServerParams": function ( aoData ) {
           	//aoData.push( { "name": "companyInfo.companyName", "value": $("#searchCompanyName").val() } );
           	//aoData.push( { "name": "companyInfo.certiCode", "value": $("#searchCertiCode").val() } );
           },
           "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);
      $('#search').live("click",function(){
          var oSettings = dt.fnSettings();
          dt.fnDraw();
      });
	  });

  html:

            <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>

 servlet:

		 String sStart = request.getParameter("iDisplayStart");
	     String sAmount = request.getParameter("iDisplayLength");
	        
		List<Plan> list = new ArrayList<Plan>();
		list.add(new Plan("plan1","test1", "lidao"));

		Map<String, Object> result = new HashMap<String, Object>();
		result.put("iTotalRecords", 12);
		result.put("iTotalDisplayRecords", 10);
		result.put("aaData", list);
		
		String json = com.alibaba.fastjson.JSON.toJSONString(result);
		
		
		PrintWriter out = response.getWriter();
		
		out.write(json);
		out.flush();  
        out.close();

猜你喜欢

转载自ldaolong.iteye.com/blog/2174393