如题目:JQuery datatables插件 将struts2的action对象传递给datatables设置数据源方式???,虽然官网写了很多教程,但版本不一致的时候,就会导致文档很混乱,所以想写下来,给后面的人一些帮助,前提已经导入了插件:<script type="text/javascript" src="media/js/jquery.dataTables.js"></script>:
1.在jsp界面,点击了一个按钮,跳转到action界面,使用ajax方式,如下:
//点击对比,从后台进行查询
$("#wages-comparsion").click(function() {
var date = document.getElementById("wageDate").value;
console.log("获取的日期为"+date);
$.ajax({
url : "wageCompare.action",
type : "POST",
async : false,
data : {
"wageDate" : date
},
dataType : "json", // ajax返回值设置为text(json格式也可用它返回,可打印出结果,也可设置成json)
success : function(data) {
$('#sample_1').DataTable().fnDestroy();//sample_1是table的id
$('#sample_1').DataTable( {
"aaData":data,
"aoColumns": [
// 按顺序来
{ "mData": ""},// 是否选中
{ "mData": "retirementCardNo"},
{ "mData": "name"},
]
} );
},
error : function(data) {
alert("获取数据失败!");
}
});
});
2.在action界面wagecompare.action中,需要从后台查询数据,以便生成一个list,然后传递给jsp中的datatables使用,这里ajax方式成功之后,就会在success属性中,设置好了data数据,接着就可以在这里进行设置表格的数据:
public class WageCompareAction extends ActionSupport {
private static final long serialVersionUID = 1L;
// 所有的信息记录
private List<RetireInfor> infors;
/**
* 获取指定月份的工资
*/
public String queryCurrAndLast() {
String wageDate = getWageDate();
this.readStringFromFile(wageDate);
return SUCCESS;
}
3.需要注意的是struct.xml中的配置,需要配置参数如下,如果不这样,就使用 ajax会失败的,如下:
<!-- 对比 -->
<action name="wageCompare" class="wageInforCompare" method="queryCurrAndLast">
<result name="success" type="json">
<param name="root">infors</param>
</result>
</action>
4.接着在ajax回调成功的方法内给table重新赋值即可,上面已经贴出来了:
success : function(data) {
$('#sample_1').DataTable().fnDestroy();
$('#sample_1').DataTable( {
"aaData":data,
"aoColumns": [
// 按顺序来
{ "mData": ""},// 是否选中
{ "mData": "retirementCardNo"},
{ "mData": "name"},
]
} );
},
由于是公司的项目,所以代码不能贴全面,有问题咨询.