jquery分页插件,分页插件的使用

jquery分页插件哪个比较好？

maxentries    总条目数    必选参数，整数  

目前创新互联建站已为近1000家的企业提供了网站建设、域名、雅安服务器托管、网站托管维护、企业网站设计、德宏州网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

items_per_page    每页显示的条目数    可选参数，默认是10  

num_display_entries    连续分页主体部分显示的分页条目数    可选参数，默认是10  

current_page    当前选中的页面    可选参数，默认是0，表示第1页  

num_edge_entries    两侧显示的首尾分页的条目数    可选参数，默认是0  

link_to    分页的链接    字符串，可选参数，默认是"#"  

prev_text    “前一页”分页按钮上显示的文字    字符串参数，可选，默认是"Prev"  

next_text    “下一页”分页按钮上显示的文字    字符串参数，可选，默认是"Next"  

ellipse_text    省略的页数用什么文字表示    可选字符串参数，默认是"..."  

prev_show_always    是否显示“前一页”分页按钮    布尔型，可选参数，默认为true，即显示“前一页”按钮  

next_show_always    是否显示“下一页”分页按钮    布尔型，可选参数，默认为true，即显示“下一页”按钮  

callback    回调函数    默认无执行效果  

首先这些都不叫插件，叫JavaScript框架，也叫Jquery类库，是所有Jquery插件（有很多，Jquery幻灯啊，Jquery导航啊，请百度）的基础，就是你要用Jquery插件就要导入jquery-1.4.2.js这些query-1.4.2.js里面有注释的教你怎么用的，数字是版本号jquery-1.6.4.min.js

带min是压缩后的，可以挂网页上得，用于减少加载。

jquery正规命名规范

jquery -版本号

.min压缩版

不带.min就是未压缩版

jquery-1.6.4.min.js

一般使用都用带.min的

节省加载时间。

其他的都是基于

jquery做的开发，命名各不相同，但都依赖于jquery

jquery ajax分页插件 怎么写

包括常用的加载失败重试，参数可配置是否能手动输入页码，设置按钮数目，可以调用多个page等等，调用代码很简便

script type="text/javascript"

var kpage;

$(function () {

tocount();

});

function tocount() {

//初始化

$.ajax({ url: "/Service/DBCount", type: "post", success: function (e) {

kpage = $("#divPage").page({ dataCount: e, pageChange: topage });

}

});

}

function topage(i, s) {

//数据查询

$("#divInfo").html("加载中...");

$.ajax({ url: "/Service/List", type: "post", data: { PageSize: s, PageIndex: i }, success: function (r) {

$("#tList").html(r);

$("#divInfo").html("");

}, error: function () {

$("#divInfo").html("加载失败...a href='javascript:reload();'重试/href");

}

});

}

function reload() {

kpage.reload();

}

/script

具体jquery.kun_page.js：

/*

---------------------------------

参数config:

dataCount:数据总数

pageSize:页数据条数

maxButton:页码按钮数目

showCustom:是否能手动输入页码 

pageChange:页变更事件

参数：(i,s,c)

i:pageIndex,当前页

s:pageSize,页数据条数

c:pageCount,总页数

*/

