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
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());
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>
<!--jquery分页插件-->
<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>
<!--li的一点-->
<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>
<!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>
<!--jquery分页插件-->
<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>
<!--li的一点-->
<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;
}
}
}
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;
}
}
}
5、运行效果
6、总结
网上提供了相应的将datatable类型进行序列化。相关网址：http://james.newtonking.com/pages/json-net.aspx
Jquery功能强大，可以制作出一些想要的效果，也提供了不少插件。
7、下载相关：
NewtonSoft.Json下载：https://files.cnblogs.com/yongfeng/Newtonsoft.Json.rar
