`
genaiwei
  • 浏览: 949 次
文章分类
社区版块
存档分类
最新评论

jquery分页插件

阅读更多

//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) {
				
			}
		});
	});

 

 

  • 大小: 2.8 KB
分享到:
评论

相关推荐

    jquery分页插件-内有演示说明

    **jQuery分页插件**是Web开发中常用的一种工具,用于在大量数据中实现高效的页面导航,提升用户体验。本资源包含一个演示说明,使得理解和应用变得更加直观和简单。以下将详细解析jQuery分页插件的核心知识点及其...

    jquery分页插件结合jsp实例

    本教程将详细介绍如何使用jQuery分页插件与JavaServer Pages(JSP)结合,实现一个高效的分页功能。我们将重点讨论jQuery分页插件jPagination的使用方法,以及它与JSP的集成。 首先,`jQuery`是一种轻量级的...

    jQuery分页插件设置分页内容显示数量的分页代码

    本篇文章将详细讲解如何使用jQuery分页插件来设置分页内容显示的数量。 首先,我们需要选择一个适合的jQuery分页插件。有许多开源的选项可供选择,例如jQuery Pagination Plugin、jQuery UI Paginator、Bootstrap-...

    jquery分页插件带总数分页代码

    本知识点将详细讲解如何使用jQuery分页插件实现带总数的分页代码。 首先,我们需要一个分页插件。这里提到的"jquery分页插件带总数分页代码"可能是指包含总条数显示功能的插件,例如"jQuery Pagination Plugin with...

    jQueryPager(JQuery分页插件pagination实现Ajax分页)

    jQueryPager是一款轻量级的jQuery分页插件,它允许开发者通过Ajax无刷新的方式实现网页数据的分页加载。此插件名为`pagination`,在CSDN等技术交流平台上被广泛讨论和分享。 **1. jQuery与Ajax** jQuery是一个强大...

    五款漂亮的jquery分页插件

    以下是对"五款漂亮的jquery分页插件"的详细分析: 1. **Bootstrap Pagination** Bootstrap是广泛使用的前端框架,它自带的Pagination组件简洁而实用。这款jQuery分页插件具有响应式设计,可以自适应不同设备的屏幕...

    简单实用的jquery分页插件

    在网页开发中,数据展示往往...接着,选择一个合适的jQuery分页插件。这里我们假设已有一个名为"pagination.js"的插件文件,包含必要的分页功能。将该文件与HTML文件一同放在项目目录中,并在页面底部引入: ```html ...

    简单的jQuery分页插件下载.zip

    **jQuery分页插件简介** 在网页开发中,分页是一种常见的数据展示方式,它能够帮助用户有效地浏览大量数据,避免一次性加载过多内容导致页面响应变慢或内存消耗过大。jQuery是一个轻量级的JavaScript库,它简化了...

    JS+Jquery分页插件

    总结来说,JS+jQuery分页插件通过利用jQuery库的强大功能,结合CSS样式表,可以轻松实现网页的高效分页功能,提高用户在浏览大量数据时的体验。对于前端开发者而言,理解并掌握这种插件的使用和实现原理,有助于提升...

    jQuery分页插件 很实用

    在本教程中,我们将深入探讨jQuery分页插件的使用方法、核心功能和优点。 首先,jQuery分页插件的工作原理是通过JavaScript库jQuery来动态加载和展示页面内容。当用户点击分页按钮时,插件会向服务器发送请求,获取...

    结合CSS3实现的jQuery分页插件.zip

    实现效果: 结合CSS3实现的jQuery分页插件,分页的效果是很常用的,无论是前台还是后端管理系统,都会使用到分页,在企业站或商城网站中都是很实用的。php中文网推荐下载!

    jQuery分页插件(实例详尽,简单易用

    jQuery分页插件是网页开发中常用的一种工具,它能够帮助开发者轻松地在大量数据中实现页面的分段展示,提高用户体验,同时减轻服务器负担。本文将深入探讨jQuery分页插件的工作原理、优势以及如何在实际项目中进行...

    jQuery分页插件

    一个jQuery的分页插件,是在原来网上下载的jQuery的插件上扩展的,原来的是只有按钮的,扩展新增了可以选择用文本框或下拉框来选择跳转页面。因为出现过乱码问题,所以中文的那个里面的中文字符是用的Unicode的编码

    多款jQuery分页插件特效.zip

    本资源"多款jQuery分页插件特效.zip"包含了多种jQuery分页插件的代码示例,供开发者学习和参考。 1. jQuery分页原理: jQuery分页插件通常是基于HTML、CSS和JavaScript构建的。它们通过监听用户的交互事件(如点击...

    简单轻巧的Jquery分页插件

    JQuery分页插件是解决这个问题的一种高效方案,它能够帮助开发者轻松地实现动态加载和分页显示数据,提高用户体验。本篇将详细介绍这款简单轻巧的Jquery分页插件,并探讨其核心功能和应用场景。 Jquery分页插件是...

    jQuery分页插件,超强

    jQuery分页插件是网页开发中的一个重要工具,它使得大量数据的展示变得更为高效和用户友好。在网页中,特别是涉及到数据库查询或者大型数据集的显示时,分页功能能够帮助用户逐步浏览信息,避免一次性加载过多内容...

    jQuery分页插件页码跳转代码.zip

    jQuery分页插件是实现这一功能的强大工具,它简化了JavaScript代码,让开发者可以快速实现动态分页效果。本资源"jQuery分页插件页码跳转代码.zip"提供了实现这一功能的代码示例。 首先,我们需要了解jQuery分页的...

    html 自己写的jquery分页插件

    本项目涉及的是一个自定义的 jQuery 分页插件,用于实现数据的分页展示,提高用户体验,特别是处理大量数据时。下面将详细介绍这三个技术以及分页插件的相关知识点。 **HTML(HyperText Markup Language)** 是网页...

Global site tag (gtag.js) - Google Analytics