Jquery的Table

爱被打了一巴掌 2022-07-12 09:57 199阅读 0赞

function loadDataTable() {
    	$("#dataTables-example").dataTable({
    		"bServerSide" : true,// 这个用来指明是通过服务端来取数据
    		"sAjaxSource" : basePath + "contractListInput/GetTableNew",// 这个是请求的地址
    		"fnServerData" : retrieveData,
    		'bFilter' : false,
    		scrollX : true,
    		"sScrollY" : "380px",
    		ordering : false,
    		"oLanguage" : {
    			"sInfo" : "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
    			"oPaginate" : {
    				"sFirst" : "首页",
    				"sPrevious" : "前一页",
    				"sNext" : "后一页",
    				"sLast" : "尾页"
    			}
    		},
    		/*
    		 * 'aoColumns' : [ { "mDataProp" : "contractid", "sDefaultContent" : "", },
    		 * { "mDataProp" : "totalym", "sDefaultContent" : "", },
    		 * { "mDataProp" : "stockno", "sDefaultContent" : "", },  {
    		 * "mDataProp" : "kiyakuname", "sDefaultContent" : "", },  {
    		 * "mDataProp" : "payname", "sDefaultContent" : "", },  {
    		 * "mDataProp" : "insurance", "sDefaultContent" : "", },  {
    		 * "mDataProp" : "commissionr", "sDefaultContent" : "", }, {
    		 * "mDataProp" : "commission", "sDefaultContent" : "", }, {
    		 * "mDataProp" : "paymentcnt", "sDefaultContent" : "", }, {
    		 * "mDataProp" : "paymentcnt2", "sDefaultContent" : "", },{
    		 * "mDataProp" : "productname", "sDefaultContent" : "", }, {
    		 * "mDataProp" : "contractymd", "sDefaultContent" : "", }, {
    		 * "mDataProp" : "paytype", "sDefaultContent" : "", }, {
    		 * "mDataProp" : "dairitenrank", "sDefaultContent" : "", }, {
    		 * "mDataProp" : "recruitnm", "sDefaultContent" : "", }, {
    		 * "mDataProp" : "recruitid", "sDefaultContent" : "", }, {
    		 * "mDataProp" : "status", "sDefaultContent" : "", }, ],
    		 */
    		"columns" : [ {
    			"data" : "contractid",
    			"sDefaultContent" : "",
    		}, 
    		{
    			"data" : "totalym",
    			"sDefaultContent" : "",
    		}, 
    		{
    			"data" : "stockno",
    			"sDefaultContent" : "",
    		}, 
    		{
    			"data" : "kiyakuname",
    			"sDefaultContent" : "",
    		}, 
    		{
    			"data" : "payname",
    			"sDefaultContent" : "",
    		}, 
    		{
    			"data" : "insurance",
    			"sDefaultContent" : "",
    		}, 
    		{
    			"data" : "commissionr",
    			"sDefaultContent" : "",
    		},
    		{
    			"data" : "commission",
    			"sDefaultContent" : "",
    		},
    		{
    			"data" : "paymentcnt",
    			"sDefaultContent" : "",
    		},
    		{
    			"data" : "paymentcnt2",
    			"sDefaultContent" : "",
    		},
    		{
    			"data" : "productname",
    			"sDefaultContent" : "",
    		},
    		{
    			"data" : "contractymd",
    			"sDefaultContent" : "",
    		},
    		{
    			"data" : "paytype",
    			"sDefaultContent" : "",
    		},
    		{
    			"data" : "dairitenrank",
    			"sDefaultContent" : "",
    		},
    		{
    			"data" : "recruitnm",
    			"sDefaultContent" : "",
    		},
    		{
    			"data" : "recruitid",
    			"sDefaultContent" : "",
    		},
    		{
    			"data" : "status",
    			"sDefaultContent" : "",
    		},
    		]
    	});
    }

