动手编写插件-javascript分页插件
原来公司用的报表分页插件是C#编写的服务器插件,需要前后台交互,而且不支持ajax。
经过一段时间折腾,我编写了一个轻便的jquery分页插件,支持ajax。下面是插件代码
/*
插件名称:报表分页
作者:Keven 调用方法:
1.在html报表下面增加<div class="pageInfo"></div>
2. javascript代码 $(".pageInfo").PageInit();
3.定义函数setResult,把json数据赋值到表格中
参数:
url:数据请求地址
Ajax数据格式:
json格式;需要返回分页数据,格式:"Page":{"TotalCount":"7","PageSize":"20"}
*/ ; (function ($) {
var PageNumber = 1;
var PageSize = 1;
var MaxPage = 1;
var RequestUrl; //外部接口函数
$.fn.extend({
'PageInit': function (op) {
if (op != undefined) {
if (op.url != undefined) {
RequestUrl = op.url;
}
if (op.PageSize != undefined) {
PageSize = op.PageSize;
}
}
if ($(this).html() == "") {
var divLink = $('<div class="pageLink fl"></div>');
with (divLink) {
append('<a href="#" class="PageFirst">首页</a>');
append('<a href="#" class="PagePre">上一页</a>');
append('<input type="number" class="PageNumber" value="1"/>');
append('<a href="#" class="PageNext">下一页</a>');
append('<a href="#" class="PageLast">尾页</a>');
append('<a href="#" class="PageGoto">跳转</a>');
find('a').before('<span class="split-left">[</span>');
find('a').after('<span class="split-right">]</span>');
}
$(this).append(divLink);
$(this).append('<div class="page" style="float:right;margin-right:5px;">第<label class="PageNumber red"<label/>页<span class="split">|</span>共<label class="MaxPage red"<label/>页<span class="split">|</span>共<label class="TotalCount red"></label>条记录</div>');
}
InitEvent();
Search(1);//首次加载时查询
}
});
$.extend({
'GetPageNumber': function () {
return PageNumber;
},
'SetPageNumber': function (pagenumber) {
PageNumber = pagenumber;
Search();
}
}); //通过Ajax获取后台JSON数据
function Search() {
if (RequestUrl == undefined) {
return;
}
var vData = 'pageNumber=' + PageNumber + "&" + $('#form1').serialize();
if (PageSize > 1) {
vData += "&PageSize=" + PageSize;
}
$.ajax({
type: 'POST',
dataType: "text",
ContentType: "application/json; charset=utf-8",
url: RequestUrl,
data: vData,
success: function (result, status, xhr) {
result = eval("(" + result + ")");
//页码信息
$('input.PageNumber').val($.GetPageNumber());
PageSize = result.Page.PageSize;
TotalCount = result.Page.TotalCount;
MaxPage = Math.ceil(TotalCount / PageSize);
$('.TotalCount').text(TotalCount);
$('.MaxPage').text(MaxPage);
$('label.PageNumber').text(PageNumber);
//表格信息
setResult(result);
},
error: function (err, A, B) {
}
});
}; //初始化事件
function InitEvent() {
//点击【首页】
$('.PageFirst').on('click', function () {
PageNumber = 1;
Search();
});
//点击【上一页】
$('.PagePre').on('click', function () {
if (PageNumber > 1) {
PageNumber -= 1;
Search();
}
});
//点击【下一页】
$('.PageNext').on('click', function () {
if (PageNumber < MaxPage) {
PageNumber += 1;
Search();
}
});
//点击【末页】
$('.PageLast').on('click', function () {
PageNumber = MaxPage;
Search();
});
//点击【跳转】
$('.PageGoto').on('click', function () {
var p = $('input.PageNumber').val();
if (!isNaN(p) && p!="") {
PageNumber = parseInt(p);
Search();
}
});
}; })(jQuery);
首先需要在报表下面编写一个div
<div class="pageInfo"></div>
用到的CSS:
.pageInfo {
margin-top: 3px;
} .pageInfo .PageNumber {
width: 80px;
vertical-align: middle;
} .split-left {
margin-left: 5px;
} .split-right {
margin-right: 5px;
} .split {
margin: 10px;
} .pageInfo a {
text-decoration: none;
font-size: 12px;
margin: 2px;
}
.hidden {
display:none;
}
.fl {
float:left;
display:inline;
}
.fr {
float:right;
display:inline;
}
然后在js代码中调用
$(function(){
$(".pageInfo").PageInit({ url: '../BLL/GetReportData.ashx' });
});
上效果图:
动手编写插件-javascript分页插件的更多相关文章
- 自制Javascript分页插件,支持AJAX加载和URL带参跳转两种初始化方式,可用于同一页面的多个分页和不同页面的调用
闲话部分 最近闲着实在无聊,就做了点小东西练练手,由于原来一直在用AspNetPager进行分页,而且也进行了深度的定制与原有系统整合的也不错,不过毕竟是用别人的,想着看自己能试着做出来不能,后台的分 ...
- mybatis generator插件系列--分页插件
1.首先定义分页插件 MysqlPagePlugin.java package com.demo.mybatis.plugin; import org.mybatis.generator.api.Co ...
- PageHelper分页插件及通用分页js
分页概述 1.物理分页 物理分页依赖的是某一物理实体,这个物理实体就是数据库,比如MySQL数据库提供了limit关键字,程序员只需要编写带有limit关键字的SQL语句,数据库返回的就是分页结果. ...
- Springboot 系列(十二)使用 Mybatis 集成 pagehelper 分页插件和 mapper 插件
前言 在 Springboot 系列文章第十一篇里(使用 Mybatis(自动生成插件) 访问数据库),实验了 Springboot 结合 Mybatis 以及 Mybatis-generator 生 ...
- jQuery分页插件(jquery.page.js)的使用
效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒 1.前端 首先html的head中引入相关css与js <lin ...
- MyBatis学习总结_17_Mybatis分页插件PageHelper
如果你也在用Mybatis,建议尝试该分页插件,这一定是最方便使用的分页插件. 分页插件支持任何复杂的单表.多表分页,部分特殊情况请看重要提示. 想要使用分页插件?请看如何使用分页插件. 物理分页 该 ...
- javascript日历插件
原文:javascript日历插件 javascript日历插件 最近在尝试着写javascript日历插件,所以也到github上看国外人日历源码,或者国内人写的好点的,也在研究点,虽然看到网上有一 ...
- SpringBoot 使用 MyBatis 分页插件 PageHelper 进行分页查询
前言:本文档使用的是 SpringBoot,如果是 Spring 还需要在 MyBatis 配置 xml 中配置拦截器,并且 PageHelper 是针对 MyBatis 的,MyBatis 的集成不 ...
- springboot + mybatis配置分页插件
一:使用pagehelper配置分页插件 1:首先配置springboot +mybatis框架 参考:http://www.cnblogs.com/liyafei/p/7911549.html 2 ...
随机推荐
- SqlLikeAttribute 特性增加 左、右Like实现
SqlLikeAttribute 特性原来只实现了全Like,今天增加左.右Like实现 更新时间:2016-04-30 /// <summary> /// 获取查询条件语句 /// &l ...
- SQLServer服务器数据库之间的数据操作(完整版)
分类: 数据库开发技术 ---------------------------------------------------------------------------------- -- Au ...
- GoEasy实现web实时推送过程中的自动补发功能
熟悉GoEasy推送的朋友都知道GoEasy推送实现web实时推送并且能够非常准确稳定地将信息推送到客户端.在后台功能中查看接收信息详情时,可有谁注意到有时候在发送记录里有一个红色的R标志?R又代表的 ...
- Android的动画
一.动画类型 Android的animation由四种类型组成:alpha.scale.translate.rotate XML配置文件中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画 ...
- Entity Framework 利用 Database.SqlQuery<T> 执行存储过程,并返回Output参数值
做个记录: var pCount = this._dataProvider.GetParameter(); pCount.ParameterName = "totalCount"; ...
- 计算两点间的距离-hdu2001
Problem Description 输入两点坐标(X1,Y1),(X2,Y2),计算并输出两点间的距离. Input 输入数据有多组,每组占一行,由4个实数组成,分别表示x1,y1,x2,y2 ...
- Nginx 配置指令的执行顺序(八)
前面我们详细讨论了 rewrite.access 和 content 这三个最为常见的 Nginx 请求处理阶段,在此过程中,也顺便介绍了运行在这三个阶段的众多 Nginx 模块及其配置指令.同时可以 ...
- MFC 操作控件数据
在MFC中有多种获取控件数据的方法 1.GetWindowText()和SetWindowText()函数 ],ch2[],ch3[]; GetDlgItem(IDC_EDIT1)->Get ...
- C++14介绍
C++14标准是 ISO/IEC 14882:2014 Information technology -- Programming languages -- C++ 的简称[1] .在标准正式通过之 ...
- MFC子窗口和父窗口(SetParent,SetOwner)
一.概念和区别 在windows系统中,每个窗口对象都对应有一个数据结构,形成一个list链表.系统的窗口管理器通过这个list来获取窗口信息和管理每个窗口.这个数据结构中有四个数据用来构建list, ...