Question

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

这是我的模特：

 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

这是我桌子的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>

这是我的数据表的脚本：

$(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的值，我想隐藏或显示＆＃34;编辑＆＃34; - 和＆＃34;删除＆＃34; - 按钮。

Answer 1

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

CSS：

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

HTML

（在deleteButton元素添加一个editButton和<input>类，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();
        }
    });
});

如何在DataTables中动态隐藏列的值？

1 个答案: