首頁 > 其他

jquery.pagination +JSON 動態無重新整理分頁

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！
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>

 

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More