jquery.pagination +JSON 动态无刷新分页实现代码
jquery.pagination +JSON 动态无刷新分页实现代码
发布时间:2016-12-29 来源:查字典编辑
摘要:aspx页面:复制代码代码如下:NewsIDTitleSmallClassNameAuthorUpdateTimevarpageIndex=...

aspx 页面:

复制代码 代码如下:

<%@ 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">

<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代码:

复制代码 代码如下:

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");

}

}

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新asp.net教程学习
热门asp.net教程学习
编程开发子分类