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版本 修正了分页居中 使用方 ...
随机推荐
- C#开机自动启动程序代码
新建一个winform拖一个checkbox进来.. 然后设置它的changed事件. 已经测试过,可以直接复制使用. private void checkBox1_CheckedChanged(ob ...
- HTML5简介
HTML5简介 HTML5是HTML的最新修订标准.2014年10月29日,万维网联盟(W3C)宣布,经过8年的努力,HTML5标准规范制定完成. HTML5的设计目的是在移动设备上使用多媒体. HT ...
- C#开发微信门户及应用(20)-微信企业号的菜单管理
前面几篇陆续介绍了很多微信企业号的相关操作,企业号和公众号一样都可以自定义菜单,因此他们也可以通过API进行菜单的创建.获取列表.删除的操作,因此本篇继续探讨这个主体,介绍企业号的菜单管理操作. 菜单 ...
- java多线程实现方式
一.什么是线程? 线程:程序中一个单一的顺序控制流程.进程内一个相对独立的.可调度的执行单元,是系统独立调度和分派CPU的基本单位. 多线程:单个程序中同时运行多个线程完成不同的工作,称为多线程. 特 ...
- [连载]《C#通讯(串口和网络)框架的设计与实现》- 14.序列号的设计,不重复的实现一机一码
目 录 第十四章 序列号的设计... 2 14.1 设计原则... 2 14.2 设计思想... 3 14.3 代码实现... 4 14. ...
- Spring在web应用中获得Bean的方法
一:使用ApplicationContext获得Bean 首先新建一个类,该类必须实现ApplicationContextAware接口,改接口有一个方法,public void setApplica ...
- php注释规范
注释在写代码的过程中非常重要,好的注释能让你的代码读起来更轻松,在写代码的时候一定要注意注释的规范.(李昌辉) php里面常见的几种注释方式: 1.文件头的注释,介绍文件名,功能以及作者版本号等信息 ...
- Android事件分发机制浅谈(二)--源码分析(ViewGroup篇)
上节我们大致了解了事件分发机制的内容,大概流程,这一节来分析下事件分发的源代码. 我们先来分析ViewGroup中dispatchTouchEvent()中的源码 public boolean dis ...
- RecyclerView 的介绍以及多布局的实例
RecyclerView 的使用以及多布局的实例 RecyclerView 是在Android5.0之后推出的,是一个比ListView更加灵活更加高效的适配器类型控件.但是RecyclerView不 ...
- IOS之Objective-C学习 策略模式
对于策略模式,我个人理解策略模式就是对各种规则的一种封装的方法,而不仅仅是对算法的封装与调用而已.与工厂模式中简单工厂有点类似,但是比简单工厂更有耦合度,因为策略模式以相同的方法调用所有的规则,减少了 ...