DataTableで編集された行を更新するには

Question

Datatableの行を編集しようとしています.Dataがデータベースから読み込み中です。行のポップアップをクリックした後に表示されます。送信ボタンをクリックした後にフィールドを編集すると更新されません。 コンソールネットワークエラーで403です。 は禁止されています。編集した行を更新するには？あなたは（データテーブル内のデータをロードするだけでなく、レコードを更新する）の両方に同じ関数を呼び出している

var workorder_path = "/dashboard/workorder_list/0/?format=json"; 

var editor = new $.fn.dataTable.Editor({ 
    ajax: { 


edit: { 
         type: 'PUT', 
         dataType:"json", 
         contentType: "application/json", 
         url: '/dashboard/workorder_list/0/?format=json', 
         data: function (d) { 
          return JSON.stringify(d); 
         } 
        }, 


    }, 
    table: "#workorder_table", 
    idSrc: "id", 
    fields: [ 
     { label: "ID:", name: "id" }, 
     { label: "Task:", name: "task.name" }, 
     { label: "Description:", name: "description" }, 

     { label: "Start Date:", name: "start_date", 
       "type": "datetime" }, 
     { label: "End Date:", name: "end_date", 
       "type": "datetime" } 
    ] 
}); 





var workorder_table = $('#workorder_table').dataTable({ 
    dom: 'Blfrtip', 
    JQueryUI: true, 
    bPaginate: false, 
    sScrollX: "100%", 
    responsive: true, 
    select: true, 
    buttons: [ 
     { 
      text: 'New', 
      action: function() { 
       create_workorder_window(); 
      }, 
      className: 'btn btn-warning btn-outline' 
     }, 
     { extend: "edit", editor: editor, className: 'btn btn-warning btn-outline' }, 
     // { extend: "create", editor: editor }, 
     { extend: 'colvis', text: 'Show', className: 'btn btn-warning btn-outline'} 
    ], 
    ajax: { 
     url: workorder_path, 
     dataSrc: '' 
    }, 
    columns: [ 
     {"data": "id", "class": "workorder_id"}, 
     {"data": "thumb", "render": function(data, type, row) { 
             return `<a href=` + data + ` data-fancybox> <img src=` + data + ` width="80" height="45"> </a>`; 
            }}, 
     {"data": "task.name"}, 
     {"data": "description"}, 
     {"data": "status", "class":"v-a-m", "render": function (status, type, row) { 
               return `<div class="media media-auto"> 
                  <div class="media-left"> 
                   <div class="avatar"> 
                    <img class="media-object img-circle" 
                     src=${ status.image } 
                     alt=${ status.name } 
                     title=${ status.name }> 
                   </div> 
                  </div> 
                  <div class="media-body"> 
                   <span class="media-heading">${ status.name }</span> 
                  </div> 
                 </div>`; 

     } }, 
     {"data": "start_date", "visible": false}, 
     {"data": "end_date", "visible": false}, 
     {"data": "assign_to", "width": "400px", "defaultContent": "None", "render": function (assign_to, type, row) { 

               return `<div class="media media-auto"> 
                 <div class="media-left"> 
                  <div class="avatar"> 
                   <img class="media-object img-circle" 
                    src=${ assign_to.photo } 
                    alt=${ assign_to.official_name }> 
                  </div> 
                 </div> 
                 <div class="media-body"> 
                  <span class="media-heading text-white">${ assign_to.official_name }</span> 
                  <br> 
                  <span class="text-gray-lighter"><span>${ assign_to.designation.designation }</span></span> 
                 </div> 
                </div>` 

     } }, 
     {"data": "creation_time", "visible": false}, 
     {"data": "modified_time", "visible": false} 
    ] 
}); 

Answer 1

、私はあなたがあなたの質問に言及したURLを意味します。

したがって、編集ajax関数内では、データを渡すことができる別のサーバーサイドメソッドを呼び出す必要があります。例えば、

[HttpPut] 
public returnType EditRecord(int id, WorkorderModel model) 
{ 
    //Here you can update the record then return a success message or whatever 
    return message; 
} 

注：参照してください、私はあなたが書いている言語にはわかりません。私はC＃で書いているので、EditRecord methodの上にHttpPut attributeを追加してPUTにしました。それに応じてそれを変更する必要があります。

次に、クライアント側の編集アヤックスから、あなたはちょうどあなたがあなたのAjax編集で書かれていることを、URLを変更

url: '/dashboard/EditRecord/'+d.id, 

、このようにそれを呼び出すことができます。ここをクリックしてください。d.idは、更新する予定のレコードIDだけです。

はそれが役に立てば幸い:)