title: How to Apply Pagination for Dynamically Created HTML Table in Asp.net MVC
body: <p>I Have dynamic HTML table in MVC like:</p>
  
  <pre><code>&lt;table id="dt_basic" class="table dataTable"&gt;
        &lt;thead style="text-align: left;"&gt;
              &lt;tr&gt;
                  &lt;th&gt;&lt;i class="fa fa-lg fa-plus-circle"&gt;&lt;/i&gt;&lt;/th&gt;
                  &lt;th style="text-align: left"&gt;Name&lt;/th&gt;
                  &lt;th style="text-align: left"&gt;Resource Type&lt;/th&gt;
                  &lt;th style="text-align: left"&gt;Week Start Date&lt;/th&gt;
                  &lt;th style="text-align: left"&gt;Week End Date&lt;/th&gt;
                  &lt;th style="text-align: left"&gt;Status&lt;/th&gt;
              &lt;/tr&gt;
       &lt;/thead&gt;
       &lt;tbody role="alert" aria-live="polite" aria-relevant="all"&gt;
  
            @foreach (var item in Model.GetContractorNotEnteredDetails)
                {
                  &lt;tr class="trList"&gt;
                     &lt;td class="tdEmpId"&gt;&lt;a class="text-success accordion-toggle ViewTimesheet" data-toggle="collapse" data-target="#demo1" id="view1" rel="@item.CONTR_ID"&gt;&lt;i class="fa fa-lg fa-plus-circle"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
                     &lt;td style="text-align: left"&gt;@Html.TextBoxFor(m =&gt; item.CONTRACTOR_NAME, new { @class = "project-input", @readonly = true, @style = "width:180px;text-align:left" })
                     &lt;td style="text-align: left" class="tdResType"&gt;@Html.TextBoxFor(m =&gt; item.RES_TYPE, new { @class = "project-input", @readonly = true, @style = "text-align:left;" })&lt;/td&gt;
                     &lt;td style="text-align: left" class="tdStartDate"&gt;@Html.TextBoxFor(m =&gt; item.SDate, "{0:MM/dd/yyyy}", new { @class = "project-input startdate", @readonly = true })&lt;/td&gt;
                     &lt;td style="text-align: left" class="tdEndDate"&gt;@Html.TextBoxFor(m =&gt; item.EDate, "{0:MM/dd/yyyy}", new { @class = "project-input enddate", @readonly = true })&lt;/td&gt;
                     &lt;td style="text-align: left" class="tdStatus" title="@Html.DisplayFor(m =&gt; item.DESCR)"&gt;&lt;span class="label-primary" style="color:white"&gt;&amp;nbsp;&amp;nbsp;@Html.DisplayFor(m =&gt; item.EMP_STATUS, new { @readonly = true, @style = "text-align:center;" })&amp;nbsp;&amp;nbsp;&lt;/span&gt;&lt;/td&gt;
  
                     &lt;/tr&gt;
         &lt;/tbody&gt;
         &lt;tfoot&gt;
              &lt;tr&gt;
               &lt;td&gt; &lt;div id="pager" class="pager" style="position: absolute; text-align: center;"&gt;
                    &lt;img src="http://mottie.github.com/tablesorter/addons/pager/icons/first.png" class="first" /&gt;
                    &lt;img src="http://mottie.github.com/tablesorter/addons/pager/icons/prev.png" class="prev" /&gt;
                    &lt;span class="pagedisplay"&gt;&lt;/span&gt;
                    &lt;!-- this can be any element, including an input --&gt;
                    &lt;img rc="http://mottie.github.com/tablesorter/addons/pager/icons/next.png" class="next" /&gt;
                    &lt;img src="http://mottie.github.com/tablesorter/addons/pager/icons/last.png" class="last" /&gt;
                   &lt;select class="pagesize"&gt;
                     &lt;option selected="selected" value="10"&gt;10&lt;/option&gt;
                     &lt;option value="20"&gt;20&lt;/option&gt;
                     &lt;option value="30"&gt;30&lt;/option&gt;
                     &lt;option value="40"&gt;40&lt;/option&gt;
                     &lt;/select&gt;
               &lt;/div&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tfoot&gt;
   &lt;/table&gt;
  </code></pre>
  
  <p>How to apply for pagination at client side either using jQuery or any other.
  I have tried with jQuery "tablesorterPager" like</p>
  
  <pre><code>  &lt;script src="~/Scripts/jquery-2.1.1.js"&gt;&lt;/script&gt;
    &lt;script src="~/Scripts/jquery.tablesorter.js"&gt;&lt;/script&gt;
    &lt;script src="~/Scripts/jquery.tablesorter.pager.js"&gt;&lt;/script&gt;       
  
     &lt;script&gt;
       $(document).ready(function () {           
              $("#dt_basic")
              .tablesorter({ widthFixed: true, widgets: ['zebra'] })
              .tablesorterPager({ container: $("#pager") });
       });
  
     &lt;/script&gt;
  </code></pre>
  
  <p>But it is not Working, is there any alternative for pagingation.
  Please Help me anyone.</p>