看产品里数据显示用了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();