前台代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="JqPaginator.Index" %> <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JPagination分页插件demo</title> <link href="CSS/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="CSS/style.css" rel="stylesheet" />/*这是插件的的样式*/ <script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>/*引用jquery脚本*/ <script src="Scripts/jquery.paginate.js" type="text/javascript"></script>/*引用插件*/ <script src="Scripts/bootstrap.min.js" type="text/javascript"></script> </head> <body> <h1> JPagination分页插件demo</h1> <table id="TB" class="table table-bordered table-striped table-hover"> <tr id="TR"> <th> 行号 </th> <th> SOP名字 </th> <th> 操作人 </th> <th> 操作时间 </th> </tr> </table> <div id="paginator"> </div> <input type="hidden" name="name" value="" id="input_getCount" /> <script type="text/javascript"> $(function () { getData(1); //初次运行，需要把第一页的数据放到页面显示，第一次加载完脚本之后，不会自动执行插件的onChange方法，所以需要认为的加载一次数据 $("#paginator").paginate({ count: getCount(),//getCount方法可以获取到数据的总页数 start: 1, display: 7, border: true, border_color: '#fff', text_color: '#fff', background_color: 'black', border_hover_color: '#ccc', text_hover_color: '#000', background_hover_color: '#fff', images: false, mouse: 'press', onChange: function (page) { getData(page); } }); }); function getCount() { var count = ""; $.ajax({ async: false, type: "post", url: "Handler1.ashx?action=getCount", data: {}, success: function (result) { count = result; } }); return count; } function getData(page_index) { var new_content = ""; $.ajax({ type: "post", url: "Handler1.ashx?action=getData", data: { page: page_index }, success: function (result) { var content = eval(result); for (var i = 0; i < content.length; i++) { if (new_content.length == 0) { new_content = "<tr><td>" + content[i]["NUM"] + "</td><td>" + content[i]["SOP"] + "</td><td>" + content[i]["NAME"] + "</td><td>" + content[i]["DATE"] + "</td></tr>"; } else { new_content = new_content + "<tr><td>" + content[i]["NUM"] + "</td><td>" + content[i]["SOP"] + "</td><td>" + content[i]["NAME"] + "</td><td>" + content[i]["DATE"] + "</td></tr>"; } } $("#TR").empty().append(new_content); //装载对应分页的内容 } }); } </script> </body> </html>
在 jquery.paginate.js 这个文件中有一些默认的设定，比如说，每页显示的数量、页码的数量、首页、尾页按钮显示的文字……都可以在里面进行默认设置的更改
通过一般处理程序，请求后台数据，getCount会返回数据的总页数，getData会返回详细的数据（以JSON字符串的形式返回）
下面一段是后台代码，可以忽略不看。
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Data; using System.Data.SqlClient; using System.Text; namespace JqPaginator { /// <summary> /// Handler1 的摘要说明 /// </summary> public class Handler1 : IHttpHandler { private static readonly string connStr = "Data Source=VICHIN-PC;Initial Catalog=MyTest;Integrated Security=True"; public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; string StrAction = context.Request.QueryString["action"]; switch (StrAction) { case "getCount": getCount(context); break; case "getData": getData(context); break; } context.Response.End(); } private void getData(HttpContext context) { string page_Str = context.Request["page"]; int page = Convert.ToInt32(page_Str); int firstNum = page * 10 - 9; int secondNum = page * 10; string getData_Str = @"select A.NUM,A.SOP,A.NAME,A.[DATE] from (select ROW_NUMBER() OVER(order by NO asc) as NUM,SOP,NAME,[DATE] from dbo.SMTSOP_DELETE_RECORD) as A where A.NUM between " + firstNum + " and " + secondNum + ""; DataTable getData_DT = Query(getData_Str); if (getData_DT.Rows.Count > 0) { context.Response.Write(DataTable2Json(getData_DT)); } } private void getCount(HttpContext context) { string getCount_Str = "select COUNT(NO) as NumCount from dbo.SMTSOP_DELETE_RECORD"; DataTable Count_DT = Query(getCount_Str); if (Count_DT.Rows.Count > 0) { int count = Convert.ToInt32(Count_DT.Rows[0][0].ToString()); int j = count % 10; int k = count / 10; if (j != 0) context.Response.Write((k + 1).ToString()); else { context.Response.Write(k.ToString()); } } } public static string DataTable2Json(DataTable dt) { StringBuilder SB = new StringBuilder(); SB.Append("["); for (int i = 0; i < dt.Rows.Count; i++) { SB.Append("{"); for (int j = 0; j < dt.Columns.Count; j++) { SB.Append("""); SB.Append(dt.Columns[j].ColumnName); SB.Append("":""); SB.Append(dt.Rows[i][j].ToString()); SB.Append("","); } SB.Remove(SB.Length - 1, 1); SB.Append("},"); } if (dt.Rows.Count > 0) { SB.Remove(SB.Length - 1, 1); } SB.Append("]"); return SB.ToString(); } public bool IsReusable { get { return false; } } public static DataTable Query(string sqlStr) //创建一个表集合,名字为GetData { SqlConnection conn = new SqlConnection(connStr); conn.Open(); try { SqlCommand comm = new SqlCommand(sqlStr, conn); SqlDataAdapter da = new SqlDataAdapter(comm); DataTable dt = new DataTable(); da.Fill(dt); return dt; } catch (Exception ex) { throw ex; } finally { conn.Close(); } } } }
这个是效果图
