如何在jquery的数据表的每一行添加批准和拒绝按钮？

Question

我想在每行数据中添加一个叉号按钮和一个打勾按钮table。以下是 cshtml 代码：

<div class="content-block">
    <!-- Page Container -->
    <div class="section-full content-inner">
        <div class="container">

            <!---data23---->
            <div class="row mb-5">
                <div class="col-md-12">
                    <h4 class="font-weight-700 mb-4">Verification</h4>
                    <hr>
                </div>
            </div>

            <div class="cph-verification-section p-4 mb-5">
                <div class="row justify-content-center">
                    <div class="col-md-10 mt-4">
                        <table id="cphverification-datatable" class="table table-striped table-bordered" style="width:100%">
                            <thead>
                                <tr>
                                    <th>SLNo</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Phone number</th>
                                    <th>CPH ID</th>
                                    @*<th>Status/Action</th>*@
                                </tr>
                            </thead>
                            <tbody>
                                <tr>                                
                                    @*<td class="text-center">
                                        <button type="button" class="btn btn-sm btn-success" id="approve_cph"><i class="fa fa-check"></i></button>
                                        <button type="button" class="btn btn-sm btn-danger ml-2" id="reject_cph"><i class="fa fa-times"></i></button>
                                    </td>*@
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

下面是javascript的代码：

$.ajax({
    url: "GetUserCPHListForVerification",
    method: "post",
    beforeSend: function () {
        $('#loading-area').show();
    },
    success: function (data) {
        $('#loading-area').hide();
        if (data == 'There is no data for this request') {
            swal("Data Not Found", "There is no data with us for this request", "error");
        }
        else {
            var tabledata = [];
            var obj = JSON.parse(data);
            for (var k = 0; k < obj.length; k++) {
                var row = {};
                row["SLNo"] = obj[k].SLNo;
                row["Name"] = obj[k].Name;
                row["Email"] = obj[k].Email;
                row["PhoneNo"] = obj[k].PhoneNo;
                row["CPHID"] = obj[k].CPHID;
                tabledata.push(row);

                var userdataRow = document.querySelector("#cphverification-datatable > tbody");
                $('#cphverification-datatable> tbody:last-child').append('<tr><td>' + row.SLNo + '</td><td>' + row.Name + '</td><td>' + row.Email + '</td><td>' + row.PhoneNo + '</td><td>' + row.CPHID + '</td></tr>');
            }
            $('#cphverification-datatable').DataTable({
                searching: false,
                paging: true,
                info: false,
                lengthChange: false,
                pageLength: 5,
                bSort: false
            });
            $('.cph-verification-section').addClass('visible', 600);
        }
    },
    error: function (data) {
        console.error(data);
        $('#loading-area').hide();
    }
})

当我试图取消注释@Status/Action@时，数据table无法加载。那么如何在数据 table 行中添加按钮？

任何帮助将不胜感激。
谢谢！

Answer 1

阅读 official Doc here 你可以尝试这样的事情：

取消注释您的 @*<th>Status/Action</th>*@

将columnDefs添加到DataTable:

$('#cphverification-datatable').DataTable({
    searching: false,
    paging: true,
    info: false,
    lengthChange: false,
    pageLength: 5,
    bSort: false,
    columnDefs: [ {
            "targets": -1, // A negative integer - column index counting from the right
            "data": null, // For 'defaultContent' param
            "defaultContent": "<button>Click!</button>" // Your custom HTML
        } ]
});


/* And from official Doc here the event trigger */
$('#cphverification-datatable tbody').on( 'click', 'button', function () {
    var data = table.row( $(this).parents('tr') ).data();
    alert("The Name is: "+ data[ 1 ] );
} );

我显然无法测试它，但从概念上讲我希望它能起作用。

干杯

Answer 2

我唯一不明白的是为什么 <tbody></tbody> 标签中有静态内容，并且在 JS 代码中附加代码可能是错误的，试试这个：

