使用 jQuery DataTable 的未定义值

Posted 2023-05-08

【中文标题】使用 jQuery DataTable 的未定义值

【英文标题】：Undefined values using jQuery DataTable

【发布时间】：2018-01-08 01:08:33

【问题描述】：

我正在使用 jQuery DataTable 以表格形式公开数据；在桌子上，我有一个按钮可以打开引导模式来修改其中两个值，我使用 Ajax 将修改后的值发送到 Spring 控制器。

这是数据表中的第一列定义：

"columnDefs": [
                        
                           "targets": [ 0 ],
                           "visible": false
                           //"searchable": false
                        ],

                "columns":  [
                     "data": "id" ,
                     "data": "date" ,
                     "data": "type" ,
                     "data": "name" ,
                     "data": "user_name" ,
                     "data": "status" ,
                     "data": "closing_date" ,
                     "data": "info" ,
                     "data": "note" ,
                     "render": function ( data, type, full, meta ) 


                        return "<button type='button' class='btn btn-info btn-md' data-toggle='modal' data-id=\'" + data.id + "\' data-target='#myModal'> Edit </button>";

                    

因为我在加载应用程序后得到控制台错误：

“数据未定义”

我在 Stack 上问过，有人建议我更改渲染功能：

 "render": function ( data, type, full, meta ) 


                        return "<button type='button' class='btn btn-info btn-md' data-toggle='modal' data-id=\'" + full[0] + "\' data-target='#myModal'> Edit </button>";

                    

现在我没有数据错误，但是当我尝试使用按钮并修改数据时，我得到了这个输出：

Object  newnote: "aaa", newstatus: "closed", idevent: undefined  <button type="submit" class="btn btn-success" data-dismiss="modal">

（请注意note和status是可以修改的变量）。在eclipse中看到，我可以注意到控制台错误告诉我，总和，id字段没有传递给控制器​​。

确实，在我用来发送数据的ajax函数中，就是：

$('#myModal').on('click', '.btn.btn-success', function(event) 
        var form = $('#updateeventsform');
        var formdata = form.serializeObject();
        formdata.idevent = $(this).data('id');
        console.log(formdata, this);
        event.preventDefault();

        $.ajax(
                url: "../updateevents.json",
                type: "post",
                data: formdata,
                success : function() 

                    console.log("Invio riuscito.");
                

            );

        );

如果我尝试将formdata.idevent = $(this).data('id'); 更改为某个数值，例如：formdata.idevent = 1; 我可以完美地将数据发送到控制器，并且更改它们没有任何问题。

所以，问题是渲染函数无法正确获取 id，这导致 ajax 函数无法获取并传递控制器；我决定检查这个函数，得到了两个我无法理解的结果。

我放在这里的代码在一个名为eventsdetailsdatatable.js的文件中；但是，如果我将鼠标放在full[0] 代码上，我会收到以下消息：Origin:

src/main/webapp/static/js/custom/firewalldatatable.js

此文件是另一个数据表定义，用于防火墙部分。为什么会这样？能否取决于应用的结构以及数据在其文件夹中的位置？

另一个奇怪的事情是，如果我使用以前的表单 data.id 而不是 full[0]，将鼠标放在它上面我可以阅读：

Returns:
service.$locale
Origin:
angular
Guess?:
true
See:
http://docs.angularjs.org/api/ng.$locale

但是...我没有使用 Angular；再说一遍，为什么会这样？

总结一下，我有一个渲染函数没有正确设置 data-id 值，无法识别使用 data 或 full 并告诉我这些值有一个它们可能没有的来源。

有什么想法吗？

【问题讨论】：

因为你的id没有定义，把data-id改成id

那么，您是否建议我更改按钮中的 data-id=\'" + data.id + "\' with id=\'" + data.id + "\' ?

对不起，这只是一个快速的seggust，不要那样做，数据是用来保存信息的，你能看看你的价值是什么$(this).data( 'ID'）;在控制台中，我认为它不对，正如你所说，如果你输入数字就可以了，

【参考方案1】：

您必须将data 定义为null（我相信您不希望将按钮放置在note 列中）：

...
 "data": "note" ,
 "data": null,
  "render": function ( data, type, full, meta ) 
    return "<button type='button' class='btn btn-info btn-md' data-toggle='modal' data-id=\'" + full.id + "\' data-target='#myModal'> Edit </button>";
  

地址full而不是data，即data-id=\'" + full.id + "\'

---

$(this).data('id'); 是错误的。在元素上存储变量是 jQuery 自己的发明。除非您特别添加了data-id 和data()，否则您无法使用data() 检索它。请改用$(this).attr('data-id')。

【讨论】：

已测试，但我仍有未定义的值；可能取决于我对 ajax 函数的了解？我的意思是，我可以修改 formdata.idevent = $(this).data('id') 吗？我补充说，如果现在我在 full.id 上传递鼠标，我可以读取 service.$locale wit angular as origin。

已测试；您对 attr 的第二个回答，我还有其他问题，但我知道了原因。问题是这个词；如果我离开 $(this).attr('data-id')，我会继续得到未定义的值。但是，如果我输入按钮 id，例如： $('#5').attr('data-id');代码有效。当然，我不能对所有按钮使用相同的 id，所以我将按钮的 id 设置为 full.id，即：id=\'" + full.id + "\'。现在，问题变成了：如何传递 formdata.event 的 ID？或者我必须使用什么来代替 $(this)？

【参考方案2】：

自己解决。与一位同事交谈，我们假设，由于模态将他的激活按钮代码作为字符串保存在一个文件中，而其余代码在另一个文件中，这可能会带来一些问题。我们不知道这个假设是否正确，但从这个假设出发，我们制定了这个解决方案：

我们在代码开头放置了一个全局变量id_event；

在渲染函数中，用data.id值设置这个变量，不使用模态按钮中的data-id字段，通过按钮中的onclick：

"data": null, "render": function (data, type, full, meta)

                    return "<button type='button' class='btn btn-info btn-md' data-toggle='modal' data-target='#myModal' onclick=\'id_event="+data.id+"\'> Edit </button>";

                

在向Controller发送数据的ajax函数中，用IDnumber设置formdata.idevent字段：

formdata.idevent = id_event; //将事件ID添加到表单数据中，使用IDnumber变量设置后

这使我们的代码完美运行。