jquery.pagination.js 可以通过异步请求服务端在客户端无刷新分页

最新推荐文章于 2024-07-20 23:54:17 发布

chunpeivu421066

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量153

点赞数

文章标签： javascript 数据库测试 ViewUI

原文链接：https://my.oschina.net/robotit/blog/689437

版权

图样：

视图页

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Scripts/pagination_zh/lib/pagination.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.7.1.min.js"></script>
<script src="~/Scripts/pagination_zh/lib/jquery.pagination.js"></script>
</head>

<body>
<script type="text/javascript">

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 += "<li><span>" + (item.Lid) + "</span><span>" + item.Ltxt + "</span></li>";
});
$("#List>li").remove();

//每次调用的时候删除所有的子集，然后再添加新的
$("#List").append(str);
})
}
</script>

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

</ul>
</div>
<div id="Pagination" class="meneame"></div>
<div>
<span id="sum">@ViewBag.a</span>

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

//原贴有些没写出来
</div>
</body>
</html>

控制器

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是需要啥就填啥- -需要的请前往查看

http://www.cnblogs.com/madyina/articles/4019211.html

数据库 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

不知道怎么上传文件- -，JS文件可以在网上有下到，样式美化请到http://www.cnblogs.com/knowledgesea/archive/2013/01/03/2841554.html

样式可以自行编写，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个数字显示格加...要是有人进一步优化就好了= =

第二篇博客完成。。。。

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

转载于:https://my.oschina.net/robotit/blog/689437

chunpeivu421066

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery.pagination.js 可以通过异步请求服务端在客户端无刷新分页

图样：视图页 @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" ...
复制链接

扫一扫