• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 

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>

<!--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;
}
}
}

5、运行效果

 

6、总结

网上提供了相应的将datatable类型进行序列化。相关网址:http://james.newtonking.com/pages/json-net.aspx

Jquery功能强大,可以制作出一些想要的效果,也提供了不少插件。

 

7、下载相关:

NewtonSoft.Json下载:https://files.cnblogs.com/yongfeng/Newtonsoft.Json.rar

源代码下载:https://files.cnblogs.com/yongfeng/JqueryPage.rar


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
asp.net mvc中ckeditor+ckfinder的配置方法(1)发布时间:2022-07-10
下一篇:
asp.net中的并发控制发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap