现在的位置: 首页 > 综合 > 正文

jquery.pagination +JSON 动态无刷新分页

2012年03月18日 ⁄ 综合 ⁄ 共 3043字 ⁄ 字号 评论关闭
View Code

 1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5 using System.Web.UI;
6 using System.Web.UI.WebControls;
7 using System.Data;
8
9 public partial class SqlPage : System.Web.UI.Page
10 {
11 protected void Page_Load(object sender, EventArgs e)
12 {
13 public int pageCount = 0;
14 public static string connString = "server=192.168.1.91;database=ReportDB;uid=sa;pwd=123456";
15 protected void Page_Load(object sender, EventArgs e)
16 {
17 if (!IsPostBack) {
18 pageCount = GetTotalPage();
19 if (Request["pageIndex"] != null && Request["pageSize"] != null) {
20 int pageSize = Convert.ToInt32(Request["pageSize"]) == 0 ? 1 : Convert.ToInt32(Request["pageSize"]);
21 int pageIndex = Convert.ToInt32(Request["pageIndex"]) == 0 ? 1 : Convert.ToInt32(Request["pageIndex"]);
22 Response.Write(GetOnePage(pageSize, pageIndex));
23 Response.End();
24 }
25 }
26
27 }
28 public int GetTotalPage() {
29 DBHelper.connString = connString;
30 string sql = "select count(*) from News";
31 int rs = Convert.ToInt32(DBHelper.ExecuteScalar(sql));
32 return rs; }
33 public string GetOnePage(int pageSize, int pageIndex) {
34 DBHelper.connString = connString;
35 string sql = string.Empty;
36 sql = "SELECT TOP " + pageSize + " NewsID,Title,SmallClassName,Author,Updatetime FROM News WHERE NewsID NOT IN (SELECT TOP " + pageSize * (pageIndex - 1) + " NewsID FROM News ORDER BY NewsID DESC) ORDER BY NewsID DESC";
37 DataTable dt = DBHelper.QueryBySql(sql);
38 return ConvertJson.ToJson(dt, "News");
39 }
40 }
41 }

aspx 页面:

View Code

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="SqlPage.aspx.cs" Inherits="SqlPage" %>
2
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4 <html xmlns="http://www.w3.org/1999/xhtml">
5 <head runat="server">
6 <title></title>
7 </head>
8 <body>
9 <form id="form1" runat="server">
10 <div>
11 <table id="tblData" width="80%" cellpadding="1" cellspacing="1" bgcolor="gray" style="text-align: center">
12 <tr>
13 <td>
14 NewsID
15 </td>
16 <td>
17 Title
18 </td>
19 <td>
20 SmallClassName
21 </td>
22 <td>
23 Author
24 </td>
25 <td>
26 UpdateTime
27 </td>
28 </tr>
29 </table>
30 <div id="Pagination">
31 </div>
32 </div>
33 </form>
34 </body>
35 </html>
36 <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
37 <script src="js/jquery.pagination.js" type="text/javascript"></script>
38 <script language="javascript" type="text/javascript"> var pageIndex = 0; //页索引 var pageSize =20; //每页显示的条数
39 $(function() {
40 Init(0);
41 $("#Pagination").pagination(<%=pageCount %>, {
42 callback: PageCallback,
43 prev_text: '上一页',
44 next_text: '下一页',
45 items_per_page: pageSize,
46 num_display_entries: 5,
47 current_page: pageIndex,
48 num_edge_entries: 1
49 });
50 function PageCallback(index, jq) {
51 Init(index); }
52 });
53 function Init(pageIndex) {
54 $.ajax({
55 type: "POST",
56 dataType: "text",
57 url: 'SqlPage.aspx',
58 data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize, success: function(data) {
59 if(data!=""){
60 $("#tblData tr:gt(0)").remove();//移除所有的数据行
61 data=$.parseJSON(data);
62 $.each(data.News,function(index,news){
63 $("#tblData").append("<tr bgcolor='white'><td>"+news.NewsID+"</td><td algin='left'>"+news.Title+"</td><td>"+news.SmallClassName+"</td><td>"+news.Author+"</td><td>"+news.Updatetime+"</td></tr>");
64 //将返回的数据追加到表格
65 });
66 }
67 }
68 });
69 }</script>

 

 

抱歉!评论已关闭.