ASP.net MVC使用Jquery-pager和Newtonsoft.Json进行分页

2010-11-21 22:45 夜雨瞳阅读(1392) 评论(1) 编辑收藏举报

1、大概思想模型

2、数据库建立

代码

CREATEDATABASE db_test
USE[db_test]
GO
/****** 对象: Table [dbo].[movie] 脚本日期: 11/21/2010 22:07:57 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
SET ANSI_PADDING ON
GO
CREATETABLE[dbo].[movie](
[id][int]NULL,
[image][varchar](100) COLLATE Chinese_PRC_CI_AS NULL,
[title][varchar](50) COLLATE Chinese_PRC_CI_AS NULL,
[time][datetime]NULLCONSTRAINT[DF_movie_time]DEFAULT (getdate())
) ON[PRIMARY]

GO
SET ANSI_PADDING OFF

插入记录

代码

insertinto movie values(1,'http://www.emuleblog.com/wp-content/uploads/2007/07/naruto.png','火影忍者',getdate());
insertinto movie values(2,'http://www.ty520.net/UploadFiles/2010-06/admin/201071162656694.jpg','死神',getdate());
insertinto movie values(3,'http://op.manmankan.com/UploadFiles_9531/201008/20100826110100666.jpg','海贼王',getdate());
insertinto movie values(4,'http://img001.photo.21cn.com/photos/album/20080218/o/D800338AE39FBBCB49A5D6FE684C812D.jpg','七龙珠',getdate());
insertinto movie values(5,'http://www.ahacg.com/pic/200909/4/200994113526431.jpg','千与千寻',getdate());
insertinto movie values(6,'http://www.6to23.com/uploadfile/pic/uploadpics/200210/200210814132.jpg','全职猎人',getdate());
insertinto movie values(7,'http://i3.sinaimg.cn/ent/v/m/2007-12-06/U1735P28T3D1823317F326DT20071206171248.JPG','飞轮少年',getdate());

3、前台Views

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>JqueryPage</title>

<script src="http://www.cnblogs.com/Scripts/jquery-1.4.3.js" type="text/javascript"></script>


<link href="http://www.cnblogs.com/Content/Pager.css" rel="stylesheet" type="text/css"/>

<script src="http://www.cnblogs.com/Scripts/jquery.pager.js" type="text/javascript"></script>


<style>
li
{
list-style-type: none;
}
</style>

<script type="text/javascript">
//处理时间
function deleteString(mainStr) {
raRegExp =new RegExp("[^\\d]", "g");
mainStr = mainStr.replace(raRegExp, "");
return mainStr.substr(0, mainStr.length -4);
}
//获取数据
function GetListData(pageclickednumber) {
$.post('li', {
pagenumber: pageclickednumber
}, function(data) {
$('#page ul li').remove(); //去除子节点
data = eval(data);
$.each(data, function(i) {
var d =new Date(Number(deleteString(data[i].time)));
data[i].time = d.toLocaleDateString() + d.toLocaleTimeString();
$('#page ul').append(
"<li><image src='"+ data[i].image +"' width='200' height='100'></image>"+
"<a href='"+ data[i].image +"'><font size='5'>"+ data[i].title +"</font></a>"+
data[i].time +"</li>"
);
});
}, "json"
);
};
//分页显示
$.ajax({
url: 'count',
contentType: "application/json; charset=utf-8",
cache: false,
success: function(data, textStatus) {
data = eval(data);
//创建一个函数,其中pagedata[0].count是后台可以分到的页数
PageClick =function(pageclickednumber) {
$("#pager").pager({ pagenumber: pageclickednumber, pagecount: data[0].count, buttonClickCallback: PageClick });
GetListData(pageclickednumber);
};
//创建分页工具栏,其中pagedata[0].count是后台可以分到的页数
$("#pager").pager({ pagenumber: 1, pagecount: data[0].count, buttonClickCallback: PageClick });

},
timeout: 5000,
error: function(data, textStatus) { alert(textStatus); }
})
$(document).ready(function() {

GetListData(1);
});
</script>

</head>
<body>
参考网址:<a href="https://github.com/jonpauldavies/jquery-pager-plugin">https://github.com/jonpauldavies/jquery-pager-plugin</a>
<div id="page">
<ul>
</ul>
</div>
<div id="pager">
</div>
</body>
</html>

4、后台Control

代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
//添加引用
using Newtonsoft.Json;
using Newtonsoft.Json.Converters;

using System.Data;
namespace JqueryPage.Controllers
{
publicclass JqueryPageController : Controller
{
privateint limit =5;
privateint pagecount;
public ActionResult JqueryPage()
{
return View();
}
//后台数据库分页
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult li()
{
//取数据
int pagenumber =int.Parse(Request["pagenumber"].ToString());
Response.ContentType ="text/plain";
int a = limit * (pagenumber -1);

string sql ="SELECT TOP "+ limit +" * "+
"FROM movie "+
"WHERE (id NOT IN "+
"(SELECT TOP "+ a +" id "+
"FROM movie "+
"ORDER BY time desc)) "+
"ORDER BY time desc";
DataTable tb = DB.DBHelper.GetDataSet(sql);
Response.Write(JsonConvert.SerializeObject(tb, new DataTableConverter()));
returnnull;
}

//记录总数
[AcceptVerbs(HttpVerbs.Get)]
public ActionResult count()
{
Response.ContentType ="text/plain";
string sql ="select count(id) as count from movie";
DataTable tb=DB.DBHelper.GetDataSet(sql);
pagecount =int.Parse(tb.Rows[0][0].ToString());
if (pagecount % limit ==0)
{
pagecount = pagecount / limit;
}
else
{
pagecount = pagecount / limit +1;
}
Response.Write("[{count:"+ pagecount +"}]");
returnnull;
}
}
}