如何在Asp.net MVC应用分页动态创建的HTML表

Question

我有动态HTML表MVC这样的：

<table id="dt_basic" class="table dataTable"> 
     <thead style="text-align: left;"> 
      <tr> 
       <th><i class="fa fa-lg fa-plus-circle"></i></th> 
       <th style="text-align: left">Name</th> 
       <th style="text-align: left">Resource Type</th> 
       <th style="text-align: left">Week Start Date</th> 
       <th style="text-align: left">Week End Date</th> 
       <th style="text-align: left">Status</th> 
      </tr> 
    </thead> 
    <tbody role="alert" aria-live="polite" aria-relevant="all"> 

      @foreach (var item in Model.GetContractorNotEnteredDetails) 
       { 
       <tr class="trList"> 
        <td class="tdEmpId"><a class="text-success accordion-toggle ViewTimesheet" data-toggle="collapse" data-target="#demo1" id="view1" rel="@item.CONTR_ID"><i class="fa fa-lg fa-plus-circle"></i></a></td> 
        <td style="text-align: left">@Html.TextBoxFor(m => item.CONTRACTOR_NAME, new { @class = "project-input", @readonly = true, @style = "width:180px;text-align:left" }) 
        <td style="text-align: left" class="tdResType">@Html.TextBoxFor(m => item.RES_TYPE, new { @class = "project-input", @readonly = true, @style = "text-align:left;" })</td> 
        <td style="text-align: left" class="tdStartDate">@Html.TextBoxFor(m => item.SDate, "{0:MM/dd/yyyy}", new { @class = "project-input startdate", @readonly = true })</td> 
        <td style="text-align: left" class="tdEndDate">@Html.TextBoxFor(m => item.EDate, "{0:MM/dd/yyyy}", new { @class = "project-input enddate", @readonly = true })</td> 
        <td style="text-align: left" class="tdStatus" title="@Html.DisplayFor(m => item.DESCR)"><span class="label-primary" style="color:white">&nbsp;&nbsp;@Html.DisplayFor(m => item.EMP_STATUS, new { @readonly = true, @style = "text-align:center;" })&nbsp;&nbsp;</span></td> 

        </tr> 
     </tbody> 
     <tfoot> 
      <tr> 
      <td> <div id="pager" class="pager" style="position: absolute; text-align: center;"> 
        <img src="http://mottie.github.com/tablesorter/addons/pager/icons/first.png" class="first" /> 
        <img src="http://mottie.github.com/tablesorter/addons/pager/icons/prev.png" class="prev" /> 
        <span class="pagedisplay"></span> 
        <!-- this can be any element, including an input --> 
        <img rc="http://mottie.github.com/tablesorter/addons/pager/icons/next.png" class="next" /> 
        <img src="http://mottie.github.com/tablesorter/addons/pager/icons/last.png" class="last" /> 
       <select class="pagesize"> 
        <option selected="selected" value="10">10</option> 
        <option value="20">20</option> 
        <option value="30">30</option> 
        <option value="40">40</option> 
        </select> 
      </div> 
      </td> 
     </tr> 
    </tfoot> 
</table> 

如何在客户端两种使用jQuery或任何其他的分页适用。 我与jQuery的“tablesorterPager”试图像

<script src="~/Scripts/jquery-2.1.1.js"></script> 
    <script src="~/Scripts/jquery.tablesorter.js"></script> 
    <script src="~/Scripts/jquery.tablesorter.pager.js"></script>  

    <script> 
    $(document).ready(function() {   
      $("#dt_basic") 
      .tablesorter({ widthFixed: true, widgets: ['zebra'] }) 
      .tablesorterPager({ container: $("#pager") }); 
    }); 

    </script> 

但它不是工作，是有pagingation任何替代。 请帮助我的人。

Answer 1

您可以使用'DataTables'jQuery插件，它是开源的，并且具有良好的API支持。

您需要包括jQuery和DataTable的插件是这样的：

<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script> 

<script type="text/javascript" src="jquery.dataTables.js"></script> 

，并呼吁所需表格的dataTable：

$(document).ready(function() {   
      $("#dt_basic") 
      .dataTable({ 
       "bPaginate": true, 
       "bLengthChange": true, 
       "bFilter": true}); 
     }); 

你可以做很多usind确定年代像过滤，排序，分页，搜索等。

DataTable官方网站 - DataTable