jquery分頁(yè)插件jquery.pagination.js實(shí)現(xiàn)無(wú)刷新分頁(yè)

當(dāng)前位置：首頁(yè) > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)絡(luò)編程

來(lái)源：易賢網(wǎng) 閱讀：1763 次日期：2016-07-08 16:03:42

溫馨提示：易賢網(wǎng)小編為您整理了“jquery分頁(yè)插件jquery.pagination.js實(shí)現(xiàn)無(wú)刷新分頁(yè)”,方便廣大網(wǎng)友查閱！

本文實(shí)例為大家分享了jquery分頁(yè)插件實(shí)現(xiàn)無(wú)刷新分頁(yè)的相關(guān)代碼，供大家參考，具體內(nèi)容如下

1.使用插件為 jquery.pagination.js ，如果沒(méi)有這個(gè)js文件的話，我可以給發(fā)個(gè)。

首先引用 jquery.pagination.js （分頁(yè)js），跟pagination.css（分頁(yè)樣式css）。

點(diǎn)擊獲取查看這兩個(gè)文件

2.頁(yè)面js代碼為

var pageIndex = 0; //頁(yè)面索引初始值

var pageSize = 15; //每頁(yè)顯示條數(shù)初始化，修改顯示條數(shù)，修改這里即可

$(function () {

InitTable(0); //Load事件，初始化表格數(shù)據(jù)，頁(yè)面索引為0（第一頁(yè)）

//分頁(yè)，PageCount是總條目數(shù)，這是必選參數(shù)，其它參數(shù)都是可選

$("#Pagination").pagination(<%=pcount%>, {

callback: PageCallback, //PageCallback() 為翻頁(yè)調(diào)用次函數(shù)。

prev_text: "« 上一頁(yè)",

next_text: "下一頁(yè) »",

items_per_page:pageSize,

num_edge_entries: 2, //兩側(cè)首尾分頁(yè)條目數(shù)

num_display_entries: 6, //連續(xù)分頁(yè)主體部分分頁(yè)條目數(shù)

current_page: pageIndex, //當(dāng)前頁(yè)索引

});

//翻頁(yè)調(diào)用

function PageCallback(index, jq) {

InitTable(index);

}

//請(qǐng)求數(shù)據(jù)

function InitTable(pageIndex) {

$.ajax({

type: "POST",

dataType: "text",

url: 'http://www.cnblogs.com/tool/Reserver/ManageBuyBatchManage.ashx', //提交到一般處理程序請(qǐng)求數(shù)據(jù)

data: "pageIndex=" + (pageIndex) + "&pageSize=" + pageSize, //提交兩個(gè)參數(shù)：pageIndex(頁(yè)面索引)，pageSize(顯示條數(shù))

success: function(data) {

$("#Result tr:gt(0)").remove(); //移除Id為Result的表格里的行，從第二行開(kāi)始（這里根據(jù)頁(yè)面布局不同頁(yè)變）

$("#Result").append(data); //將返回的數(shù)據(jù)追加到表格

}

});

}

});

</script>

3.頁(yè)面<body>里面的代碼為

<tr>

</tr>

</table>

<tr>

</tr>

</table>

4.頁(yè)面后臺(tái)代碼為

protected int pcount = 0; //總條數(shù)

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

BLL.TbGoods bll = new BLL.TbGoods();

pcount = bll.GetRecordCount("Status='" + (int)Enum.RecordStatus.Normal + "'"); //獲取頁(yè)面總條數(shù)，即要現(xiàn)實(shí)的數(shù)據(jù)總條數(shù)，還不明白的話，就是select count（*）from Table ，就是這里的個(gè)數(shù)。

}

5.一般處理程序fffff.ashx代碼為

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Text;

using System.Data;

namespace EShop.Web.Admin.tool.Reserver

{

/// <summary>

/// ListBuyBatchManage 的摘要說(shuō)明

/// </summary>

public class ListBuyBatchManage : IHttpHandler

{

public void ProcessRequest(HttpContext context)

{

context.Response.ContentType = "text/plain";

String str = string.Empty;

if (context.Request["pageIndex"] != null && context.Request["pageIndex"].ToString().Length > 0)

{

int pageIndex; //具體的頁(yè)面數(shù)

int.TryParse(context.Request["pageIndex"], out pageIndex);

if(context.Request["pageSize"]!=null&&context.Request["pageSize"].ToString().Length > 0)

{

//頁(yè)面顯示條數(shù)

int size = Convert.ToInt32(context.Request["pageSize"]);

string data= BindSource(size,pageIndex);

context.Response.Write(data);

context.Response.End();

}

#region 無(wú)刷新分頁(yè)

public string BindSource(int pagesize,int page)

{

BLL.TbGoods bll=new BLL.TbGoods();

DataSet ds = bll.GetListByPage("Status='" + (int)Enum.RecordStatus.Normal + "'", "", pagesize * page + 1, pagesize * (page + 1)); //獲取數(shù)據(jù)源的ds會(huì)吧。

StringBuilder sb = new StringBuilder();

if (ds!=null)

{

foreach (DataRow row in ds.Tables[0].Rows)

{

sb.Append("<tr><td>");

sb.Append(row["GoodsUid"]);

sb.Append("</td><td>");

sb.Append(row["GoodsName"]);

sb.Append("</td></tr>");

}

return sb.ToString();