使用jQuery DataTable的未定义值

问题描述

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

I'm Using jQuery DataTable to expose data in table form; on the table, I have a button that opens a Bootstrap Modal to modify two of these value and I use Ajax to send modified values to a Spring Controller.

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

This was the first columns definition in the data table:

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

                    }

原因是在加载应用程序后出现控制台错误:

Cause I got, after loading the app, the console error:

我在Stack上问过，建议我在以下位置更改渲染功能:

I asked here on Stack and it was suggested to me to change the render function in:

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

                    }

现在我没有数据错误，但是当我尝试使用按钮并修改数据时，得到以下输出:

Now I have not the data error but when I try to use the button and modify the data, I get this output:

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

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

(please note that note and status are the variable that can be modified). Seeing in eclipse, I can note that the console error tells me, summing, that the id field is not passed to the controller.

实际上，在我用来发送数据的ajax函数中，即:

Indeed, in the ajax function that I use to send data, that is:

$('#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;我可以将数据完美地发送到控制器，并且它们可以毫无问题地进行更改.

if I try to change formdata.idevent = $(this).data('id'); with some numeric value, for example: formdata.idevent = 1; I can send perfectly the data to controller and they are changed with no problems.

因此，问题在于render函数不能正确获取id，这将导致ajax函数无法获取id并传递给控制器​​；我已经决定要检查此功能，但有两个我无法理解的结果.

So, the issue is that the render function cannot take the id properly and this causes the ajax function not be able to take it and pass the controller; I have decided so to examine this function and I got two results that I cannot understand.

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

The code that I put here is in a file named eventsdetailsdatatable.js; but, if I pass the mouse on the full[0] code, I got this message: Origin:

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

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

This file is another data table definition, used for Firewall section. Why is this happening? Can depend on the structure of the app and how data are located in their folders?

其他奇怪的事情是，如果我使用以前的形式data.id代替full[0]，并且将鼠标移到上面，我可以读取:

The other strange things is that if I use, instead of full[0], the previous form, data.id, passing the mouse on it I can read:

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

但是...我不使用Angular；再次，为什么会这样?

but...I'm not using Angular; again, why is this happening?

总结一下，我有一个渲染函数，该函数未正确设置data-id值，无法识别数据的使用或已满，并告诉我这些值的起源可能不是.

Summing, I have a render function that does not set the data-id value properly, does not recognize the use of data or full and tell me that these values have an origin that they may have not.

有什么主意吗?

推荐答案

由我自己解决.与一位同事交谈时，我们假设，导致该模式将他的激活按钮代码存储在文件中作为字符串，而其余的代码则存储在另一个文件中，这可能会带来一些问题.我们不知道您的假设是否正确，但是从这个假设开始，我们制定了以下解决方案:

Solved by myself. Speaking with a colleague, we suppose that, cause the modal has his activation button code on a file as string and the rest of code into another, this may take some problems. We don't know if thies hypotesis is correct, but starting from this assumption we formulate this solution:

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

2. ，在render函数中，通过在按钮上单击来使用data.id值设置此变量，而无需使用模式按钮中的data-id字段:

1. we put a global variable id_event at the start of code;

2. in the render function, set this variable with the data.id value, without using the data-id field in the modal button, by onclick in the button:

{数据":null，渲染":函数(数据，类型，完整，元){

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

                }

在用于向控制器发送数据的ajax函数中，使用IDnumber设置formdata.idevent字段:

In the ajax function for sending data to Controller, set with IDnumber the formdata.idevent field:

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

formdata.idevent = id_event; //add the event id to form data, after setting it with the IDnumber variabile

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

This made our code perfectly working.

这篇关于使用jQuery DataTable的未定义值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！