使用弹出窗口内的表单编辑DataTables源数据

Question

我有一个数据表，可使用ajax从数据库中获取记录。我想编辑工具提示像添加jQuery的数据表编辑器扩展到数据表，但免费。有没有插件可以做到这一点？如果没有，有人可以帮助我手动执行此操作吗？

这是我的JavaScript代码：

$('#table_id').DataTable({
    "serverSide": true,
    "processing": true,
    "ajax": function (data, callback, settings) {
        $.ajax({
            url: '/some url',
            type: 'GET',
            data: data,
            success: function (data) {
                console.log(data)
            }
        });

    },
    "columns": [{
            "title": "edit",
            "data": null,
            "className": "center",
            "defaultContent": '<a href = "" class = "editor_edit"> Edit </a>  /  <a href = "" class = "editor_remove"> Delete </a>'
        }, {
            "title": "name",
            "data": "name"
        }, {
            "title": "id",
            "data": "id"
        },

    ]
});

Answer 1

由于您的问题（和已发布的代码示例）主要与可编辑行功能的前端部分有关，因此我将主要关注这一点，因为后端逻辑非常简单（在收到AJAX请求后将数据更新/插入本地存储中）。

为了实现以下功能，我可能建议：

• 在某些属性（例如）内将（通过createdRow选项）附加一些锚点（row().index()或源对象id属性等）到源数据中，因此您稍后将知道在服务器端修改哪个条目：<tr>rowindex

$('table').DataTable({
    ...
    createdRow: (tr, _, rowIndex) => $(tr).attr('rowindex', rowIndex)
})

• 将一些锚点属性（例如data-src）添加到编辑器弹出窗口（为此，我将使用bootstrap-4模态）<input>节点将这些输入字段链接到相应的源对象属性：

<div><label>PropertyX:</label><input data-src="propertyX"></input></div>

• 单击edit按钮后，获取相应的行数据，<input>使用该数据填充编辑器弹出字段，将锚点传递给已编辑的行（rowindex属性值），并将其传递给弹出属性：

//for table id 'example' handle clicking 
//edit button having class 'edit'
$('#example').on('click', '.edit', function () {
    //get clicked row invoking row() API method
    //against DataTables object assigned to dataTable
    const rowClicked = dataTable.row($(this).closest('tr'));
    //populate edit form with row data by corresponding
    //rowClicked property based on 'data-src' attribute
    $.each($('#editform input'), function () {
        $(this).val(rowClicked.data()[$(this).attr('data-src')]);
    });
    //set modal attribute rowindex to corresponding row index
    $('#editform').attr('rowindex', rowClicked.index());
    //open up edit form modal
    $('#editform').modal('toggle');
});

• 完成行数据编辑后，将<input>值存储到对象中：

const modifiedData = {};
$.each($('#editform input'), function(){
  Object.assign(modifiedData, {[$(this).attr('data-src')]:$(this).val()});
});

• POST数据（以及相应的rowindex）发送到服务器，并ajax.reload()在成功后重新加载（）最新的数据表：

$.ajax({
    url: '/editrow',
    method: 'POST',
    data: {id: $('#editform').attr('rowindex'), ...modifiedData},
    success: () => {
        $('#editform').modal('hide');
        dataTable.ajax.reload();
    }
});

您可以通过以下链接以行按钮的形式获得一些奖励，您可以通过以下链接在该浏览器的DevTools中检查该方法的完整实时演示。delete

HTML和jQuery代码示例都可能如下所示（由于不支持后端，因此无法执行）：

$('table').DataTable({
    ...
    createdRow: (tr, _, rowIndex) => $(tr).attr('rowindex', rowIndex)
})

<div><label>PropertyX:</label><input data-src="propertyX"></input></div>

Answer 2

您可以在数据表中创建自定义按钮。您可以转到此文档以了解其工作原理。现在，在操作中，您可以在用户单击按钮时调用其中的某些函数，按钮将调用 javascript 中的函数并在其中执行您想要的操作。

这是示例代码。

$('#table_id').DataTable({
"serverSide": true,
"processing": true,
"ajax": function (data, callback, settings) {
    $.ajax({
        url: '/some url',
        type: 'GET',
        data: data,
        success: function (data) {
            console.log(data)
        }
    });

    },
   buttons: [
    { text: 'Add', name: 'btnAdd', action: function ( e, dt, node, config ) {
                $.fn.addfunction();
            }},
    { extend: 'selected', text: 'Edit', name: 'btnEdit', action: function ( e, dt, node, config ) {
                $.fn.editfunction();
            }},
    { extend: 'selected',  text: 'Delete', name: 'btnDelete', action: function ( e, dt, node, config ) {
                $.fn.deletefunction();
            }},
   ],
   "columns": [{
        "title": "edit",
        "data": null,
        "className": "center",
        "defaultContent": '<a href = "" class = "editor_edit"> Edit </a>  /  <a href = "" class = "editor_remove"> Delete </a>'
     }, {
        "title": "name",
        "data": "name"
     }, {
        "title": "id",
        "data": "id"
     },

    ]
});

$.fn.addfunction = function(){
//Your code here
}

$.fn.editfunction = function(){
//Your code here
}

$.fn.deletefunction = function(){
//Your code here
}

我从创建自定义按钮并在jquery中创建和调用函数的数据表中添加了本文档的想法

还有其他方法可以使用按钮并为其提供 id。这是例子：

$('#table_id').DataTable({
    "serverSide": true,
    "processing": true,
    "ajax": function (data, callback, settings) {
        $.ajax({
            url: '/some url',
            type: 'GET',
            data: data,
            success: function (data) {
                console.log(data)
            }
        });

        },
       buttons: [
        { text: 'Add', name: 'btnAdd', 
        attr:{
         id: 'btnAdd'
        }},
        { extend: 'selected',  text: 'Edit', name: 'btnEdit', 
        attr:{
         id: 'btnEdit'
        }},
        { extend: 'selected',  text: 'Delete', name: 'btnDelete', 
        attr:{
         id: 'btnDelete'
        }},
       ],
       "columns": [{
            "title": "edit",
            "data": null,
            "className": "center",
            "defaultContent": '<a href = "" class = "editor_edit"> Edit </a>  /  <a href = "" class = "editor_remove"> Delete </a>'
        }, {
            "title": "name",
            "data": "name"
        }, {
            "title": "id",
            "data": "id"
        },

       ]
    });

    $(document).on('click', '#btnAdd', function(e)
        {
          e.preventDefault();
          e.stopPropagation();
          //your code here
        });

    $(document).on('click', '#btnEdit', function(e)
        {
          e.preventDefault();
          e.stopPropagation();
          //your code here
        });

    $(document).on('click', '#btnDelete', function(e)
            {
              e.preventDefault();
              e.stopPropagation();
              //your code here
            });

抱歉很多编辑希望它有帮助！