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


    aspx 页面:

    View Code
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="SqlPage.aspx.cs" Inherits="SqlPage" %>

    <!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></title>
    <link href="css/pagination.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <form id="form1" runat="server" >
    <div>
    <table id="tblData" width="80%" cellpadding="1" cellspacing="1" bgcolor="gray" style="text-align:center">
    <tr>
    <td>
    NewsID
    </td>
    <td>
    Title
    </td>
    <td>
    SmallClassName
    </td>
    <td>
    Author
    </td>
    <td>
    UpdateTime
    </td>
    </tr>
    </table>
    <div id="Pagination">
    </div>
    </div>

    </form>
    </body>
    </html>

    <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>

    <script src="js/jquery.pagination.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">
    var pageIndex =0; //页索引
    var pageSize =20; //每页显示的条数
    $(function() {
    Init(0);
    $("#Pagination").pagination(<%=pageCount %>, {
    callback: PageCallback,
    prev_text: '上一页',
    next_text: '下一页',
    items_per_page: pageSize,
    num_display_entries: 5,
    current_page: pageIndex,
    num_edge_entries: 1
    });
    function PageCallback(index, jq) {
    Init(index);
    }
    });

    function Init(pageIndex) {
    $.ajax({
    type: "POST",
    dataType: "text",
    url: 'SqlPage.aspx',
    data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize,
    success: function(data) {
    if(data!=""){
    $("#tblData tr:gt(0)").remove();//移除所有的数据行
    data=$.parseJSON(data);
    $.each(data.News,function(index,news){
    $("#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>"); //将返回的数据追加到表格
    });
    }
    }
    });

    }
    </script>


    cs代码:

    View Code
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;

    public partial class SqlPage : System.Web.UI.Page
    {
    public int pageCount = 0;
    public static string connString = "server=192.168.1.91;database=ReportDB;uid=sa;pwd=123456";

    protected void Page_Load(object sender, EventArgs e)
    {
    if (!IsPostBack)
    {
    pageCount = GetTotalPage();
    if (Request["pageIndex"] != null && Request["pageSize"] != null)
    {
    int pageSize = Convert.ToInt32(Request["pageSize"]) == 0 ? 1 : Convert.ToInt32(Request["pageSize"]);
    int pageIndex = Convert.ToInt32(Request["pageIndex"]) == 0 ? 1 : Convert.ToInt32(Request["pageIndex"]);
    Response.Write(GetOnePage(pageSize, pageIndex));
    Response.End();
    }
    }
    }

    public int GetTotalPage()
    {
    DBHelper.connString = connString;
    string sql = "select count(*) from News";
    int rs = Convert.ToInt32(DBHelper.ExecuteScalar(sql));
    return rs;
    }

    public string GetOnePage(int pageSize, int pageIndex)
    {
    DBHelper.connString = connString;
    string sql = string.Empty;
    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";

    DataTable dt = DBHelper.QueryBySql(sql);
    return ConvertJson.ToJson(dt, "News");
    }

    }
  • 相关阅读:
    luogu P3834 【模板】可持久化线段树 1(主席树) 查询区间 [l, r] 内的第 k 小/大值
    覆盖的面积 HDU
    Picture POJ
    Atlantis HDU
    Transformation HDU
    Tunnel Warfare HDU
    Agri-Net POJ
    Conscription POJ
    Brush (IV) LightOJ
    Throwing Dice LightOJ
  • 原文地址:https://www.cnblogs.com/xffy1028/p/2270719.html
Copyright © 2020-2023  润新知