如何使用 DataTables 获取行值和删除数据？答案

【问题标题】：How to fetch row values and delete data using DataTables?如何使用 DataTables 获取行值和删除数据？
【发布时间】：2019-07-18 11:44:40
【问题描述】：

我有一个 DataTable，我在其中显示 API 中的所有值。现在我有一个 Detail 列，其中有一个带删除按钮的 href 标记。我想添加一个类名或 id，但它会引发错误。这是example。

我想获取行值并删除数据。你能帮我解决这个问题吗？

HTML：

<table id="example" class="display" cellspacing="0" width="100%">
     <thead>
         <tr>
           <th>Name</th>
           <th>Email</th>
           <th>Subject</th>
           <th>Message</th>
           <th>Details</th>
         </tr>
        </thead>
 </table>

脚本：

  $(document).ready(function() {
        $('#example').DataTable({
            "processing" : true,
            "ajax" : {
                "url" : "https://api.myjson.com/bins/un18a",
                dataSrc : ''
            },
            "columns" : [ {
                "data" : "name"
            }, {
                "data" : "email"
            }, {
                "data" : "subject"
            }, {
                "data" : "message"
            },
            {
                    "mData": "Details",
                    "mRender": function (data, type, row) {
                        return "<a id="delete" href='/Details/" + row.id + "'>Delete</a>";
                    }
            }]
        });
    });

【问题讨论】：

标签： javascript jquery html datatables bootstrap-4

【解决方案1】：

更新

试试这个new one

this怎么样

$(document).ready(function() {
    $('#example').DataTable({
        "processing" : true,
        "ajax" : {
            "url" : "https://api.myjson.com/bins/un18a",
            dataSrc : ''
        },
        "columns" : [ {
            "data" : "name"
        }, {
            "data" : "email"
        }, {
            "data" : "subject"
        }, {
            "data" : "message"
        },
        {
                "mData": "Details",
                "mRender": function (data, type, row) {
                console.log(row)
                    return "<a class='delete' data-obj='" + JSON.stringify(row)
 + "' href='/Details/" + row.id + "'>Delete</a>";
                }
        }]
    });
    $(document).on("click", ".delete", function(e) {
        e.preventDefault()
        let data = $(this).data("obj")
        alert("Name: " + data.name + " Email: " + data.email + " Subject: " + data.subject + " Message: " + data.message ) 
    })
});

【讨论】：

【解决方案2】：

$(document).ready(function() {
$('#example').DataTable({
    "processing" : true,
    "ajax" : {
        "url" : "https://api.myjson.com/bins/un18a",
        dataSrc : ''
    },
    "columns" : [ {
        "data" : "name"
    }, {
        "data" : "email"
    }, {
        "data" : "subject"
    }, {
        "data" : "message"
    },
    {
            "mData": "Details",
            "mRender": function (data, type, row) {
                return "<a href='https://api.myjson.com/bins/un18a/Details/" + row.id + "'>Delete</a>";
            }
    }]
});

});

为删除创建一个控制器函数，当https://api.myjson.com/bins/un18a/Details/{id}路由调用时调用该函数

【讨论】：

【解决方案3】：

我认为它有效，请按照我在您的 JSFiddle 示例中尝试的方法尝试。

$(document).ready(function() {
$('#example').DataTable({
    "processing" : true,
    "ajax" : {
        "url" : "https://api.myjson.com/bins/un18a",
        dataSrc : ''
    },
    "columns" : [ {
        "data" : "name"
    }, {
        "data" : "email"
    }, {
        "data" : "subject"
    }, {
        "data" : "message"
    },
    {
            "mData": "Details",
            "mRender": function (data, type, row) {
                return "<a id='rec1' class='thisclass' href='/Details/" + row.id + "'>Delete</a>";
            }
    }]
});

});

也加入css块

.thisclass{
 color:red;
}

【讨论】：

谢谢，你能告诉我如何在点击删除时获取行值。