ajax无刷新分页脚本之家,jquery.pagination.js 可以通过异步请求服务端在客户端无刷新分页...

图样：

视图页

@{

Layout = null;

}

Index

var pageSize = 10; //每页显示多少条信息

$(function () {

var sum = $("#sum").text();

alert(sum);

// 创建分页

$("#Pagination").pagination(sum, {

num_edge_entries: 1, //边缘页数

num_display_entries:10, //主体页数

callback: paginationCallback, //回调函数

items_per_page: pageSize, //每页显示多少项

prev_text: "前一页",

next_text: "后一页"

});

});

function paginationCallback(page_index, jq) {

$.post("/Home/GetPageList", { "PageIndex": page_index, "pageSize": pageSize }, function (result) {

var str = "";

//result=eval("("+result+")");

//这里的拼接凭个人喜好。可以写Class优化 可以更改标签。

$.each(result, function (index, item) {

str += "

" + (item.Lid) + " " + item.Ltxt + "";

});

$("#List>li").remove();

//每次调用的时候删除所有的子集，然后再添加新的

$("#List").append(str);

})

}

//最好不要放在一个容器里，如果放在一个容器，Pagination这个DIV最好用相对定位到该容器底部

@ViewBag.a

//测试用，取值可以用Input type="hidden" value="" 来取

//原贴有些没写出来

控制器

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using MvcApplication1.Models;

namespace MvcApplication1.Controllers

{

public class HomeController : Controller

{

//

// GET: /Home/

FenYeEntities db = new FenYeEntities();

public ActionResult Index()

{

ViewBag.a = db.LiuYan.ToList().Count; //获得当前行数，在前台用JS取到,这种办法很笨，我是第一次用，有好的办法或者优化的请多指教- -

return View();

}

public ActionResult GetPageList(int pageIndex,int pageSize)

{

var list = db.LiuYan.ToList();

return Json(list.Skip(pageIndex * pageSize).Take(pageSize), JsonRequestBehavior.AllowGet);

//取值 跳过多少行，返回多少行

}

}

}

原贴中有DTO，我这里直接用的EF数据模型，DTO是需要啥就填啥- -需要的请前往查看

数据库 SQL Server

create database FenYe

use FenYe

go

create table LiuYan

(

Lid int identity(1,1) primary key,

LName varchar(20),

LQQ varchar(20),

Ltxt varchar(500)

)

declare @i int

set @i=1

while @i<=30

begin

insert into LiuYan (LName,LQQ,Ltxt) values(concat('测试人员',cast(@i as varchar)),'1979843404','这是第'+cast(@i as varchar)+'条数据')

set @i=@i+1

end

select * from LiuYan

样式可以自行编写，CSS文件写的很清晰。

刚刚看了下没有首页和尾页 功能，然后自己去修改了下JS。话说第一次修改这种脚本好激动。。。虽然改之后感觉自己特别逗。。

在主函数中加字段： Last_text:"Last", next_text:"Next",

因为首页和返回上一页到顶点的显示效果同，所以只需要添加

if (opts.Index_text && (current_page > 0 || opts.prev_show_always)) {

appendItem(0, { text: opts.Index_text, classes: "prev" });

}

同上原因，末尾和下一页的最末相同

if (opts.Last_text && (current_page < np - 1 || opts.next_show_always)) {

appendItem(np, { text: opts.Last_text, classes: "next" });

}

//改了之后前面初始化的时候也可以加上首页，尾页。

暂时无法修改导航栏过长的问题- -默认最长为10个数字显示格加...要是有人进一步优化就好了= =

第二篇博客完成。。。。

有直接需要的留邮箱。。。。