JQ datatable 样例

var oTable = null;
// 検索処理
function doSearch() {
	if (oTable) {
		oTable.draw();
	} else {
		$("#resultFixTable").remove();
		$("#search-list").show();
		oTable = $('#dataTables-result').DataTable({
			dom : '<"float_left"ip><"float_right"fl>t<"float_left"p>',
			oLanguage : {
				sLengthMenu : getMessage('MSG00101I'),
				oPaginate : {
					sNext : getMessage('MSG00102I'),
					sPrevious : getMessage('MSG00103I')
				},
				sInfo : getMessage('MSG00104I'),
				sSearch : getMessage('MSG00105I'),
				sZeroRecords : getMessage('MSG00106I'),
				sInfoEmpty : '　',
				sInfoFiltered : getMessage('MSG00107I'),
				sProcessing : getMessage('MSG00108I')
			},
                        iDisplayLength : 50,//默认显示多少
			aLengthMenu : [ 10, 20, 30, 40 , 50 , 60 , 70] ,//分页显示多件
			bPaginate : true,
			bAutoWidth : false,
			bFilter : true,
			bProcessing : true,
			responsive : true,
			bSort : false,
			bServerSide : true,
			sAjaxSource : contextPath + "/inputTableSearch/search",
			fnServerData : function retrieveData(sSource, aoData, fnCallback) {
				var params = getParams();
				try {
					for (var i = 0; i < aoData.length; i++) {
						params[aoData[i].name] = aoData[i].value;
					}
				} catch (e)  {

				}
				$.ajax({
					dataType : 'json',
					type : 'POST',
					async : false,
					url : sSource,
					data : params,
					traditional : true,
					success : function(data) {
						fnCallback(data);
					},
					error : function(XMLHttpRequest,
							textStatus, errorThrown) {
						alert(textStatus);
					}
				});
			},

			fnRowCallback : function(nRow, aData, iDisplayIndex) {
				var jigyoujouId = aData[9];
				var inputItemId = aData[10];
				var inspectionResult = aData[11];
				//如果改顺序需要做的
				/* $('td:eq(0)', nRow).html(aData[12]).addClass('CENTER'); */
				$('td:eq(0)', nRow).addClass('CENTER');
				$('td:eq(1)', nRow).addClass('LEFT');
				$('td:eq(2)', nRow).addClass('LEFT');
				$('td:eq(3)', nRow).addClass('LEFT');
				<%-- 20181016 #241 newtouch upd start --%>
				$('td:eq(4)', nRow).addClass('CENTER');
				$('td:eq(5)', nRow).addClass('CENTER');
				$('td:eq(6)', nRow).addClass('CENTER');
				<%-- 20181016 #241 newtouch upd end --%>
				$('td:eq(7)', nRow).addClass('LEFT');
				$('td:eq(8)', nRow).addClass('LEFT');
				$('td:eq(9)', nRow).hide();
				$('td:eq(10)', nRow).hide();
				$('td:eq(11)', nRow).hide();

				if (inspectionResult == 3) {
					$(nRow).addClass('pinkTr');
				}

 				$(nRow).bind("click", function() {
 					forwardDetail(jigyoujouId);
				}).css("cursor", "pointer");

				return nRow;
			}
		});
		$("#dataTables-result_filter").html("").css("height", "25px");
	}
	return false;
}

java

/**
	 * 入力表管理検索
	 * @param form
	 * @return
	 */
    @RequestMapping(value = "/search", method = RequestMethod.POST, produces = "text/html;charset=UTF-8")
	@ResponseBody
	public String search(TinputTableForm form) {
    	TInputItemDto conditionDto = new TInputItemDto();
    	// 立入担当種別コード
    	conditionDto.setInspectionStaffType(form.getInspectionStaffType());
    	// 検査状況コード
    	conditionDto.setInspectionResult(form.getInspectionResult());
    	// 分析期間初日
    	if (!StringUtils.isEmpty(form.getAnalysisFromString())) {
    		conditionDto.setAnalysisFrom(FormatUtil.strToDate(form.getAnalysisFromString(),SAMConst.DATE_FORMAT_YYYYMMDDE));
		}
    	// 分析期間最終日
    	if (!StringUtils.isEmpty(form.getAnalysisToString())) {
    		conditionDto.setAnalysisTo(FormatUtil.strToDate(form.getAnalysisToString(),SAMConst.DATE_FORMAT_YYYYMMDDE));
		}
    	// ページ情報
    	conditionDto.setiDisplayStart(form.getiDisplayStart());
    	conditionDto.setiDisplayLength(form.getiDisplayLength());

        // 検索総件数
        int resultCnt = tInputItemService.getInputItemListCount(conditionDto);
        // dataTable用データ
        Object[][] data = new Object[0][];
        if (resultCnt > 0) {
        	// 検索
        	List<TInputItemDto> resultDtoList = tInputItemService.getInputItemList(conditionDto);
        	if (!CheckUtil.isEmpty(resultDtoList)) {
        		data = new Object[resultDtoList.size()][];
        		int colIndex = 0;
        		for (int i = 0; i < data.length; i++) {
        			colIndex = 0;
        			TInputItemDto resultDto = resultDtoList.get(i);
        			Object[] columnVals = new Object[13];
        			// NO
        			columnVals[colIndex++] = form.getiDisplayStart() + i + 1;
        			// 立入担当種別
        			columnVals[colIndex++] =SAMUtil.htmlEscape(nullCheck(resultDto.getInspectionStaffTypeName()));
        			// 試料番号
        			columnVals[colIndex++] =SAMUtil.htmlEscape(nullCheck(resultDto.getSampleNo()));
        			// 事業場名
        			columnVals[colIndex++] =SAMUtil.htmlEscape(nullCheck(resultDto.getJigyoujouName()));
        			// 分析期間初日
        			columnVals[colIndex++] =SAMUtil.htmlEscape(nullCheck(resultDto.getAnalysisFromString()));
        			// 分析期間最終日
        			columnVals[colIndex++] =SAMUtil.htmlEscape(nullCheck(resultDto.getAnalysisToString()));
        			// 調査日
        			columnVals[colIndex++] =SAMUtil.htmlEscape(nullCheck(resultDto.getSurveyDateString()));
        			// 状況
        			columnVals[colIndex++] =SAMUtil.htmlEscape(nullCheck(resultDto.getInspectionResultName()));
        			// 立入担当者
        			columnVals[colIndex++] =SAMUtil.htmlEscape(nullCheck(resultDto.getInspectionStaffName()));
        			// 事業場ID
        			columnVals[colIndex++] =resultDto.getJigyoujouId();
        			// 入力表ID
        			columnVals[colIndex++] =resultDto.getInputItemId();
        			// 状況CODE
        			columnVals[colIndex++] =resultDto.getInspectionResult();
        			// 尹岩
        			columnVals[0] =SAMUtil.htmlEscape("尹岩");
        			data[i] = columnVals;
				}
    		}
		}
        // dataTableのデータを設定
       Map<String, Object> getObj = new HashMap<String, Object>();
       getObj.put("aaData", data);
       getObj.put("iTotalRecords", resultCnt);
       getObj.put("iTotalDisplayRecords", resultCnt);

       Gson gson = new Gson();
       return gson.toJson(getObj);
	}