I need to hide an entire column in my table(see below: id=DrugReturn). I am currently hiding the accountability date header and footer using jquery selectors that reference the class of the accountability date header and footer. However the body of the table is rendered dynamically so there is no way Im aware of to add a class or id to the rows of data in my accountatbility date column. I need to be able to add a selector inorder to hide these column rows. I can access the appropriate column header and footer with jQuery selectors but since the tbody is rendered dynamically (dataset) I don’t know how to target it. Have tried and failed to use the index but I may be getting the logic wrong.
@{
ViewBag.Title = $"Site {YPrimeSession.Instance.SingleSiteAlias} Destruction";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<ul class="breadcrumb">
<li>
@Html.Partial("~/Views/UI/HomeLink.cshtml", new { })
</li>
<li>
@Html.PrimeActionLink($"{YPrimeSession.Instance.SingleSiteAlias} Management", "Index", "Site")
</li>
<li>
@Html.ActionLink(Model.Location.Site.Name, "EditSite", "Site", new { id = Model.Location.Site.Id }, null)
</li>
</ul>
<div class="grid-wrapper">
<h2>@YPrimeSession.Instance.SingleSiteAlias Destruction</h2>
@using (Html.BeginForm("ReturnDrug", "DrugReturn", FormMethod.Post, new { @class = "form-horizontal", id = "DrugReturnForm" }))
{
@Html.HiddenFor(x => x.Location.Site.Name)
@Html.HiddenFor(x => x.Location.Site.Id)
@Html.HiddenFor(x => x.DrugReturnControlId)
if (TempData["ErrorMessage"] != null && !string.IsNullOrEmpty(TempData["ErrorMessage"].ToString()))
{
<div class="alert alert-danger">
@TempData["ErrorMessage"]
</div>
}
<div id="kitStatusUpdates">
<div class="form-group" id="ApplyToAll">
<label class="control-label col-md-4">Apply Status To All Displayed Records</label>
<div class="col-md-4">
<select class="form-control col-md-4 standard" id="ApplyToAllSelect" onchange="ApplyStatusToAll($(this))"></select>
</div>
</div>
<div class="form-group" id="ApplyAttributeToAll" style="display: none">
<label class="control-label col-md-4">Add Attributes To All Displayed Records</label>
</div>
<div class="container-fluid">
<div class="table-responsive">
<table id="DrugReturn" class="table table-striped table-bordered display dataTable" cellspacing="0" width="100%">
<thead>
<tr>
<th>@YPrimeSession.Instance.SingleKitAlias Number</th>
<th>Current Status</th>
<th>@YPrimeSession.Instance.SinglePatientAlias Assigned</th>
<th class="accountability-date-header">Accountability Date</th>
<th>Selected Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th id="kit_number">@YPrimeSession.Instance.SingleKitAlias Number</th>
<th id="current_status">Current Status</th>
<th id="patient_assigned">@YPrimeSession.Instance.SinglePatientAlias Assigned</th>
<th id="accountability_date" class="accountability-date-footer">Accountability Date</th>
<th class="hidesearch" id="selected_status">Selected Status</th>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-5">
<button id="save" type="submit" class="btn btn-primary btn-block panel-default" disabled>
Save <i class="fa fa-check"></i>
</button>
</div>
</div>
</div>
}
</div>
@{
var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
serializer.MaxJsonLength = int.MaxValue;
var data = serializer.Serialize(Model.ReturnableDrugs);
}
<script>
var url = "@Url.Action("GetDrugAvailableForReturn", "DrugReturn")";
var siteId = '@Model.Location.Site.Id';
var drugReturnControlId = '@Model.DrugReturnControlId';
var AvailableStatuses = @Html.Raw(Json.Encode(Model.AvailableStatuses));
var dataSet = @Html.Raw(data);
var tableId = "@ViewBag.DrugReturn" || "DrugReturn";
var table = $('#' + tableId).DataTable();
table.columns().every(function () {
var header = this.header();
var footer = this.footer();
var nodes = this.nodes();
//how to target nodes like I target the header and footer? Data for table is populated dynamically through: var dataSet = Html.Raw(data);
if ($(header).hasClass('accountability-date-header')) {
$(header).hide();
}
if ($(footer).hasClass('accountability-date-footer')) {
$(footer).hide();
}
});
table.columns.adjust().draw();
</script>
<script src="~/Scripts/Views/DrugReturn.js"></script>
<script src="~/Scripts/Views/SIteDestruction.js"></script>
Ive tried using the index position of the table cell but Im not sure I did this correctly. I dont want to alter the data itself if at all possible because this could affect other parts of a large project.