Как получить значения строк и удалить данные с помощью DataTables?

Question

У меня есть DataTable, где я отображаю все значения из API.Теперь у меня есть столбец Detail, где у меня есть тег href с кнопкой удаления.Я хочу добавить имя класса или идентификатор, но выдает ошибку.Вот пример .

Я хочу получить значения строк и удалить данные.Не могли бы вы помочь мне с этим?

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>";
                    }
            }]
        });
    });

Answer 1

$(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} маршрутизации вызовов

Answer 2

я думаю, что это работает, попробуйте это, как я пытался в вашем примере 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;
}

Answer 3

ОБНОВЛЕНИЕ

Попробуйте это новое

Как насчет это

$(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 ) 
    })
});