Heim > Web-Frontend > js-Tutorial > Hauptteil

分享一个asp.net pager分页控件_jquery

WBOY
Freigeben: 2016-05-16 17:57:36
Original
1302 Leute haben es durchsucht

效果:


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 $(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 current = 1;
}
if (current > total) {
current = total;
}
var endIndex = total;
var startIndex = 1;
var temp = current + Math.floor(count / 2);
if (temp if (temp endIndex = count;
}
else {
startIndex = temp - count + 1;
endIndex = temp;
}
}
else {
if (total > count) {
startIndex = total - count + 1;
}
}
$("#_number").empty();
for (var i = startIndex; 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:
复制代码 代码如下:




分页控件示例












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; }
}
}
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!