[英]jQuery “tablesorterPager” is not Working in Asp.net MVC
I Have dynamic HTML table in MVC like: 我在MVC中有动态HTML表,例如:
<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"> @Html.DisplayFor(m => item.EMP_STATUS, new { @readonly = true, @style = "text-align:center;" }) </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>
to apply sorting and paging i have referenced 应用我引用的排序和分页
<script src="~/Scripts/jquery-2.1.1.js"></script>
<script src="~/Scripts/jquery.tablesorter.js"></script>
<script src="~/Scripts/jquery.tablesorter.pager.js"></script>
and applied script like in my view 并在我看来应用了脚本
<script>
$(document).ready(function () {
$("#dt_basic")
.tablesorter({ widthFixed: true, widgets: ['zebra'] })
.tablesorterPager({ container: $("#pager") });
});
</script>
and to implement paging and sorting to "dt_basic" table , for that i have written above code,but is Not working I mean it is not showing sorting and paging, is there any thing else to do.? 并实现对“ dt_basic”表的分页和排序,因为我已经在上面的代码中编写了代码,但是没有用,我的意思是它没有显示排序和分页,还有其他事情要做吗?
I got it working!! 我知道了!! Regret about not posting the answer here.
很遗憾没有在此处发布答案。 My script looks like this
我的脚本看起来像这样
//this could have been bundled
<link href="~/Content/themes/blue/style.css" rel="stylesheet" />
@section scripts{
@Scripts.Render("~/bundles/tablesorter")
<script type="text/javascript">
$(document).ready(function() {
$(".tablesorter").tablesorter({
headers: {
8: {
sorter: false //this is to disable the edit/delete header non sortable
}
}
});
if ($("#table1").find("tbody").find("tr").size() > 0) {
$("#table1").tablesorterPager({ container: $("#pager1") });
}
});
</script>
}
the following is the table and pager 以下是表格和寻呼机
<div>
<table class="tablesorter" id="table1">
<thead>
<tr>
<th>
....
</th>
</tr>
</thead>
<tbody>
@foreach ()
{
<tr>
<td>
.....
</td>
</tr>
}
</tbody>
</table>
<div id="pager1" class="pager">
<form>
<img src="~/pager/first.png" class="first" />
<img src="~/pager/prev.png" class="prev" />
<input type="text" class="pagedisplay" />
<img src="~/pager/next.png" class="next" />
<img src="~/pager/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>
</form>
</div>
</div>
My bundle config 我的捆绑包配置
bundles.Add(new ScriptBundle("~/bundles/tablesorter").Include(
"~/Scripts/jquery.tablesorter.js",
"~/Scripts/jquery.tablesorter.pager.js"));
I am using jquery verions 1.8.2 我正在使用jquery版本1.8.2
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.