禁用某些列的引导排序

时间:2015-01-30 19:01:04

标签: asp.net-mvc twitter-bootstrap sorting

我是新手,所以我希望你能够帮助我。我在网上做了一些搜索,但我找不到适合我的解决方案。我想禁用所有列的排序,除了我要按降序排序的最后两列:

@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>&nbsp;&nbsp;</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>
}

2 个答案:

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

}