带分页的数据表，通过按指定行中的按钮获取行数据，仅在第一页工作

Question

我有一个包含 n 行和 5 个可见列的数据表，其中一列作为下拉按钮，导致 2 个按钮，一个用于下载，另一个用于重新提交文件。 我正在使用分页，问题是这个按钮只能在第一页中工作，当我单击这些按钮中的任何一个时，其他页面甚至不运行代码。 你们能帮我解决这些吗？？

这是我的数据表代码：

var table;
$(document).ready(function () {
        table = $('#dataTable').DataTable({
            responsive: true,                
            columns: [
                { visible: false },
                null,
                null,
                null,
                { type: "date" },
                {
                    "render": function () {
                        return '<span class="dropdown"><button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Actions</button><div class="dropdown-menu"><input type="button" name="DownloadFile" class="dropdown-item" value="Download"><input type="button" name="ResubmitFile" class="dropdown-item" href="" value="Resubmit"></div></span>'
                    }
                }
            ],
            order: [[4, "desc"]]
        });

        $("input[name='DownloadFile']").on("click", function (el) {
            var id = $(this).closest("tr").attr("id");                                            
            window.open("/DataManagement/DownloadFile/" + id);             
        });

        $("input[name='ResubmitFile']").on("click", function (el) {
            var uploadId = $(this).closest("tr").attr("id");
            var req = $.get("/DataManagement/ResubmitFileToProject", { UploadId: uploadId });
            req.done(function (res) {                                     
                TreatSubmissionResult(null, null, res);
            });
        });

    });

Answer 1

发生的事情是，在文档准备好时（一旦您加载了页面），这些事件将绑定到 DOM 中存在的元素。 DOM 在第 2、3、... 和 n 页面上还没有按钮，因为这些元素仅在您导航到它们的特定页面时创建。

您想要做的是，使用.on()将事件绑定到父元素。

使用下面的脚本，我将事件附加到存储在var table然后添加目标元素作为参数；

var table;
$(document).ready(function () {
        table = $('#dataTable').DataTable({
            responsive: true,                
            columns: [
                { visible: false },
                null,
                null,
                null,
                { type: "date" },
                {
                    "render": function () {
                        return '<span class="dropdown"><button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Actions</button><div class="dropdown-menu"><input type="button" name="DownloadFile" class="dropdown-item" value="Download"><input type="button" name="ResubmitFile" class="dropdown-item" href="" value="Resubmit"></div></span>'
                    }
                }
            ],
            order: [[4, "desc"]]
        });

        $("#dataTable").on("click", "input[name='DownloadFile']", function (el) {
            var id = $(this).closest("tr").attr("id");                                            
            window.open("/DataManagement/DownloadFile/" + id);             
        });

        $("#dataTable").on("click", "input[name='ResubmitFile']", function (el) {
            var uploadId = $(this).closest("tr").attr("id");
            var req = $.get("/DataManagement/ResubmitFileToProject", { UploadId: uploadId });
            req.done(function (res) {                                     
                TreatSubmissionResult(null, null, res);
            });
        });

    });