当前位置:首页 > 开发 > Web前端 > Jquery > 正文

jquery分页插件

发表于: 2015-07-09   作者:genaiwei   来源:转载   浏览:
摘要: //jquery页码控件// 创建一个闭包    (function($) {      // 插件的定义      $.fn.pageTool = function(options) {        var totalPa

//jquery页码控件
// 创建一个闭包   
(function($) {   
  // 插件的定义   
  $.fn.pageTool = function(options) {   
   
var totalPage = Math.ceil(total/pageSize);
var htmlStr = [];
htmlStr.push('...');
$('#kkpager').html(htmlStr.join(''));
//首页
$('#frist_page').click(function(){
$(this).pageTool({
total: total,
pageSize: pageSize,
curPage: 1,
showNum: showNum,
callback: function(curPage) {

}
});
});
//上一页
$('#back_page').click(function(){
$(this).pageTool({
total: total,
pageSize: pageSize,
curPage: curPage-1,
showNum: showNum,
callback: function(curPage) {

}
});
});
//绑定页码事件
$('.pageNum').click(function(){
$(this).pageTool({
total: total,
pageSize: pageSize,
curPage: parseInt($(this).text()),
showNum: showNum,
callback: function(curPage) {

}
});
});
//下一页
$('#next_page').click(function(){
$(this).pageTool({
total: total,
pageSize: pageSize,
curPage: ((curPage+1)>totalPage)?(totalPage):(curPage+1),
showNum: showNum,
callback: function(curPage) {

}
});
});
//最后一页
$('#last_page').click(function(){
$(this).pageTool({
total: total,
pageSize: pageSize,
curPage: totalPage,
showNum: showNum,
callback: function(curPage) {

}
});

});
//跳转页面绑定事件
$('#kkpager_btn_go').click(function(){

if(checkRate(total, pageSize)){
$(this).pageTool({
total: total,
pageSize: pageSize,
curPage: parseInt($('#kkpager_btn_go_input').val(),10),
showNum: showNum,
callback: function(curPage) {

}
});
}
});
//调整每页显示多少条数据
$('#max_item').change(function(){
$(this).pageTool({
total: total,
pageSize: parseInt($('#max_item').val(),10),
curPage: 1,
showNum: showNum,
callback: function(curPage) {

}
});

});
  };   
  //判断奇偶
  function chk(num){
  return (num%2 == 0)?1:0;
  }
 
//判断是不是整数
  function checkRate(total, pageSize) {
 
  var curPage = $('#kkpager_btn_go_input').val();
  var re = /^[1-9]+[0-9]*]*$/;
     
  if (notEmptys(curPage)){
  if (!re.test(curPage)) {
  alert("请输入正整数");
  return false;
  }else{
  if(curPage <= Math.ceil(total/pageSize)){
  return true;
  }else{
  alert("请输入正确的页码");
  return false;
  }
  }
  }
  }
 
// 定义暴露format函数   
  $.fn.pageTool.fristPage = function() {   
 
  };

  $.fn.pageTool.defaults = {   
  "total": 0,
  "curPage": 1,
  "pageSize": 10,
  "showNum": 7,
  "changeColor": true,
  "changeMaxItem": true,
  "goToOtherPage": true
  }; 
  // 闭包结束   
})(jQuery);

 

 

//调用     
$(function(){
		$('#kkpager').pageTool({
			total: 180,
			pageSize: 10,
			curPage: 1,
			showNum: 7,
			changeColor: true,
			changeMaxItem: true,
			goToOtherPage: true,
			callback: function(curPage) {
				
			}
		});
	});

 

 

jquery分页插件

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
先看效果:我弄的是一页1条数据 下面直接上代码: <!doctype html> <html lang="en"> &
Jquery分页插件 背景   找到一款自认为不错的分页组件,《js版的QuickPager分页控件 V2.0》,想下
使用方法: (1)下载jquery.js,现在最新版本为1.3 (2)新建js,我的为page.js,放入以下代码。 j
背景   找到一款自认为不错的分页组件,《js版的QuickPager分页控件 V2.0》,想下载完整的资源,j
项目中用到了Pagination分页栏插件.很精简的一个插件,但是只提供分页栏显示的功能. 如果使用ajax来
在实际项目开发中,通用的分页组件是必不可少的。下面描述的是关于JavaScript版的分页组件。该组件
今天推荐一个分页工具条插件:Smart Paginator,这个插件用途还是很广的,而且可定制性相当不错,目
今天推荐一个分页工具条插件:Smart Paginator,这个插件用途还是很广的,而且可定制性相当不错,目
jQuery的分页插件很多,但是大都的功能都比较简单,今天我们分享一个非常酷的分页插件 - jPages,拥
转载:http:// blog.163.com/xiaoou521%40126/blog/static/6341069420121245254188/ jquery分页插件
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号