jQuery 自定义插件 (分页控件)
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 自定义插件 (分页控件)的更多相关文章
- 自定义angularjs分页控件
继昨天写了knockoutjs+ jquery pagination+asp.net web Api 实现无刷新列表页 ,正好最近刚学习angularjs ,故琢磨着写一个angularjs版本的分页 ...
- C# WinForm自定义通用分页控件
大家好,前几天因工作需要要开发一个基于WinForm的小程序.其中要用到分页,最开始的想法找个第三方的dll用一下,但是后来想了想觉得不如自己写一个玩一下 之前的web开发中有各式各样的列表组件基本都 ...
- [转]Oracle分页之二:自定义web分页控件的封装
本文转自:http://www.cnblogs.com/scy251147/archive/2011/04/16/2018326.html 上节中,讲述的就是Oracle存储过程分页的使用方式,但是如 ...
- 自定义WPF分页控件
一.分页控件功能说明 实现如上图所示的分页控件,需要实现一下几个功能: 可以设置每页能够展示的最大列数(例如每页8列.每页16列等等). 加载的数组总数量超过设置的每页列数后,需分页展示. 可以直接点 ...
- WPF自定义DataGrid分页控件
新建Custom Control,名:PagingDataGrid 打开工程下面的Themes\Generic.xaml xaml里面代码替换如下 <Style x:Key="{x:T ...
- jquery自动生成分页控件 - pagetest.js
/* pagenum:当前页数 theallnum:总条数 themeiye:每页显示多少条 */ function pagetest(pagenum, theallnum, themeiye) { ...
- MVC中的自定义标签分页控件,仅供大家学习!!
public static HtmlString ShowPageNavigate(this HtmlHelper htmlHelper, int currentPage, int pageSize, ...
- jquery和css自定义video播放控件
下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...
- ajax 分页控件,基于jquery
/* 分页插件,依赖jQuery库 version: 1.1.0 author: Harrison Cao release date: 2013-09-23 相对 v1.0版本 修正了分页居中 使用方 ...
随机推荐
- Linux网络相关配置
一.修改网卡相关配置 Linux网络参数是在/etc/sysconfig/network-scripts/ifcfg-eth0中设置,其中ifcfg-eth0表示是第一个网卡,如果还有另外一块网卡,则 ...
- Interview website
https://www.interviewcake.com http://www.leetcode.com
- Struts2入门(四)——数据输入验证
一.前言 1.1.什么是输入验证?为什么需要输入验证? 在上一篇文章中,我们学习了数据类型转换,我们提到了表示层数据处理的两个方法,也提到了用户输入数据需要进行类型转换才能得到我们想要的数据,那么,我 ...
- SAP CRM 使用Javascript触发SAP Server Event
原文地址:How To Trigger SAP Server Event With Javascript 本文地址:http://www.cnblogs.com/hhelibeb/p/5977921. ...
- Android Weekly Notes Issue #227
Android Weekly Issue #227 October 16th, 2016 Android Weekly Issue #227. 本期内容包括: Google的Mobile Vision ...
- Google C++单元测试框架GoogleTest(总)
之前一个月都在学习googletest框架,对googletest的文档都翻译了一遍,也都发在了之前的博客里,另外其实还有一部分的文档我没有发,就是GMock的CookBook部分:https://g ...
- 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 ...
- android MVP设计模式!
实现原理: MainActivity 用来更新UI,和显示业务逻辑的结果! LoginPresenterCompl 用来处理 业务逻辑 ILoginPresenter 业务处理类抽象出来的接口 ILo ...
- LinuxMint装JDK和Eclipse
Linux Mint 装JDK和Eclipse 前言 在尝试了好几个发行版后终于锁定了Linux Mint Cinnamon .那么就得配置好环境了. 这里讲一下JAVA环境,配置JDK和Eclips ...
- 【代码笔记】iOS-页面之间的跳转效果
一,工程图. 二,代码. RootViewController.m -(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event { ...