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