javascript - 将行数据从DataTable发布到Ajax表单

我有一组使用数据表显示的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"
            }
        });
    });

通过在单元格中添加按钮和文本，可以很好地工作。我要实现的目标是，当单击任意按钮时，它应将该行的所有值（包括在文本框中键入的内容）发布到URL，该URL具有另一个可以提取这些详细信息并更新数据库的功能。并发回刷新的数据。我是datatables和jquery的新手，任何指南将不胜感激。

最佳答案

对代码进行了一些更改，可以使用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来完成它，一次将所有值传递到服务器，然后从服务器内部调用另一个页面，并使用查询字符串传递值。

这不是正在运行的代码，而是为您提供有关如何进行操作的基本思路。

希望这可以帮助 ：）

关于javascript - 将行数据从DataTable发布到Ajax表单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25686592/