如何动态隐藏数据表中列的值？

Question

我有这个数据table（版本 1.10.4）在我的数据 table 的其中一列中，我显示了按钮。基于模型中的布尔值，我想隐藏或显示这些按钮。我似乎无法让它工作。谁能帮帮我？

这是我的模型：

 Public Class ArtistDetailDto
        Public Property Id As Integer

        <Required(ErrorMessage:="Name is required.")> _
        Public Property Name As String

        Public Property NumberOfAlbums As Integer

        Public Property Albums As List(Of AlbumDetailDto)

        Public Property CanBeDeletedOrUpdated As Boolean

    End Class

这是我 table 的 HTML:

<table width="100%" class="table table-striped table-bordered" id="artists" cellspacing="0">
    <thead>
        <tr> <th>Name</th> <th>Number Of Albums</th><th>Action</th></tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
        <tr>
            <td>@Html.DisplayFor(modelItem >= item.Name)</td>
            <td>@Html.DisplayFor(modelItem >= item.NumberOfAlbums)</td>
            <td>
                <input type="button" id="albumButton" value="Albums" onclick=" location.href='@Url.Action("Index", "Albums", new {id = item.Id})' " class=" btn btn-default" />
                <input type="button" id="editButton" value="Edit" onclick=" location.href='@Url.Action("Edit", "Artists", new { id = item.Id })' " class=" btn btn-default" />
                <input type="button" id="deleteButton" value="Delete" onclick=" location.href='@Url.Action("Delete", "Artists", new { id = item.Id })' " class=" btn btn-default" />
            </td>
        </tr>
        }
    </tbody>
</table>

这是我的数据脚本table :

$(function () {

//var buttonPlaceholder = $("#buttonPlaceholder").html("<button>Add</button>");

oTable = $("#artists").dataTable({
    "bJQueryUI": true,
    "sPaginationType": "full_numbers",
    "bAutoWidth": false,
    "sDom": '<"top"if>rt<"bottom"<"#buttonPlaceholder">lp><"clear">',
    "aoColumns":
    [
    /* ArtistName */        { "bSortable": true, "bSearchable": true, "width": "50%" },
    /* NumberOfAlbums */    { "bSortable": true, "bSearchable": true, "width": "10%" },
    /* Action */            { "bSortable": false, "bSearchable": false, "width": "10%" }
    ]
});

});

所以根据布尔值 CanBeUpdatedOrDeleted，我想隐藏或显示 "edit"- 和 "delete"- 按钮。

Answer 1

您可以将 CanBeDeletedOrUpdated 的值存储在隐藏的 td 中，在页面加载时捕获宽度 jQuery 并根据此值（0 / 1，真/假？）您可以显示各自的按钮

CSS:

.editButton,
.deleteButton,
.hidden { display:none }

HTML

（在<input>元素处添加classdeleteButton和editButton，id必须唯一）：

        <tr>
            <td class="boolean-tr hidden">@Html.DisplayFor(modelItem >= item.CanBeDeletedOrUpdated)</td>
            <td>@Html.DisplayFor(modelItem >= item.Name)</td>
            <td>@Html.DisplayFor(modelItem >= item.NumberOfAlbums)</td>
            <td>
                <input type="button" id="albumButton" value="Albums" onclick=" location.href='@Url.Action("Index", "Albums", new {id = item.Id})' " class=" btn btn-default albumButton" />
                <input type="button" id="editButton" value="Edit" onclick=" location.href='@Url.Action("Edit", "Artists", new { id = item.Id })' " class=" btn btn-default editButton" />
                <input type="button" id="deleteButton" value="Delete" onclick=" location.href='@Url.Action("Delete", "Artists", new { id = item.Id })' " class=" btn btn-default deleteButton" />
            </td>
        </tr>

jQuery

$(window).load(function() {
    $('tr').each(function() {
        var bool = $(this).find('.boolean-tr').text();
        var editBtn = $(this).find('.editButton');
        var deleteBtn = $(this).find('.deleteButton');
        if (bool == 1) {   // check for bool value
            editBtn.show();  // show the buttons
            deleteBtn.show();
        }
    });
});

如何动态隐藏数据表中列的值？

How to dynamically hide a value for a column in DataTables?

jquery

datatables