Question

我的页面上有一个带有隐藏第一列的datatables元素，末尾有一个空列，用于包含一个按钮。

我正在尝试将该按钮的点击事件发送到：

隐藏按钮，
在列
检索对应行
显示成功/失败图标 - 要添加，但将是一个fontawesome图标

CSHTML：

<div class="row">
    <div class="col-sm-12">
        <table class="table table-striped table-hover" id="SignOffTable">
            <thead>
                <tr>
                    <th>DATA_ID</th>
                    <th>KPI Name</th>
                    <th>Value 1</th>
                    <th>Value 2</th>
                    <th>Value 3</th>
                    <th>Date For</th>
                    <th>Value Type</th>
                    <th>Added By</th>
                    <th>Added On</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.Items)
            {
                    <tr>
                        <td>
                            @item.DATAID
                        </td>
                        <td>
                            @item.KPIHead
                        </td>
                        <td>
                            @item.Value1
                        </td>
                        <td>
                            @item.Value2
                        </td>
                        <td>
                            @item.Value3
                        </td>
                        <td>
                            @item.FromDate.ToString("dd/MM/yyyy")
                        </td>
                        <td>
                            @item.Type
                        </td>
                        <td>
                            @item.AddedBy
                        </td>
                        <td>
                            @item.AddedOn.ToString("dd/MM/yyyy")
                        </td>
                        <td id="ActionCol">
                            <button id="TableSignOff" class="btn btn-outline-success btn-sm" data-interaction="@item.DATAID">Sign Off</button>
                            <div id="Loader"><span id="Loading" class="fa fa-spinner fa-pulse fa-fw"></span></div>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

脚本：

<script>
    $(document).ready(function () {
        $("div#Loader").hide();

        var table = $('#SignOffTable').DataTable({
            paging: true,
            searching: false,
            ordering: false,
            pagingType: "simple_numbers",
            lengthChange: false,
            bfilter: true,
            info: true,
            "columnDefs": [
            { "visible": false, "targets": 0 }
            ]
        });
    });

    $("#SignOffTable button").click(function () {
        $(this).hide();
        $('div#Loader').show();
        var trElem = $(this).closest("tr");
        var firstTd = $(trElem).children("td")[0];
        alert($(firstTd).text())
    })
</script>

但是我似乎无法访问隐藏列的数据，或者成功隐藏按钮/显示加载微调器。在页面加载时隐藏微调器图标，按钮单击将隐藏该按钮，但随后将显示列中的所有微调器，而不是仅显示该特定的微调器。

Answer 1

您正在为元素创建重复的ID。这是无效的HTML，会导致您的代码对其尝试访问的元素感到困惑。

更像这样的东西应该有所帮助，使用类而不是ID：

<td>
  <button class="TableSignOff btn btn-outline-success btn-sm" data-interaction="@item.DATAID">Sign Off</button>
  <div class="Loader" hidden>
    <span class="fa fa-spinner fa-pulse fa-fw" ></span>
  </div>
</td>

和

<script>
$(document).ready(function () {

    var table = $('#SignOffTable').DataTable({
        paging: true,
        searching: false,
        ordering: false,
        pagingType: "simple_numbers",
        lengthChange: false,
        bfilter: true,
        info: true,
        "columnDefs": [
        { "visible": false, "targets": 0 }
        ]
    });
});

$("#SignOffTable .TableSignOff").click(function () {
    var btn = $(this);
    btn.hide(); //hide the button
    btn.parent().find(".Loader").show(); //show the loader within the button's parent td
    alert(btn.data("interaction")); //output the DATAID
})

另请注意，加载器在开始时会被标记而不是代码隐藏，因此在代码运行之前，您不会显示加载器的瞬间显示。

单击表格中的动态按钮上的事件

1 个答案: