在我的ASP.Net MVC3 RAZOR项目中，我必须实现表来获取员工数据。我正在使用Bootstrap CSS模板。我的问题是我如何实现分页。我之前尝试过JQgrid，它不适用于我，因为我的模板中的Jquery与Jqgrid jquery冲突。现在我在模板中使用基本表来显示数据。我需要实现分页
我的表格视图
<h2>ViewEmployeeData</h2>
<div class="main-container">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="box-widget">
<table class="table data-tbl-boxy responsive">
<thead>
<tr>
<th>
First Name
</th>
<th>
Middle Name
</th>
<th>
Last Name
</th>
<th>
Age
</th>
<th>
Date of Birth
</th>
<th>
Address
</th>
<th>
Position
</th>
<th>
Department
</th>
<th>
Date of Joining
</th>
<th>
Educational Qualifications
</th>
<th>
Experience
</th>
<th>
Others
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model) {
<tr>
<td>
@item.FirstName
</td>
<td>
@item.MiddleName
</td>
<td>
@item.LastName
</td>
<td>
@item.Age
</td>
<td>
@String.Format("{0:d/M/yyyy}", item.DateOfBirth)
</td>
<td>
@item.Address
</td>
<td>
@item.Position
</td>
<td>
@item.Department
</td>
<td>
@String.Format("{0:d/M/yyyy}", item.DateOfJoining)
</td>
<td>
@item.EducationalQuali
</td>
<td>
@item.Experience
</td>
<td>
@item.Others
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.EmpId }) |
@Html.ActionLink("Details", "Details", new { id=item.EmpId }) |
@Html.ActionLink("Delete", "Delete", new { id=item.EmpId })
</td>
</tr>
}
</table>
</div>
</div>
</div>
<div class="table-bottom clearfix"><div class="tbl-pagination pull-left"><div class="dataTables_paginate paging_bootstrap"><ul class="pagination"><li class="prev disabled"><a href="#">← Previous</a></li><li class="active"><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li class="next"><a href="#">Next → </a></li></ul></div></div><div class="tbl-data-info pull-right"><div class="dataTables_info" id="DataTables_Table_0_info">Showing 1 to 10 of 43 entries</div></div></div>
</div>
</div>
</div>
</div>
</div>
我的控制器代码
[HttpGet]
public ActionResult ViewEmployeeData()
{
var data = Emp.EmpData.ToList();
return View(data.ToList());
}