自己写了个采用asp.net mvc框架的Demo,分页功能采用的是jQuery+Ajax实现的无刷新分页。
解决方案思想:页面数据的初始加载和按页加载都是通过ajax来进行,页面分页链接点击后利用ajax技术发送当前页码到后端控制器,后端控制器根据当前页码和设置的pageSize从数据库中取出对应页的数据。后端控制器处理完后利用PartialView方法把数据返回到分部视图中,利用ViewBag来返回当前页码和总记录数和pageSize。ajax通过回调函数把控制器返回的视图加到页面中。
说明:分页具体的分页导航和样式使用了插件。
控制器代码
using _116.Models;视图代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace _116.Controllers
{
public class HomeController : Controller
{
private DataContext db = new DataContext();
private readonly int pageSize = 3;
//
// GET: /Home/
public ActionResult Index()
{
ViewBag.PageSize = pageSize;
ViewBag.TotalCount = db.Articles.Count();
return View();
}
/// <summary>
/// 文章列表,ajax分页
/// </summary>
/// <param name="pageIndex"></param>
/// <returns></returns>
public ActionResult AjaxPaging(int pageIndex = 1)
{
IQueryable<ArticleModels> articles = db.Articles.OrderByDescending(a => a.ObjectID).Skip((pageIndex - 1) * pageSize).Take(pageSize);
ViewBag.PageIndex = pageIndex;
return PartialView("IndexArticleList", articles);
}
}
}
<!--文章列表--> <section id="articleList" class="posts block"></section><!--分页--> <script src="~/common/scripts/kkpager.js"></script> <link href="~/common/pluginCss/kkpager.css" rel="stylesheet" /> <nav id="kkpager" class="posts block pagination"></nav> <!--分页-->
分部视图代码
@model IEnumerable<_116.Models.ArticleModels>Ajax代码
@foreach (var item in Model)
{
<article class="post block">
<!--标题-->
<h2 class="h2">
<small><a href="/Article/Details/@item.ObjectID">@Html.DisplayFor(modelItem => item.ObjectTitle)</a></small>
</h2>
<!--发表时间-->
<div class="meta">
<time>@item.CreateTime.ToString("yyyy-MM-dd")</time>
<i class="glyphicon glyphicon-eye-open eye"></i>
<span>(@item.VisitedCount)</span>
</div>
<!--摘要-->
<div class="content">
<p>@Html.DisplayFor(modelItem => item.ObjectSummary)</p>
</div>
<!--详细内容链接-->
<div class="readMore"><a href="/Article/Details/@item.ObjectID">[继续阅读]</a></div>
</article>
}
<!--分页参数-->
<input id="pageIndex" type="hidden" value="@ViewBag.PageIndex" />
<script type="text/javascript">
$(function ()
{
//初始加载文章列表数据
GetArticlesData(1);
});
//ajax获取文章列表并分页
function GetArticlesData(pageIndex)
{
var ajaxUrl = '/Home/AjaxPaging?pageIndex=' + pageIndex;
var ajaxType = 'post';
var ajaxDataType = 'text';
var sucFun = function (data, status)
{
if (data == null && status != "success")
{
alert("获取数据失败!");
return false;
}
else
{
$("#articleList").html(data);
//移除列表最后一项的底部阴影
$("#articleList").find("article").last().removeClass("block");
//分页
var totalCount = parseInt('@ViewBag.TotalCount');
var pageSize = parseInt('@ViewBag.PageSize');
var totalPages = totalCount % pageSize == 0 ? totalCount / pageSize : (parseInt(totalCount / pageSize) + 1);
pagecutforsearch(totalPages, totalCount, $("#pageIndex").val());
}
};
//ajax参数设置
var Option =
{
url: ajaxUrl,
type: ajaxType,
dataType: ajaxDataType,
cache: false, //设置为 false 将不会从浏览器缓存中加载请求信息。
async: true, //(默认: true),所有请求均为异步请求。发送同步请求,请将此选项设置为 false。同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
timeout: 3600, //设置请求超时时间(毫秒)。此设置将覆盖全局设置。
error: function () { },
success: sucFun,
beforeSend: function () { }
};
$.ajax(Option);
return false;
}
//ajax翻页
function searchPage(n)
{
GetArticlesData(n);
}
</script>