// 3个参数的名字可以随便命名,但必须是3个参数,少一个都不行
    function retrieveData(sSource, aoData, fnCallback) {
    	var datepicker = $("#datepicker").val();
    	var kiyakuName = $("#kiyakunameSelect").val();
    	selectId = $("#selectId").val();
    	// getAjax(sSource, {"aoData" : JSON.stringify(aoData111)}, function(data) {
    	/*
    	 * var data = JSON.stringify(aoData); getAjax(basePath +
    	 * "contractListInput/GetTableNew", {"aoData" : data}, function(data) { });
    	 */
    	// 3个参数的名字可以随便命名,但必须是3个参数,少一个都不行
    	$.ajax({
    		url : sSource,// 这个就是请求地址对应sAjaxSource
    		data : {
    			"aoData" : JSON.stringify(aoData),
    			datepicker : datepicker,
    			contractId : selectId,
    			kiyakuName : kiyakuName
    		},// 这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
    		type : 'post',
    		dataType : 'json',
    		async : false,
    		success : function(result) {
    			fnCallback(result);// 把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
    			trClick();
    		},
    		error : function(msg) {
    		}
    	});
    }

@RequestMapping(value = "/contractListInput/GetTableNew", method = RequestMethod.POST)
    	public @ResponseBody String getTableNew(HttpServletRequest request, HttpServletResponse response,
    			HttpSession httpSession) throws JSONException {
    		try {
    			String sEcho = null;
    			int iDisplayStart = 0; // 起始索引
    			int iDisplayLength = 0; // 每页显示的行数
    			JSONArray jsonarray = new JSONArray(request.getParameter("aoData").toString());
    			for (int i = 0; i < jsonarray.length(); i++) {
    				JSONObject obj = (JSONObject) jsonarray.get(i);
    				if (obj.get("name").equals("sEcho"))
    					sEcho = obj.get("value").toString();
    				if (obj.get("name").equals("iDisplayStart"))
    					iDisplayStart = obj.getInt("value");
    				if (obj.get("name").equals("iDisplayLength"))
    					iDisplayLength = obj.getInt("value");
    			}
    			Hashtable<String, String> parm_Key_Value = new Hashtable<String, String>();
    			String datepicker = request.getParameter("datepicker");
    			String kiyakuName = request.getParameter("kiyakuName");
    			String contractId = request.getParameter("contractId");
    			try {
    				Date date = CommonFunction.FormatDate(datepicker, CommonConstant.YM);
    				datepicker = CommonFunction.FormatDate(date, CommonConstant.YYYYMM);
    
    			} catch (ParseException e) {
    				return "";
    			}
    			parm_Key_Value.put("datepicker", datepicker);
    			parm_Key_Value.put("kiyakuName", kiyakuName);
    			parm_Key_Value.put("contractId", contractId);
    			List<Contractdata> list = contractdataService.getList(parm_Key_Value);
    			   
    			// 生成20条测试数据  
    /*			List<String[]> list = new ArrayList<String[]>();  
    			for (int i = 0; i < 20; i++) {  
    			String[] d = { "co1_data" + i, "col2_data" + i };  
    			list.add(d);  
    			} */
    
    			Gson gson = new Gson();  
    			JSONObject getObj = new JSONObject();
    			getObj.put("sEcho", sEcho);// 不知道这个值有什么用,有知道的请告知一下
    			getObj.put("iTotalRecords", list.size());// 实际的行数
    			getObj.put("iTotalDisplayRecords", list.size());// 显示的行数,这个要和上面写的一样
    			// getObj.put("aaData", lst);//要以JSON格式返回
    			getObj.put("aaData", gson.toJson(list.subList(iDisplayStart, iDisplayStart + iDisplayLength)));// 要以JSON格式返回
    			//getObj.put("aaData", list.subList(iDisplayStart, iDisplayStart + iDisplayLength));// 要以JSON格式返回
    			System.out.println(getObj.toString());
    			return getObj.toString();
    
    			/*
    			 * try { JSONObject myJsonObject = new
    			 * JSONObject(request.getParameter("aoData")); if
    			 * (myJsonObject.get("name").equals("iDisplayStart")) {
    			 * iDisplayStart = myJsonObject.getInt("value"); } if
    			 * (myJsonObject.get("name").equals("iDisplayLength")) {
    			 * iDisplayLength = myJsonObject.getInt("value"); } } catch
    			 * (Exception e) { logger.error(e.getMessage() + "getTable"); String
    			 * error = "error" + requestContext.getMessage("W0001").toString();
    			 * pw.write(error); }
    			 */
    		} catch (Exception e) {
    			e.printStackTrace();
    			return null;
    		}
    	}

[点击打开链接][Link 1]

[Link 1]: http://download.csdn.net/detail/u012601647/9759061