1、引入jqpage.js

2、html代码

<div id="page">
</div>

3、js 调用

 $(function () {
$.fn.jqpage({
id: 'page', width: 700 ,onSelectPage: function (pageNum, pageSize) {
console.log(pageNum + '------' + pageSize);
// ajax 异步请求数据...
var total = 100;
return total;
}
});
});

id:占位div的id
width:宽度
onSelectPage: 页码改变的回调函数
参数:pageNum 新页码
         pageSize 每页显示条数
返回值 : total 总记录条数

4、效果图

jqpage.js 源码

$(function ($) {
$.fn.jqpage = function (options) { // 默认参数
var settings = $.extend({}, { id: '' }, options);
var page = $('#' + settings.id); var page_html =
' <table style="border:1px solid black;font-size:13px;font-weight:bold;color:black;" class="tabPage" ' +
' data-current="1" data-total="10" data-pageCount="100" data-pageSize="10"> ' +
' <tbody><tr> ' +
' <td> <span class="homePage" >首页</span> |</td> ' +
' <td> <span class="prevPage" >上一页</span> |</td> ' +
' <td> <span class="nextPage" >下一页</span> |</td> ' +
' <td> <span class="lastPage" >尾页</span> |</td> ' +
' <td> <select class="jrd_pageSizeChage"> ' +
' <option value="10">10</option> ' +
' <option value="20">20</option> ' +
' <option value="30">30</option> ' +
' </select> </td> ' +
' <td> <span class="goPage">前往</span><input type="text" class="txt_goPage" style="width:25px;"/>页 |</td> ' +
' <td>当前<label class="jrd_pageNum"></label>/<label class="jrd_pageCount"></label>页</td> ' +
' <td>总共<label class="jrd_total"></label>条记录</td> ' +
'</tr></tbody></table> '; function init() {
page.html(page_html); if (settings.width) {
page.css('width', settings.width);
page.find('.tabPage').css('width', settings.width);
}
// 添加其他参数时在这里进行初始化
// style, ... // 注册4个事件
page.find('.homePage').click(function () { jrd_PageChange(0) });
page.find('.prevPage').click(function () { jrd_PageChange(1) });
page.find('.nextPage').click(function () { jrd_PageChange(2) });
page.find('.lastPage').click(function () { jrd_PageChange(3) });
page.find('.goPage').click(function () { jrd_PageChange(4) });
//page.find('.txt_goPage').click(function () { jrd_PageChange(4) }).data('pid', settings.id);
page.find('.jrd_pageSizeChage').change(jrd_pageSizeChage).data('pid', settings.id).change(); } // 页码发生事件
function jrd_PageChange(t) {
var pageNum = page.data('pageNum');
//var total = page.data('total');
var pageCount = page.data('pageCount');
var pageSize = page.data('pageSize'); if (t == 0) { // 首页
pageNum = 1;
settings.onSelectPage(pageNum, pageSize);
} else if (t == 1) { // 上一页
pageNum = pageNum - 1;
if (pageNum < 1) pageNum = 1;
settings.onSelectPage(pageNum, pageSize);
} else if (t == 2) { // 下一页
pageNum = pageNum + 1;
if (pageNum > pageCount) pageNum = pageCount;
settings.onSelectPage(pageNum, pageSize);
} else if (t == 3) { // 尾页
pageNum = pageCount;
settings.onSelectPage(pageNum, pageSize);
} else if (t == 4) {
//pageNum 输入的值
pageNum = parseInt(page.find('.txt_goPage').val());
if (isNaN(pageNum) || pageNum < 1) pageNum = 1;
if (pageNum > pageCount) pageNum = pageCount;
settings.onSelectPage(pageNum, pageSize);
} page.data('pageNum', pageNum); // 修改为当前页
page.find('.jrd_pageNum').text(pageNum);
page.find('.txt_goPage').val(pageNum);
}
// 显示数量事件
function jrd_pageSizeChage() {
var pageNum = 1;
var pageSize = parseInt($(this).val())
var totalCount = settings.onSelectPage(pageNum, pageSize); // 返回总记录数
var pageCount = Math.ceil(totalCount / pageSize); page.data('pageNum', pageNum).data('pageSize', pageSize)
.data('totalCount', totalCount).data('pageCount', pageCount);
page.find('.jrd_pageNum').text(pageNum);
page.find('.jrd_pageCount').text(pageCount);
page.find('.jrd_total').text(totalCount);
} init();
}
});