<div class="content-block">
    <!-- Page Container -->
    <div class="section-full content-inner">
        <div class="container">

            <!---data23---->
            <div class="row mb-5">
                <div class="col-md-12">
                    <h4 class="font-weight-700 mb-4">Verification</h4>
                    <hr>
                </div>
            </div>

            <div class="cph-verification-section p-4 mb-5">
                <div class="row justify-content-center">
                    <div class="col-md-10 mt-4">
                        <table id="cphverification-datatable" class="table table-striped table-bordered" style="width:100%">
                            <thead>
                                <tr>
                                    <th>SLNo</th>
                                    <th>Name</th>
                                    <th>Email</th>
                                    <th>Phone number</th>
                                    <th>CPH ID</th>
                                    <th>Status/Action</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

$.ajax({
    url: "GetUserCPHListForVerification",
    method: "post",
    beforeSend: function () {
        $('#loading-area').show();
    },
    success: function (data) {
        $('#loading-area').hide();
        if (data == 'There is no data for this request') {
            swal("Data Not Found", "There is no data with us for this request", "error");
        }
        else {
            var tabledata = [];
            var obj = JSON.parse(data);
            for (var k = 0; k < obj.length; k++) {
                var row = {};
                row["SLNo"] = obj[k].SLNo;
                row["Name"] = obj[k].Name;
                row["Email"] = obj[k].Email;
                row["PhoneNo"] = obj[k].PhoneNo;
                row["CPHID"] = obj[k].CPHID;
                tabledata.push(row);
                //I commented this cause I didn't find where you used it
                //var userdataRow = document.querySelector("#cphverification-datatable > tbody"); 
                
                var code;
                code = '<tbody><tr><td>' + row.SLNo + '</td><td>' + row.Name + '</td><td>' + row.Email + '</td><td>' + row.PhoneNo + '</td><td>' + row.CPHID + '</td>'
                    + '<td class="text-center">'
                    + '<button type="button" class="btn btn-sm btn-success" id="approve_cph"><i class="fa fa-check"></i></button>'
                    + '<button type="button" class="btn btn-sm btn-danger ml-2" id="reject_cph"><i class="fa fa-times"></i></button></td></tr></tbody>';
                $('#cphverification-datatable').append(code);
            }
            $('#cphverification-datatable').DataTable({
                searching: false,
                paging: true,
                info: false,
                lengthChange: false,
                pageLength: 5,
                bSort: false
            });
            $('.cph-verification-section').addClass('visible', 600);
        }
    },
    error: function (data) {
        console.error(data);
        $('#loading-area').hide();
    }
})

据我所知，您似乎在 tr 之后附加了所有代码，您正在静态创建另一个 tr，但是由于您创建的代码列数错误，也许这就是它呈现不佳的原因，请使用浏览器的开发工具也许内容就在那里，这是 html 格式不正确我认为只有 $('#cphverification-datatable').append(code); 应该足够了，选择器中没有更多的东西。

编辑评论中的问题：

为了让您使用 $('#approve_cph').click();听众，这样的元素（'#approve_cph'）必须已经存在。我是说

首先创建元素
其次，您创建侦听器。

但还有另一种解决方案，即 委托事件侦听器 ，JQuery 带来了一种简单的方法。我建议您在文档开头或至少在 ajax 调用之前这样：

我不知道你是否有很多容器-class元素，如果你只有一个你可以给它添加一个id并更具体一些，但别担心我们会做的使用 class 容器

$(".container").on("click", ".btn-success", function (e) {
    //Do something
});

您可以将“.btn-success”更改为“#approve_cph”，如果 div class="container"> 是唯一的，您可以为其添加一个 ID，但这只是一个建议。

前面的代码所做的是，

将事件侦听器附加到具有 class“容器”
检查点击是否发生在具有 class .btn-success

前面的代码非常有用，因为您将侦听器附加到容器，然后如果在 .btn-success 中给出了点击，则该函数将被执行，否则不会。

正如我告诉过你的，你也可以这样做：

$(".container").on("click", "#approve_cph", function (e) {
    //Do something
});

但如果带有 class 容器的元素是唯一的，您可以为其分配一个 id，然后在委托中使用 class。

阅读这篇简短的博客 https://javascript.info/event-delegation，这样您就会明白为什么最好尽可能使用事件委托。

如何在jquery的数据表的每一行添加批准和拒绝按钮？

How to add approve and reject button in each row of datatable in jquery?

html

javascript

jquery

datatables