(function($){

$.fn.page = function (config) {

if (this.length != 1) {

throw "k_page:如有多个page请调用多次!";

}

var defaults = { dataCount: 1, pageSize: 10, maxButton: 6, showCustom: true, pageChange: null }

config = $.extend(defaults, config);

if (config.maxButton = 1) config.maxButton = 2;

if (config.pageSize  1) config.pageSize = 1;

//按钮数目需偶数

if (config.maxButton % 2 != 0)

config.maxButton++;

var pageIndex = 1, pageCount, move_kf;

//初始化页数

function initcount() {

pageCount = config.dataCount % config.pageSize == 0 ? config.dataCount / config.pageSize : parseInt(config.dataCount / config.pageSize) + 1;

}

initcount();

var prev = "div class="k_p_prev"上一页/div", next = "div class="k_p_next"下一页/div", pbody = $(""), pcustom = $("span class="k_custom"到第  页 /spandiv class="k_btn"确定/div"), cl = "div class="k_cl"/div", pipt = $("input class="k_ipt" type="text"");

this.empty().addClass("kun_page").append(prev);

pipt.keypress(function (e) {

if (e.which == 13) {

topage("确定");

return false;

}

}).appendTo(pcustom.children());

if (config.pageChange) {

this.unbind("click").bind("click", function (e) {

var _t = $(e.target);

if (_t[0].tagName == "DIV"  _t[0].className != "kun_page") {

topage(_t.text());

}

});

}

//跳转页码

function topage(text) {

switch (text) {

case "上一页":

if (pageIndex - 1  1) {

return;

}

pageIndex--;

move_kf = "sc_r";

break;

case "下一页":

if (pageIndex + 1  pageCount) {

return;

}

pageIndex++;

move_kf = "sc_l";

break;

case "确定":

if (!/^\d+$/.test(pipt.val())) {

pipt.val("");

return;

}

text = parseInt(pipt.val());

if (text  1 || text  pageCount) {

pipt.val("");

return;

}

default:

var _pindex = parseInt(text);

if (pageIndex == _pindex)

return;

move_kf = pageIndex  _pindex ? "sc_l" : "sc_r";

pageIndex = _pindex;

break;

}

gopageChange();

}

//页变更事件

function gopageChange() {

if (config.pageChange) {

if (config.dataCount != 0) {

config.pageChange(pageIndex, config.pageSize, pageCount);

endloading();

}

}

}

//异步加载结束

function endloading() {

initpage();

}

//添加页码

function initpage() {

pbody.empty();

var _t_maxb = config.maxButton / 2;

//前后页码集合

var _t_listp = [], _t_listn = [];

var _min = 0, _max = pageCount;

for (var i = 1; i = _t_maxb; i++) {

var _t_prev = pageIndex - i, _t_next = pageIndex + i;

//当前页码之前的页

if (_t_prev  0) {

_t_listp.push("div class="k_p_page"" + _t_prev + "/div");

if (i == _t_maxb) _min = _t_prev;

}

//当前页码之后的页

if (_t_next = pageCount) {

_t_listn.push("div class="k_p_page"" + _t_next + "/div");

if (i == _t_maxb) _max = _t_next;

}

}

//显示第一页

if (_min  1) pbody.append("div class="k_p_page"1/div");

//显示前 ……

if (_min - 1  1) pbody.append("em.../em");

for (var i = _t_listp.length; i = 0; i--) {

pbody.append(_t_listp[i]);

}

pbody.append("div class="k_p_page k_p_current"" + pageIndex + "/div");

for (var i = 0; i  _t_listn.length; i++) {

pbody.append(_t_listn[i]);

}

//显示后 ……

if (pageCount - _max  1) pbody.append("em.../em");

//显示最后一页

if (_max  pageCount) pbody.append("div class="k_p_page"" + pageCount + "/div");

}

initpage();

gopageChange();

this.append(pbody).append(next);

if (config.showCustom)

this.append(pcustom);

this.append(cl);

return { reload: gopageChange, pageCount: pageCount, recount: function (e) {

//重新计算页数

config.dataCount = e;

pageIndex = 1;

initcount();

initpage();

gopageChange();

}

};

//console.log(_min + "*" + _max + "*" + pageCount);

}

})(jQuery)

样式kun_page.css：

.kun_page {font-size: 12px;line-height:23px;font-family:"Microsoft YaHei";}

.kun_page .k_p_page{position:relative;}

