javascript - 使用 jQuery DataTable 的未定义值

Question

我正在使用 jQuery DataTable 以表格形式公开数据；在 table 上，我有一个按钮可以打开 Bootstrap Modal 来修改其中两个值，我使用 Ajax 将修改后的值发送到 Spring Controller。

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

"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>";

                    }

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

"data is not defined"

我在 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 字段没有传递给 Controller ​​。

确实，在我用来发送数据的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; 我可以完美地将数据发送到 Controller ，并且它们可以毫无问题地进行更改。

因此，问题在于渲染函数无法正确获取 id，这会导致 ajax 函数无法获取它并传递给 Controller ​​；我决定检查这个函数，但我得到了两个我无法理解的结果。

我放在这里的代码在一个名为 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() 添加了 data-id，否则您无法使用 data() 检索它。请改用 $(this).attr('data-id')。