JqueryDatatable是一个很强大的jquery的table插件,可以访问官网http://www.datatables.net/,中文学习网站 http://datatables.club/index.html
Datatable支持ajax获取对应的数据,具体可以参考官网的ajax参数说明
http://datatables.club/reference/option/ajax.html
其中ajax第二个传object的用法和jquery的ajax的原生用法是一样的
http://api.jquery.com/jQuery.ajax/
其中几个重要的参数如下
data( ajax.dataDT ) - 与jQuery一样,接收一个对象,这里Datatables对他做出扩展,还可以接收 function,作为function时可以操作请求参数,在实际应用中,可以在此函数里加入自定义的条件传到服务器。这个方法在1.9-版本中为 fnServerParams 。
dataSrc( ajax.dataSrcDT ) - 如果Datatables是通过ajax或者服务器取数,默认情况下,Datatables会去找返回数据中的 data(或者是 aaData兼容1.9-)去显示表格。这个方法已经取代了1.9-中的 sAjaxDataProp
success - 这个是在Datatables内部调用的,不能覆盖使用,如果你不满意Datatables的实现,你可以使用 ajax.dataSrcDT 处理,或者是把 ajax作为一个函数使用
请注意,success这个函数是datatables内部调用的,是不能覆盖使用的。
===========================================================
背景和技术介绍完毕,做一个功能,后台使用springmvc返回一个json对象,json对象其中一部分属性是一个列表,前台用datatable来展示这个列表的数据。
@RequestMapping(value="getManagerItems.do")
@ResponseBody
public BaseJsonResult getManagerItems(HttpServletRequest request,
HttpServletResponse response,
HttpSession session) {
try{
Map<String,String> userMap=getBucUser(request);
List<ManagerItemDO> result=service.getManagerItems(userMap);
SuccessJsonResult successJsonResult=new SuccessJsonResult(JSON.toJSONString(result));
return successJsonResult;
}catch (Exception e){
logger.error(e);
FailureJsonResult failureJsonResult=new FailureJsonResult(e.getMessage(),e);
return failureJsonResult;
}
}
其中对应的result已经使用了JSON.toJSONString 转成了对应的string对象。
以下是返回结果
{
"root": "[{\"functionName\":\"FILTER_GROUP\",\"gmtCreate\":1457681086000,\"gmtModified\":1457681086000,\"id\":99,\"keykey\":\"XXX\",\"moduleName\":\XXX\",\"valuevalue\":\"XXX\"}]",
"status": "1",
"e": null,
"comments": null
}
spring中对json的转换器的配置如下,基本上就是默认的配置,其中可以看到root的结果并不是一个json对象,而是一个带有双引号的字符串
<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">
<property name="messageConverters">
<list >
<ref bean="mappingJacksonHttpMessageConverter" />
</list>
</property>
</bean>
<bean id="mappingJacksonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>application/json;charset=UTF-8</value>
<value>text/html;charset=UTF-8</value>
</list>
</property>
</bean>
解决方案1:自定义一个MessageConverter,将其中的string的对象的外引号去掉,但是这种方案实现较为复杂,会对以前的json处理有影响。
前台的datatable的调用方式如下, 表示访问上文的服务地址,然后取其中root的节点的内容:
.dataTable( {
ajax: {
url: "<%=request.getContextPath()%>/getManagerItems.do",
dataSrc: 'root'
},
"columns": [
{ "data": "keykey" }
]
})
由于root并不是一个json对象,所以在解析对应的数据的时候datatable插件将返回数据按照json来处理,但是拿到的确是对应的stirng对象
解决方案2:datasrc支持自定义的function,我们用自定义的function来调用json解析方法解析对应字符串
.dataTable( {
ajax: {
url: "<%=request.getContextPath()%>/getManagerItems.do",
dataSrc: function ( data ) {
var result = $.toJSON( data );
if($.evalJSON(result).status>0){
var result1=$.evalJSON($.evalJSON(result).root);
return result1;
}else{
var error=$.evalJSON(result).root;
showAlert('获取配置项失败',error,1000);
}
}
},
"columns": [
{ "data": "keykey" }
]
datasrc的使用可以参考文档 http://datatables.club/reference/option/ajax.dataSrc.html