Question

我开始在编辑器中使用jquery数据表。我有一个带有添加和删除按钮的基本表。

“删除”按钮提供一个小对话框，其中包含所选数据的预览。如果我提交对话框，则所选行将从表中删除。

但是提交对话框按钮后如何向我的后端发送ajax？

我现在的代码如下：

        $('table').DataTable({
        "sPaginationType": "full_numbers",
        "language": {
            "lengthMenu": "Display _MENU_ records per page",
            "zeroRecords": "Keine Einträge gefunden",
            "info": "Seite _PAGE_ von _PAGES_",
            "infoEmpty": "Keine Einträge vorhanden",
            "infoFiltered": "(_MAX_ Einträge gesamt)",
            "search": "Suche:",
            "paginate": {
                "first":      "erste",
                "last":       "letzte",
                "next":       "nächste",
                "previous":   "vorherige"
            }
        },
        dom: 'Bfrtip',        // Needs button container
        select: 'single',
        responsive: true,
        altEditor: true,     // Enable altEditor
        buttons: [
            {
                text: 'Add',
                name: 'add',        // do not change name
            },
            {
                extend: 'selected', // Bind to Selected row
                text: 'Bearbeiten',
                name: 'edit'        // do not change name
            },
            {
                extend: 'selected', // Bind to Selected row
                text: 'Löschen',
                name: 'delete',      // do not change name
            },
        ],
    });

谢谢！

Answer 1

只是将其发送到服务器？您可以进行API Submit（）调用：

editor
    .create( false )
    .set( 'name', 'Airi' )
    .set( 'position', 'Accountant' )
    .set( 'office', 'Tokyo')
    .submit();

您可以将此与任何事件关联：remove()，preRemove()或postRemove()将是不错的选择。

Answer 2

您可以使用 onAddRow、onEditRow 和 onDeleteRow 事件。在事件中，可以编写代码调用ajax。检查下面的例子

      onAddRow: function (datatable, rowdata, success, error) {
        //add item to the rowdata 
        rowdata["make_order"] = id;
        rowdata["production_status"] = 3 // Not started
        $.ajax({
          url: url,
          headers: {
            "X-CSRFToken": csrftoken,
          },
          type: "POST",
          data: rowdata,
          success: success,
          error: error,
        });
      },
      onDeleteRow: function (datatable, rowdata, success, error) {
        $.ajax({
          url: url + rowdata.id + "/",
          headers: {
            "X-CSRFToken": csrftoken,
          },
          type: "DELETE",
          data: rowdata,
          success: success,
          error: error,
        });
      },
      onEditRow: function (datatable, rowdata, success, error) {
        //add item to the rowdata 
        rowdata["make_order"] = id;
        $.ajax({
          url: url + rowdata.id + "/",
          headers: {
            "X-CSRFToken": csrftoken,
          },
          type: "PUT",
          data: rowdata,
          success: success,
          error: error,
        });

jQuery数据表扩展编辑器的删除按钮行为

2 个答案: