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，该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，一次将所有值传递给服务器，然后从服务器内部调用另一个页面并使用查询字符串传递值。

这不是一个正在运行的代码，而是为您提供有关如何继续的基本知识。

希望这会有所帮助：）

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

1 个答案: