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. Linux网络相关配置

    一.修改网卡相关配置 Linux网络参数是在/etc/sysconfig/network-scripts/ifcfg-eth0中设置,其中ifcfg-eth0表示是第一个网卡,如果还有另外一块网卡,则 ...

  2. Interview website

    https://www.interviewcake.com http://www.leetcode.com

  3. Struts2入门(四)——数据输入验证

    一.前言 1.1.什么是输入验证?为什么需要输入验证? 在上一篇文章中,我们学习了数据类型转换,我们提到了表示层数据处理的两个方法,也提到了用户输入数据需要进行类型转换才能得到我们想要的数据,那么,我 ...

  4. SAP CRM 使用Javascript触发SAP Server Event

    原文地址:How To Trigger SAP Server Event With Javascript 本文地址:http://www.cnblogs.com/hhelibeb/p/5977921. ...

  5. Android Weekly Notes Issue #227

    Android Weekly Issue #227 October 16th, 2016 Android Weekly Issue #227. 本期内容包括: Google的Mobile Vision ...

  6. Google C++单元测试框架GoogleTest(总)

    之前一个月都在学习googletest框架,对googletest的文档都翻译了一遍,也都发在了之前的博客里,另外其实还有一部分的文档我没有发,就是GMock的CookBook部分:https://g ...

  7. Android requires compiler compliance level 5.0 or 6.0. Found '1.4' instead的解决办法

    今天在导入工程进Eclipse的时候竟然出错了,控制台输出的是: [2013-02-04 22:17:13 - takepicture] Android requires compiler compl ...

  8. android MVP设计模式!

    实现原理: MainActivity 用来更新UI,和显示业务逻辑的结果! LoginPresenterCompl 用来处理 业务逻辑 ILoginPresenter 业务处理类抽象出来的接口 ILo ...

  9. LinuxMint装JDK和Eclipse

    Linux Mint 装JDK和Eclipse 前言 在尝试了好几个发行版后终于锁定了Linux Mint Cinnamon .那么就得配置好环境了. 这里讲一下JAVA环境,配置JDK和Eclips ...

  10. 【代码笔记】iOS-页面之间的跳转效果

    一,工程图. 二,代码. RootViewController.m -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { ...