在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
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 |
请发表评论