使用 jQuery DataTable 的未定义值

Question

我正在使用 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 并告诉我这些值有一个它们可能没有的来源。

有什么想法吗？

Answer 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')。

Answer 2

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

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

2. 在渲染函数中，用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>";
   
                   }
   

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

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

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