jQuery 自定义插件 (分页控件)的更多相关文章

  1. 自定义angularjs分页控件

    继昨天写了knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页 ,正好最近刚学习angularjs ,故琢磨着写一个angularjs版本的分页 ...

  2. C# WinForm自定义通用分页控件

    大家好,前几天因工作需要要开发一个基于WinForm的小程序.其中要用到分页,最开始的想法找个第三方的dll用一下,但是后来想了想觉得不如自己写一个玩一下 之前的web开发中有各式各样的列表组件基本都 ...

  3. [转]Oracle分页之二:自定义web分页控件的封装

    本文转自:http://www.cnblogs.com/scy251147/archive/2011/04/16/2018326.html 上节中,讲述的就是Oracle存储过程分页的使用方式,但是如 ...

  4. 自定义WPF分页控件

    一.分页控件功能说明 实现如上图所示的分页控件,需要实现一下几个功能: 可以设置每页能够展示的最大列数(例如每页8列.每页16列等等). 加载的数组总数量超过设置的每页列数后,需分页展示. 可以直接点 ...

  5. WPF自定义DataGrid分页控件

    新建Custom Control,名:PagingDataGrid 打开工程下面的Themes\Generic.xaml xaml里面代码替换如下 <Style x:Key="{x:T ...

  6. jquery自动生成分页控件 - pagetest.js

    /* pagenum:当前页数 theallnum:总条数 themeiye:每页显示多少条 */ function pagetest(pagenum, theallnum, themeiye) { ...

  7. MVC中的自定义标签分页控件,仅供大家学习!!

    public static HtmlString ShowPageNavigate(this HtmlHelper htmlHelper, int currentPage, int pageSize, ...

  8. jquery和css自定义video播放控件

    下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...

  9. ajax 分页控件,基于jquery

    /* 分页插件,依赖jQuery库 version: 1.1.0 author: Harrison Cao release date: 2013-09-23 相对 v1.0版本 修正了分页居中 使用方 ...

随机推荐

  1. C#开机自动启动程序代码

    新建一个winform拖一个checkbox进来.. 然后设置它的changed事件. 已经测试过,可以直接复制使用. private void checkBox1_CheckedChanged(ob ...

  2. HTML5简介

    HTML5简介 HTML5是HTML的最新修订标准.2014年10月29日,万维网联盟(W3C)宣布,经过8年的努力,HTML5标准规范制定完成. HTML5的设计目的是在移动设备上使用多媒体. HT ...

  3. C#开发微信门户及应用(20)-微信企业号的菜单管理

    前面几篇陆续介绍了很多微信企业号的相关操作,企业号和公众号一样都可以自定义菜单,因此他们也可以通过API进行菜单的创建.获取列表.删除的操作,因此本篇继续探讨这个主体,介绍企业号的菜单管理操作. 菜单 ...

  4. java多线程实现方式

    一.什么是线程? 线程:程序中一个单一的顺序控制流程.进程内一个相对独立的.可调度的执行单元,是系统独立调度和分派CPU的基本单位. 多线程:单个程序中同时运行多个线程完成不同的工作,称为多线程. 特 ...

  5. [连载]《C#通讯(串口和网络)框架的设计与实现》- 14.序列号的设计,不重复的实现一机一码

    目       录 第十四章     序列号的设计... 2 14.1        设计原则... 2 14.2        设计思想... 3 14.3        代码实现... 4 14. ...

  6. Spring在web应用中获得Bean的方法

    一:使用ApplicationContext获得Bean 首先新建一个类,该类必须实现ApplicationContextAware接口,改接口有一个方法,public void setApplica ...

  7. php注释规范

    注释在写代码的过程中非常重要,好的注释能让你的代码读起来更轻松,在写代码的时候一定要注意注释的规范.(李昌辉) php里面常见的几种注释方式: 1.文件头的注释,介绍文件名,功能以及作者版本号等信息 ...

  8. Android事件分发机制浅谈(二)--源码分析(ViewGroup篇)

    上节我们大致了解了事件分发机制的内容,大概流程,这一节来分析下事件分发的源代码. 我们先来分析ViewGroup中dispatchTouchEvent()中的源码 public boolean dis ...

  9. RecyclerView 的介绍以及多布局的实例

    RecyclerView 的使用以及多布局的实例 RecyclerView 是在Android5.0之后推出的,是一个比ListView更加灵活更加高效的适配器类型控件.但是RecyclerView不 ...

  10. IOS之Objective-C学习 策略模式

    对于策略模式,我个人理解策略模式就是对各种规则的一种封装的方法,而不仅仅是对算法的封装与调用而已.与工厂模式中简单工厂有点类似,但是比简单工厂更有耦合度,因为策略模式以相同的方法调用所有的规则,减少了 ...