我正在尝试使用jquery和json创建带有分页的表,但无法获取
getJSON
工作方法。javascript函数
GetPageData
在页面加载时调用,并且正在成功调用。我已经测试了在下面的代码中添加两个注释掉的行,并且可以看到
格特森
方法有任何效果。
function GetPageData(pageNum, pageSize) {
$("#tblData").empty();
$("#paged").empty();
// $("#tblData").append('<tr><td>1</td><td>2</td></tr>')
$.getJSON("/Retailers/GetPagedData", { pageNumber: pageNum, pageSize: pageSize }, function (response) {
// $("#tblData").append('<tr><td>1</td><td>2</td></tr>')
var rowData = "";
for (var i = 0; i < response.Data.length; i++) {
rowData = rowData + '<tr><td>' + response.Data[i].Name + '</td><td>' + response.Data[i].RetailerCode + '</td></tr>';
}
rowData = rowData + '<tr><td>Name</td><td>RetailerCode</td></tr>';
$("#tblData").append(rowData);
PagingTemplate(response.TotalPages, response.CurrentPage);
});
下面是index.cshtml视图,位于Retailers文件夹中。
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
@{
ViewBag.Title = "Manage Retailers";
}
<p class="h2">Manage Retailers</p>
<br /><br />
<table class="table table-bordered">
<thead>
<tr>
<th>Retailer Name</th>
<th>Retailer Code</th>
</tr>
</thead>
<tbody id="tblData"></tbody>
</table>
<div id="paged"></div>
下面是零售商管理者…
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using CCM.Models;
using CCM.Helper;
namespace CCM.Controllers
{
public class RetailersController : Controller
{
MCDevEntities context = new MCDevEntities();
public ActionResult Index()
{
return View();
}
public ActionResult GetPagedData(int pageNumber = 1, int pageSize = 20)
{
List<Retailer> listData = context.Retailers.ToList();
var pagedData = Pagination.PagedResult(listData, pageNumber, pageSize);
return Json(pagedData, JsonRequestBehavior.AllowGet);
}
}
}
我是否遗漏了任何明显的可以阻止这项工作的东西?我还有一个包含pageddata.cs和pagination.cs的助手文件夹。页面URL为localhost:…/retailers/index。
编辑。
如果它有帮助的话,下面是其余的javascript:
$(document).ready(function () {
//Initially load pagenumber=1, pagesize=20
GetPageData(1, 20);
});
function PagingTemplate(totalPage, currentPage) {
var template = "";
var TotalPages = totalPage;
var CurrentPage = currentPage;
var PageNumberArray = Array();
var countIncr = 1;
for (var i = currentPage; i <= totalPage; i++) {
PageNumberArray[0] = currentPage;
if (totalPage != currentPage && PageNumberArray[countIncr - 1] != totalPage) {
PageNumberArray[countIncr] = i + 1;
}
countIncr++;
};
PageNumberArray = PageNumberArray.slice(0, 5);
var FirstPage = 1;
var LastPage = totalPage;
if (totalPage != currentPage) {
var ForwardOne = currentPage + 1;
}
var BackwardOne = 1;
if (currentPage > 1) {
BackwardOne = currentPage - 1;
}
template = "<p>" + CurrentPage + " of " + TotalPages + " pages</p>"
template = template + '<ul class="pager">' +
'<li class="previous"><a href="#" onclick="GetPageData(' + FirstPage + ')"><i class="fa fa-fast-backward"></i> First</a></li>' +
'<li><select ng-model="pageSize" id="selectedId"><option value="20" selected>20</option><option value="50">50</option><option value="100">100</option><option value="150">150</option></select> </li>' +
'<li><a href="#" onclick="GetPageData(' + BackwardOne + ')"><i class="glyphicon glyphicon-backward"></i></a>';
var numberingLoop = "";
for (var i = 0; i < PageNumberArray.length; i++) {
numberingLoop = numberingLoop + '<a class="page-number active" onclick="GetPageData(' + PageNumberArray[i] + ')" href="#">' + PageNumberArray[i] + ' </a>'
}
template = template + numberingLoop + '<a href="#" onclick="GetPageData(' + ForwardOne + ')" ><i class="glyphicon glyphicon-forward"></i></a></li>' +
'<li class="next"><a href="#" onclick="GetPageData(' + LastPage + ')">Last <i class="fa fa-fast-forward"></i></a></li></ul>';
$("#paged").append(template);
$('#selectedId').change(function () {
GetPageData(1, $(this).val());
});
}