Question

我有一个带有这个变量的jQuery数据表：

 "columns":  [
                    { "data": "id" },
                    { "data": "date" },
                    { "data": "type" },
                    { "data": "name" },
                    { "data": "user_name" },
                    { "data": "status" },
                    { "data": "closing_date" },
                    { "data": "info" },
                    { "data": "note" },
                    { "render": function () {
                            return "<button type='button' class='btn btn-info btn-md' data-toggle='modal' data-id=\""+data.id+"\" data-target='#myModal'> Edit </button>";
                    }
                  }
                ]

完全显示查询结果。如您所见，最后哦，表格显示一个带有编辑按钮的列，必须允许用户修改注释和状态;必须将此修改后的数据发送到Spring控制器，并使用要修改的数据的ID。

我的问题不是如何发送到控制器;感谢这里的用户堆栈，我解决了这个问题。

我的问题是：如果我想在模态中使用{ "data": "id" }来设置触发模态的按钮上的data-id，我必须使用什么语法？实际的语法使我错误地告诉＆＃34;数据未定义＆＃34;当我加载应用程序。似乎如果我使用实际值data-id=\""+data.id+"\"，它就不会识别数据。用于调用数据表列数据的表示法。

编辑：markpsmith答案解决了未定义的数据问题，但我仍然存在问题。他的解决方案引入了另一个问题：现在，当我提交表单数据时，我得到了un＆＃34; undefined＆＃34; id上的值。分析元素我可以注意到它在我提交数据表单之前未定义;在页面加载后立即检查按钮，该值未定义。

我已尝试在网络上找到其他解决方案，但问题始终如一：我对数据ID的所有数据和组合都无法识别，并且此值设置为未定义。

Answer 1

您使用render作为函数类型但不提供任何参数。如果查看docs，您会看到render（）有4个参数，其中没有一个是可选的。

要使代码正常工作，您需要将其更改为：

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

full参数是完整的行数据，当您使用第一列（id）时，您需要通过从零开始的索引来引用它。

Answer 2

您可以将row中的数据传递给模式触发按钮上的数据属性...

 "columns": [
    ...
    "render": function(data, type, row) {return '<button class="btn btn-primary" data-toggle="modal" data-id="'+row.id+'" data-fieldname="'+row.fieldname+'" data-target="#myModal">'+data+'</button>'} }
 ]

然后使用jQuery和Bootstrap模态显示事件从按钮的data属性填充模态内容...

$("#myModal").on('show.bs.modal', function (e) {
    var triggerLink = $(e.relatedTarget);
    var id = triggerLink.data("id");
    var fieldname = triggerLink.data("fieldname");
    $(this).find(".modal-body").html("<h5>id: "+id+"</h5>");
});

请参见此工作演示中的“日期”列：https://www.codeply.com/go/YV9eFnJXst

Answer 3

 var table = $('#dTable').DataTable({
        processing: true,
        serverSide: true,
        ajax:
        {
            url: '{{ route("settings.getList") }}',
            type: 'GET',
            dataType: "JSON",
            error: function (reason) {
                return true;
            }
        },
        columns: [
            { data: 'serial'},
            { data: 'name' },
            { data: 'value' },
            { data: 'actions', render:function (data, type, full, meta) {
                                return `<a class="success p-0 mr-2" title="Edit" data-id="${full.id}" data-name="${full.name}" data-value="${full.value}" data-toggle="modal" data-keyboard="false" data-target="#editSetting">
                                            <i class="ft-edit font-medium-3"></i>
                                        </a>`;  }
            }
        ],
        columnDefs: [
            { width: "10%", "targets": [-1, 0] },
            { orderable: false, targets: [-1] }
        ],
    });

    $('#editSetting').on('show.bs.modal',function(event){
        const button = $(event.relatedTarget);
        const name = button.data('name');
        const value = button.data('value');
        const valueOriginal = button.data();
        
        var type = jQuery.type(value);
        if(type == 'number'){
            $("#value").html('<input type="number" class="form-control border-primary"  name="value" value='+value+' novalidate required>');
        } else if (type == 'string'){
            $("#value").html('<textarea class="form-control border-primary"  name="value" novalidate required>'+value+'</textarea>');
        } 
        const id = button.data('id');
        const modal = $(this);
        $(this).find('.modal-body #name').text(name);
        $(this).find('.modal-body #value').val(value);
        $(this).find('.modal-body #id').val(id);
    });

<div class="modal fade text-left" id="editSetting" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-success">
                <h3 class="modal-title" id="myModalLabel3">Edit Setting</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="POST" name="updateSetting" id="updateSetting">
                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="text-bold-700" for="name">Name</label>
                                <p id="name"></p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12" >
                            <div class="form-group">
                                <label for="value">Value</label>
                                <div id="value">
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-actions center pb-0">
                        <input type="hidden" id="id" name="id">
                        <button type="reset" data-dismiss="modal" class="btn btn-raised btn-danger mr-1">
                            <i class="icon-trash"></i> Cancel
                        </button>
                        <button type="submit" class="btn btn-raised btn-success">
                            <i class="icon-note"></i> Update
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

如何将DataTable数据传递给Bootstrap模式

3 个答案: