分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

Datatables post 动态提交数据(传参数) 异步数据(ajax.data)

发布时间:2023-09-06 02:26责任编辑:赖小花关键词:暂无标签

官网解释与方法:1 当向服务器发出一个ajax请求,Datatables将会把服务器请求到的数据构造成一个数据对象

2 实际上他是参考jQuery的ajax.data属性来的,他能添加额外的参数传给服务器。

3 Datatables在此基础上还提供了一个函数,以便Datatables在请求服务器的时候可以处理这些数据.

闲言少叙,举几个栗子:

注意, 参数格式是必须和例子一样.

自认为最好用的datatables, post动态传参方法:

//初始化表格var oTable = $("#example").DataTable({ ???ajax: { ???????url: "http://xingJinYuBlog/index", 
???????data: { function ( d ) {
 ???????????????var d ={},
???????????????d.xxx=$(‘#extra‘).val();
???????????????return JSON.stringify( d );
 ?????????????} 
 ?????????????} }); 


//当你需要多条件查询,你可以调用此方法,动态修改参数传给服务器
function reloadTable() {
var name = $("#seName").val();
var admin = $("#seAdmin").val();
var param = { "obj.name": name, "obj.admin": admin };
oTable.settings()[0].ajax.data = param;
oTable.ajax.reload(); }

注: 

1 上面的param对象的内容, 对应是d对象的内容.

2 重新渲染表, 执行reloadTable(),即可实现.

下面是其他的方法:

1 添加一个静态值,来提交额外的参数(user_id)

 特点:--post方法, 静态传参

$(‘#example‘).dataTable( { ?"ajax": { ???"url": "http://xingJinYuBlog/index", ???"data": { ???????"user_id": 451 ???} ?}} );

2 通过操作数据对象添加数据请求(函数没有返回)

特点:--post方法, 动态传参

$(‘#example‘).dataTable( { ?"ajax": { ???"url": "http://xingJinYuBlog/index", 
???"data": function ( d ) { d.extra_search = $(‘#extra‘).val(); } } } );

3 添加数据请求(函数有返回)

特点:--post方法, 动态传参

$(‘#example‘).dataTable( { ?"ajax": { ???"url": "http://xingJinYuBlog/index", 
 ???"data": function ( d ) { return $.extend( {}, d, { "extra_search": $(‘#extra‘).val() } ); } } } );

4 以json格式提交

特点:--post方法, 动态传参

$(‘#example‘).dataTable( { ?"ajax": { ???"url": "http://xingJinYuBlog/index", 
 ???"contentType": "application/json",
???"data": function ( d ) {
??????var d ={},
??????d.xxx=$(‘#extra‘).val();
 ???return JSON.stringify( d ); ???} ?}} );

参考文章有官网: 

http://datatables.club/reference/option/ajax.data.html

https://datatables.net/forums/discussion/21940/how-to-pass-new-post-parameters-on-ajax-reload

Datatables post 动态提交数据(传参数) 异步数据(ajax.data)

原文地址:https://www.cnblogs.com/autoXingJY/p/10121603.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved