JQuery DataTable 上的“編輯”按鈕

Question

我正在使用 JQuery DataTable 顯示數據，並且我想為該表中的每一行制作一個編輯按鈕。

但是，我有兩個關於該按鈕的問題。

 1. Once I run the application, the Edit button will trigger automatically (which redirect to the new page).
 2. I want to get the information of the first column of the selected row, but what I got is undefined value.

這是我正在使用的代碼：

HTML：

<table id="tblMember">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Gender</th>
                    <th>Status</th>
                    <th>Account</th>
                    <th>Action</th>
                </tr>
            </thead>
        </table>

JS：

$('#tblMember').dataTable({
            bProcessing: true,
            bServerSide: true,
            iDisplayLength: 10,
            sAjaxSource: "~/MemberService.ashx",
            fnServerData: function (sSource, aoData, fnCallback) {
                aoData.push({ "name": "GroupAccount", "value": "Account" })

                $.ajax({
                    type: "POST",
                    data: aoData,
                    url: sSource,
                    dataType: "json",
                    success: function (msg) {
                        fnCallback(msg);

                        $("#tblMember").dataTable().show();
                    }
                });
            },
            columnDefs: [
                {
                    width: "10%",
                    className: "dt-body-center",
                    targets: -1,
                    data: "Name",
                    render: function (data, type, full, meta) {
                        return "<button onclick='" + GetSelectedData(data) + "'><i class='fa fa-pencil' aria-hidden='true'></i></button>";
                    }
                }
            ]
        });
    }

    function GetSelectedData(value) {
        window.location = "~/Registration.aspx?Name='" + value + "'";
    }

我缺少什么？

非常感謝您的回答。

謝謝你。

Answer 1

好吧，當我有類似的要求時，我創建了具有屬性columnDefs的按鈕，但在DataTable定義之外處理了它的點擊調用。

我提供的解決方案假設您的表正在正確初始化，但編輯按鈕問題除外。

演示： https : //jsfiddle.net/Prakash_Thete/j3cb2bfo/5/

將編輯按鈕添加到您的表格中：

"columnDefs": [
    {
        className: "dt-body-center",
        targets: -1,
        defaultContent: ["<i class='fa fa-pencil editButton' aria-hidden='true' aria-hidden='true'></i>"]

     }
 ]

處理編輯按鈕的點擊調用

假設

var memberTable = $('#tblMember').dataTable({

然后

$('body').on('click', '#tblMember tbody tr .editButton', function () {
    var rowData = memberTable.row( $(this).parents('tr')).data();
    console.log("Rows data : ",  rowData);

    //fetch first column data by key if you are passing map as input to table
    console.log("First column data : ", rowData[0]); 
});