.kun_page div {float: left;margin: 3px;border: solid 1px #ccc;cursor: pointer;color: #333;min-width:12px;text-align:center;padding:0px 5px;}

.kun_page em {display: block;float: left;margin: 2px;}

.kun_page .k_p_current {background: #ccc;color: #fff;-webkit-animation:scroll_b 300ms;animation:scroll_b 300ms;}

.kun_page .k_cl {clear: both;float: none;border: none;margin: 0px;padding: 0px;width:0px;height:0px;}

.kun_page .k_custom {display: block;float: left;margin: 3px 3px 3px 20px;}

.kun_page .k_ipt {width: 30px;height: 21px;border: solid 1px #ccc;text-align: center;vertical-align:middle;}

.kun_page .k_m{ opacity: 0; width: 1%; height: 1%;top:0px;left:0px; display:block; position: absolute; }

.kun_page .sc_l{background: -webkit-gradient(linear, 0 100%, 100% 100%, from(#CCCCCC), to(#645F5F));

-webkit-transform:translate(-50px);-webkit-animation:scroll_k_l 300ms linear;

background: -moz-linear-gradient(left,#CCCCCC 0%, #645F5F 100%);

background: -ms-linear-gradient(left,#CCCCCC 0%, #645F5F 100%);

transform:translate(-50px);animation:scroll_k_l 300ms linear;

}

.kun_page .sc_r{background: -webkit-gradient(linear, 0 100%, 100% 100%, from(#645F5F), to(#CCCCCC));

-webkit-transform:translate(50px); -webkit-animation:scroll_k_r 300ms linear;

background: -moz-linear-gradient(left, #645F5F 0%, #CCCCCC 100%);

background: -ms-linear-gradient(left,#CCCCCC 0%, #645F5F 100%);

transform:translate(50px); animation:scroll_k_r 300ms linear;

}

/*

animation

*/

@-webkit-keyframes scroll_k_l{

0%{-webkit-transform:translate(-100px);opacity:0.2;width:200%;height:100%;}

99%{-webkit-transform:translate(-20px);opacity:0;width:200%;height:100%;}

100%{-webkit-transform:translate(-20px);opacity:0;width:1%;height:1%;}

}

@-webkit-keyframes scroll_k_r{

0%{-webkit-transform:translate(100px);opacity:0.2;width:200%;height:100%;}

99%{-webkit-transform:translate(20px);opacity:0;width:200%;height:100%;}

100%{-webkit-transform:translate(20px);opacity:0;width:1%;height:1%;}

}

@keyframes scroll_k_l{

0%{transform:translate(-100px);opacity:0.2;width:200%;height:100%;}

99%{transform:translate(-20px);opacity:0;width:200%;height:100%;}

100%{transform:translate(-20px);opacity:0;width:1%;height:1%;}

}

@keyframes scroll_k_r{

0%{transform:translate(100px);opacity:0.2;width:200%;height:100%;}

99%{transform:translate(20px);opacity:0;width:200%;height:100%;}

100%{transform:translate(20px);opacity:0;width:1%;height:1%;}

}

@-webkit-keyframes scroll_b{

0%,99%{background: #fff;color: #000;}

100%{background: #ccc;color: #fff;}

}

@keyframes scroll_b{

0%,99%{background: #fff;color: #000;}

100%{background: #ccc;color: #fff;}

}

样式和动画都可以自己修改(好吧，动画效果很朴素，闹哪样，明明想了很久好吗)

pageChange事件里面也没有过多的其他处理，比如我们公司前后台处理json就有一套方案，ajax提交的参数也有处理

所以若有需求，完全可以在我的代码上再封装一层

jQuery分页插件pagination具体怎么用？求详细教程

本文实例为大家分享了jQuery Pagination分页插件的具体代码，供大家参考，具体内容如下

一、引用CSS和JS：

link href="/Content/Plugins/jQuery.Pagination_v2.2/pagination.css" rel="external nofollow" rel="stylesheet" type="text/css" / script src="/Content/Plugins/jQuery.Pagination_v2.2/jquery.pagination.js" type="text/javascript"/script

二、HTML：

div id="Pagination" class="flickr" style="margin-top: 10px; margin-left: 10px;" /div

三、JS：

$(function () { var total = parseInt("@(ViewBag.total)"); var page = parseInt("@(ViewBag.page)") - 1; var pageSize = parseInt("@(ViewBag.pageSize)"); $("#Pagination").pagination(total, { callback: function (page_id) { window.location = "BoardList?page=" + page_id + "pageSize=" + this.items_per_page; }, //PageCallback() 为翻页调用次函数。 prev_text: " 上一页", next_text: "下一页 ", items_per_page: 10, //每页的数据个数 num_display_entries: 1, //两侧首尾分页条目数 current_page: page, //当前页码 num_edge_entries: 11 //连续分页主体部分分页条目数 }); });

四、后台代码：

public ActionResult BoardList() { PagerModel pager = new PagerModel(); if (Request["page"] == null) { pager.page = 1; pager.rows = 10; pager.sort = "Id"; pager.order = "desc"; } else { pager.page = int.Parse(Request["page"]) + 1; pager.rows = int.Parse(Request["pageSize"]); pager.sort = "Id"; pager.order = "desc"; } boardManageService.GetList(ref pager); ListBoardModel boardList = pager.result as ListBoardModel; ViewData["BoardModelList"] = boardList; ViewBag.page = pager.page; ViewBag.total = pager.totalRows; ViewBag.pageSize = pager.rows; return View(); } #endregion

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

jquery分页排序插件jplist怎么弄

jPList是一个灵活的jQuery插件,支持排序、分页和过滤的HTML结构(DIVs,

UL/LI,

tables,等等)。

特点

适用于任何内容(表、列表、div元素等)

升序和降序排序

字母数字和数字排序

日期和时间排序

自动分页

任意数量的文本框过滤器

任意数量的下降过滤器

复选框和单选按钮过滤器

数据来源:PHP

+

MySQL,

ASP.NET

+

Sql

Server,

PHP

+

SQLite

支持本地存储和cookies

网格/列表视图演示页面

完全可定制的风格

在所有主要浏览器工作

SEO友好

带注释的源代码

详细的文档