jquery pager 访问 java_jquery实现pager控件示例

js：

$.fn.extend({ JPager: function (cfg, pageIndex, pageSize) {

if (cfg && pageIndex > 0 && pageSize>0) {

var token = "#" + this.attr("id");

this.empty();

var pageFirst = function () {

$(token).JPager(cfg, 1, pageSize);

};

var pagePre = function () {

$(token).JPager(cfg, pageIndex - 1, pageSize);

};

var pageLast = function () {

$(token).JPager(cfg, parseInt($("#_tot").val()), pageSize);

};

var pageNext = function () {

$(token).JPager(cfg, pageIndex + 1, pageSize);

};

var pageNumber = function () {

$(token).JPager(cfg, parseInt($(this).text()), pageSize);

};

var pageGo = function () {

var index = parseInt($("#_pos").val());

var total = parseInt($("#_tot").val());

if (index) {

if (index > total) {

$(token).JPager(cfg, total, pageSize);

}

else if (index < 1) {

$(token).JPager(cfg, 1, pageSize);

}

else {

$(token).JPager(cfg, index, pageSize);

}

}

};

var checkGoNumber = function () {

if (!Number(this.value)) {

this.value = "";

}

else {

this.value = Number(this.value);

}

};

var initCustomer = function (recordCount) {

if (cfg.customer) {

if (cfg.customer.template) {

var t = cfg.customer.template;

t = t.replace(/\%total\%/gi, Math.ceil(recordCount / pageSize)).replace(/\%current\%/gi, pageIndex).replace(/\%recordCount\%/gi, recordCount).replace(/\%pageSize\%/gi, pageSize);

if (cfg.customer.position == "right") {

$("#_right").after(t);

}

else {

$("#_left").before(t);

}

}

}

};

var changeState = function (total) {

if (pageIndex == 1) {

$("#_first").attr("class", "unable");

$("#_pre").attr("class", "unable");

}

else {

$("#_first").bind("click", pageFirst).attr("class", "number");

$("#_pre").bind("click", pagePre).attr("class", "number");

}

if (pageIndex == total) {

$("#_last").attr("class", "unable");

$("#_next").attr("class", "unable");

}

else {

$("#_last").bind("click", pageLast).attr("class", "number");

$("#_next").bind("click", pageNext).attr("class", "number");

}

};

var initNumber = function (total, count, current) {

if (total > 0 && count > 0) {

if (current < 1) {

current = 1;

}

if (current > total) {

current = total;

}

var endIndex = total;

var startIndex = 1;

var temp = current + Math.floor(count / 2);

if (temp < total) {

if (temp < count) {

endIndex = count;

}

else {

startIndex = temp - count + 1;

endIndex = temp;

}

}

else {

if (total > count) {

startIndex = total - count + 1;

}

}

$("#_number").empty();

for (var i = startIndex; i <= endIndex; i++) {

var html = $("").text(i).bind("click", pageNumber);

if (i == current) {

$("#_number").append(html.attr("class", "selected"));

}

else {

$("#_number").append(html.attr("class", "number"));

}

}

}

};

var initPager = function (data) {

if ($.isArray(data.SearchResult) && data.RecordCount > 0) {

$(token).append("首页 上一页  下一页 末页");

var total = Math.ceil(data.RecordCount / pageSize);

$("#_tot").val(total);

$("#_pos").bind("blur", checkGoNumber);

$("#_to").bind("click", pageGo);

changeState(total);

if (cfg.showNumber && cfg.count > 0) {

initNumber(total, cfg.count, pageIndex);

}

initCustomer(data.RecordCount);

}

};

if (cfg.action) {

if (cfg.action.url && cfg.action.data) {

var d = cfg.action.data.substr(0, cfg.action.data.lastIndexOf("}")) + ',"pageIndex":' + pageIndex + ',"pageSize":' + pageSize + "}";

if (cfg.action.callback && $.isFunction(cfg.action.callback)) {

$.ajax({

type: "post",

url: cfg.action.url,

dataType: "json",

contentType: "text/json",

data: d,

success: function (data) {

initPager(data.d);

cfg.action.callback(data.d);

}

});

}

else {

$.ajax({

type: "post",

url: cfg.action.url,

dataType: "json",

contentType: "text/json",

data: d,

success: function (data) {

initPager(data.d);

}

});

}

}

}

}

}

});

css：

#_pos {

width: 40px;

}

.unable

{

color: #BCC0BB;

}

.number

{

margin: 2px;

color:#0000FF;

text-decoration:underline;

}

.selected

{

margin: 2px;

color: #FF0000;

font-weight: bold;

}

html：

分页控件示例

$(function () {

$("#pager").JPager({ customer:{template:"%cuRRent%"},count: 10, action: { url: "Service/JService.svc/GetPersons", data: '{"name":"zhoulq"}'}, showNumber: true },1,5);

});

wcf：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Runtime.Serialization;

using System.ServiceModel;

using System.ServiceModel.Activation;

using System.ServiceModel.Web;

namespace JPlugin

{

[ServiceContract]

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

public class JService

{

[OperationContract]

[WebInvoke]

public PageObject GetPersons(string name,int pageIndex,int paseSize)

{

return new PageObject(){RecordCount = 23,SearchResult = new List(){new Person(){Name="zhpulq",Age = 28},new Person(){Name = "zhouxy",Age = 24}}};

}

}

public class PageObject

{

public int RecordCount { get; set; }

public List SearchResult { get; set; }

}

}