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

来源：互联网发布：淘宝小二客服旺旺编辑：程序博客网时间：2024/06/06 01:58

1、大概思想模型

2、数据库建立

CREATE DATABASE db_testUSE [db_test]GO/****** 对象: Table [dbo].[movie] 脚本日期: 11/21/2010 22:07:57 ******/SET ANSI_NULLS ONGOSET QUOTED_IDENTIFIER ONGOSET ANSI_PADDING ONGOCREATE TABLE [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] NULL CONSTRAINT [DF_movie_time] DEFAULT (getdate())) ON [PRIMARY]GOSET ANSI_PADDING OFF

插入记录

insert into movie values(1,'http://www.emuleblog.com/wp-content/uploads/2007/07/naruto.png','火影忍者',getdate());insert into movie values(2,'http://www.ty520.net/UploadFiles/2010-06/admin/201071162656694.jpg','死神',getdate());insert into movie values(3,'http://op.manmankan.com/UploadFiles_9531/201008/20100826110100666.jpg','海贼王',getdate());insert into movie values(4,'http://img001.photo.21cn.com/photos/album/20080218/o/D800338AE39FBBCB49A5D6FE684C812D.jpg','七龙珠',getdate());insert into movie values(5,'http://www.ahacg.com/pic/200909/4/200994113526431.jpg','千与千寻',getdate());insert into movie values(6,'http://www.6to23.com/uploadfile/pic/uploadpics/200210/200210814132.jpg','全职猎人',getdate());insert into 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> <mce:script src="http://www.cnblogs.com/Scripts/jquery-1.4.3.js" mce_src="http://www.cnblogs.com/Scripts/jquery-1.4.3.js" type="text/javascript"></mce:script>  <link href="http://www.cnblogs.com/Content/Pager.css" mce_href="http://www.cnblogs.com/Content/Pager.css" rel="stylesheet" type="text/css" /> <mce:script src="http://www.cnblogs.com/Scripts/jquery.pager.js" mce_src="http://www.cnblogs.com/Scripts/jquery.pager.js" type="text/javascript"></mce:script>  <mce:style></mce:style><style mce_bogus="1"> li { list-style-type: none; } </style> <mce:script type="text/javascript"></mce:script></head><body> 参考网址:<a href="https://github.com/jonpauldavies/jquery-pager-plugin" mce_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{ public class JqueryPageController : Controller { private int limit = 5; private int 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())); return null; } //记录总数 [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 + "}]"); return null; } }}

5、运行效果：

asp.net mvc 图片1

asp.net mvc 图片2

6、总结

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

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

7、下载相关：

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

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