Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 331|回复: 0

超全table功能Datatables使用的填坑之旅--2:post 动态传参: 解决: ajax 传参无值问题.

[复制链接]
  • TA的每日心情
    奋斗
    4 天前
  • 签到天数: 802 天

    [LV.10]以坛为家III

    2053

    主题

    2111

    帖子

    72万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    726006
    发表于 2021-6-5 23:03:13 | 显示全部楼层 |阅读模式

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

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

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

     

    下面举几个栗子:参数格式是必须和例子一样:

    *最优选:post动态传参方法:

     

    // 优点: 可动态获得参数的值,防止各种获得参数为null的bug!
        var myTable = $("#example").DataTable({
          ajax: {
            url: "http://xingJinYuBlog/index",
            data: {
              function (d) {
                return {
                  "XXX": $('#extra').val(),
                  "XXX1": $('#extra1').val()
                }
              }
    
            }
          }
        });
    
        //重新渲染表格, 动态改变ajax参数值
        function reloadTable() {
          var param = {
            "name": $("#seName").val(),
            "admin": $("#seAdmin").val()
          };
          myTable.settings()[0].ajax.data = param;
          myTable.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

     

    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-11-15 10:30 , Processed in 0.330895 second(s), 27 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表