我是新手,所以我希望你能够帮助我。我在网上做了一些搜索,但我找不到适合我的解决方案。我想禁用所有列的排序,除了我要按降序排序的最后两列:
@model CCQAS.WebApp.Areas.Credentialing.Models.CredCustodyViewModel
@using CCQAS.API.Model
@{Layout = "~/Areas/Credentialing/Views/Shared/_CredLayout.cshtml";
ViewBag.Title = "Custody History";}
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">
@ViewBag.Title
</h3>
</div>
@{if (Model.CredCustodyList.Count > 0)
{
<table class="table table-striped table-bordered" id="myTable">
<thead>
<tr>
<th class="text-center">
UIC
</th>
<th class="text-center">
POC
</th>
<th class="text-center">
@Html.DisplayNameFor(model => model.CredCustodyList[0].DescriptionTxt)
</th>
<th class="text-center">
@Html.DisplayNameFor(model => model.CredCustodyList[0].EffectiveDate)
</th>
<th class="text-center">
@Html.DisplayNameFor(model => model.CredCustodyList[0].EndDateString)
</th>
</tr>
</thead>
@foreach (CredCustody credCustody in Model.CredCustodyList)
{
<tr>
<td>
@credCustody.MTFNameTxt<br />
@credCustody.MTFCity <span> </span>@credCustody.UIC
</td>
<td>
@credCustody.PublicAffairsCoorTxt <br />
<span>Phone: </span> @credCustody.MTFCommPhoneTxt <br />
<span>DSN: </span> @credCustody.MTFDSNPhoneTxt <br />
<span>Fax: </span> @credCustody.MTFFaxPhoneTxt <br />
<span>Email: </span> @credCustody.MTFEmailTxt
</td>
<td>
@credCustody.DescriptionTxt
</td>
<td>
@credCustody.EffectiveDateString
</td>
<td>
@credCustody.EndDateString
</td>
</tr>
}
</table>
}
else
{
<p>
<h3 class="text-center">No Records Found</h3>
</p>
}
}
</div>
</div>
</div>
@section scripts{
<script>
$(document).ready(function () {
initializeDataTableNoPaging();
@*Disables all columns from sorting except for the last two: Effective Date and End Date*@
$('#myTable').tablesorter({
"aoColumns": [
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false },
null,
null
]
});
});
</script>
}
答案 0 :(得分:0)
正如here文档中所述,您需要使用标题选项标记您不希望对哪些列进行排序。
在您的代码中使用:
$('#myTable').tablesorter({
headers: {
0: {
sorter: false
},
1: {
sorter: false
},
2: {
sorter: false
}
}
});
答案 1 :(得分:0)
我找到了解决方案。我要做的第一件事是给我的标题命名:
<table class="table table-striped table-bordered">
<thead>
<tr>
<th class="text-center">
UIC
</th>
<th class="text-center" id="POC_header">
POC
</th>
<th class="text-center" id="Desc_header">
@Html.DisplayNameFor(model => model.CredCustodyList[0].DescriptionTxt)
</th>
<th class="text-center" id="Effective_header">
@Html.DisplayNameFor(model => model.CredCustodyList[0].EffectiveDate)
</th>
<th class="text-center">
@Html.DisplayNameFor(model => model.CredCustodyList[0].EndDateString)
</th>
</tr>
</thead>
其次,我添加了此代码以禁用排序:
@section scripts{
<script>
$(document).ready(function () {
initializeDataTableNoPaging();
@*Disables all columns from sorting except for the last two: Effective Date and End Date*@
$("#POC_header").off('click'); //disables click event
$("#POC_header").addClass("sorting_disabled");
$("#POC_header").removeClass("sorting_asc");
$("#Desc_header").off('click'); //disables click event
$("#Desc_header").addClass("sorting_disabled");
$("#Desc_header").removeClass("sorting"); //needed to remove the sorting class to get rid of the sorting arrows on header
$("#Desc_header").removeClass("sorting_asc");
$("#Effective_header").addClass("sorting_desc");
$("#Effective_header").removeClass("sorting_asc"); //Sorts effective date in descending order
});
</script>
}