JQuery datatables插件 使用ajax将struts2的action对象传递给datatables设置数据源方式

    如题目: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"},
							            ]
						} );  

					},
      由于是公司的项目,所以代码不能贴全面,有问题咨询.


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值