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

Question

I have this datatable (version 1.10.4) In one of the columns in my datatable I display buttons. Based on a boolean in my model, I want to hide or show those buttons. I can't seem to get it working. Can ayone help me?

This is my model:

 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

This is the HTML for my table:

<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>

And this is the script for my datatable :

$(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%" }
    ]
});

});

So based on the value of the boolean CanBeUpdatedOrDeleted, I want to hide or show the "edit"- and "delete"-button.

What I try to do is based on the value of the boolean CanBeUpdatedOrDeleted, I want to hide or display the edit- and delete-button. The Albums-button should always be displayed. I don't want to hide the entire row, only the two buttons. — Bart Schelkens
– Bart Schelkens, Commented Jan 16, 2015 at 7:10
I'm having other problems at the moment. So I need to fix them first before I can continue with this problem. — Bart Schelkens
– Bart Schelkens, Commented Jan 16, 2015 at 9:39

kapantzak · Accepted Answer · 2015-01-16 07:29:22Z

1

You can store the value of CanBeDeletedOrUpdated in a hidden td, catch in width jQuery on page load and depending on this value (0 / 1, true / false?) you can show the respective buttons

CSS:

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

HTML

(Add a class deleteButton and editButton at the <input> elements, id's must be unique):

        <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();
        }
    });
});

edited Jan 16, 2015 at 7:29

answered Jan 16, 2015 at 7:07

kapantzak

11.8k5 gold badges42 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

vcanales Over a year ago

Instead of hidden td i'd use a data field, just for the sake of using elements how they're supposed to.

Bart Schelkens Over a year ago

How would you do that using a data field?

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related