Home > Web Front-end > JS Tutorial > Share an asp.net pager paging control_jquery

Share an asp.net pager paging control_jquery

WBOY
Release: 2016-05-16 17:57:36
Original
1361 people have browsed it

Effect:


js:

Copy code The code is as follows:

$.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:
Copy code The code is as follows:

#_pos {
width: 40px;
}
.unable
{
color: #BCC0BB;
}
.number
{
margin: 2px;
color:#0000FF;
text-decoration:underline;
}
.selected
{
margin : 2px;
color: #FF0000;
font-weight: bold;
}

html:
Copy the code The code is as follows:



Page control example

< ;script src="JS/jquery.min.js" type="text/javascript">









wcf:
Copy code The code is as follows:

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; }
}
}
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template