2015-01-30 2 views
2

Я новичок в бутстрапе, поэтому надеюсь, что вы сможете мне помочь. Я сделал несколько поисков в Интернете, но я не могу найти решение, которое работает для меня. Я хочу, чтобы отключить сортировку для всех столбцов за исключением двух последних, которые я хочу, чтобы отсортировать в порядке убывания:Отключить сортировку бутстрапа для определенных столбцов

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

ответ

0

Как объяснено в документации от here необходимо отметить, какие столбцы вы не хотите сортироваться с использованием опции заголовков.

В вашем использовании кода:

$('#myTable').tablesorter({ 
    headers: { 
      0: { 
       sorter: false 
      }, 
      1: { 
       sorter: false 
      }, 
      2: { 
       sorter: false 
      } 
     } 
}); 
+0

Хм ... это по-прежнему не работал для меня по какой-то причине :( – JTRookie86

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> 

}