将DataTable中的行数据发布到Ajax表格

Question

我有一组使用数据表显示的JSON数据。在其中一列中，只有当该列和另一列中的值满足特定条件时，才会添加按钮和文本框。这是我用来做这个的代码位：

$(document).ready(function(){ 
     var alertTable = $('#alert-table').DataTable({ 
      "jQueryUI": true, 
      "order": [ 3, 'desc' ], 
      "columns": [ 
       { "data": "source", "visible": false }, 
       { "data": "host" }, 
       { "data": "priority" }, 
       { "data": "ack", "render": function(data, type, row) { 
        if (row.ack == "0" && row.priority > "2") { 
         return '<form><input class="ackname" type="text" value="Enter your name"><input class="ackbutton" type="button" value="Ack Alert" onclick="<get all items for that row and POST to a URL>"></form>'; 
         } 
         return data; 
        } 
       }, 
      ], 
      "language": { 
       "emptyTable": "No Alerts Available in Table" 
      } 
     }); 
    }); 

这是通过在细胞中添加一个按钮和文本罚款。我期望实现的是，当单击任何按钮时，应该将该行的所有值（包括在文本框中键入的内容）POST到具有提取这些详细信息并更新数据库的另一个函数的URL并发回刷新的数据。我是新来的数据表和jQuery，任何指南将不胜感激。

Answer 1

已经对代码进行了一些更改，而不是表单，您可以使用div。

$(document).ready(function(){ 
    var alertTable = $('#alert-table').DataTable({ 
     "jQueryUI": true, 
     "order": [ 3, 'desc' ], 
     "columns": [ 
      { "data": "source", "visible": false }, 
      { "data": "host" }, 
      { "data": "priority" }, 
      { "data": "ack", "render": function(data, type, row) { 
       if (row.ack == "0" && row.priority > "2") { 
        return '<div><input class="ackname" type="text" value="Enter your name"><input class="ackbutton" type="button" value="Ack Alert"></div>'; 
        } 
        return data; 
       } 
      }, 
     ], 
     "language": { 
      "emptyTable": "No Alerts Available in Table" 
     } 
    }); 
    $(document).on("click",".ackbutton",function() { 
     var currentIndex = $(this).parent().parent().index(); 
     var rowData = alertTable.row(index).data(); 

     //extract the textbox value 
     var TextboxValue = $(this).siblings(".ackname").val(); 
     var objToSave = {}; //Create the object as per the requirement 
     //Add the textbox value also to same object and send to server 
     objToSave["TextValue"] = TextboxValue; 
     $.ajax({ 
       url: "url to another page" 
       data: JSON.stringify({dataForSave : objToSave}), 
       type: "POST",dataType: "json", 
       contentType: "application/json; charset=utf-8",     
       success: function(datas) { 
        //Your success Code 
       }, 
       error: function(error) { 
        alert(error.responseText); 
       } 
      }); 
    }); 
}); 

由于两个页面都在同一个项目中，你也可以做到使用它的单AJAX，传递所有值服务器一次，然后从服务器内部调用其他页面，并使用查询字符串中的值传递。

这不是一个正在运行的代码，而是给你一个关于如何继续的基本想法。

希望这有助于:)