jquery 表格自动拆分(方便打印)插件-printTable
/**
* jquery 表格打印插件
*
* 作者: LiuJunGuang
* 日期:2013年6月4日
* 分页样式(需要自定义):
* @media print {
* .pageBreak { page-break-after:always; }
* }
* 使用例子:
* $(function(){
* $("#tabContent").printTable({
* mode : "rowNumber",
* header : "#headerInfo",
* footer : "#footerInfo",
* pageNumStyle : "第#p页/共#P页",
* pageNumClass : ".pageNum",
* pageSize : 10
* });
* });
* 注意事项:
* 使用时注意表格中要使用 thead 和 tbody区分出标题头与表格内容,否则可能出现错误
*
* 参数说明:
* options are passed as json (json example: { rowHeight : "rowHeight", header : ".tableHeader",})
*
* {OPTIONS} | [type] | (default), values | Explanation
* ---------------- | --------- | -----------------------------| -----------
* @mode | [string] | ("rowHeight"),rowNumber | 分页模式,按行高分页或按行数分页
* @header | [string] | (".tableHeader") | 页面开始处要添加的内同
* @footer | [string] | (".tableFooter") | 页面结束要添加的内容
* @pageSize | [number] | (30) | 自动分页行数,按行高分页时改参数无效
* @breakClass | [string] | ("pageBreak") | 分页插入符class,需要定义分页样式
* @pageNumStyle | [string] | "#p/#P" | 页码显示样式,#p当前页,#P总页数
* @pageNumClass | [string] | ".pageNumClass" | 页码class样式,用于设值(使用text方法设置)
* @startPage | [number] | (1) | 第一页起始页码
* @pageHeight | [number] | (297) | 页面高度,单位像素
* @topMargin | [number] | (15) | 上边距高度,单位像素
* @bottomMargin | [number] | (15) | 低边距高度,单位像素
*/
(function($) {
var modes = { rowHeight : "rowHeight", rowNumber : "rowNumber" };
//默认参数
var defaults = {
mode : modes.rowHeight,
header : ".tableHeader",
footer : ".tableFooter",
pageSize : 30,
breakClass : "pageBreak",
pageNumStyle : "#p/#P",
pageNumClass : ".pageNumClass",
startPage : 1,
pageHeight : 1230,
topMargin : 50,
bottomMargin : 50
};
var settings = {};//global settings
var rowCount = 0;//行总数
var pageCount = 0;//页总数
var currentPage = 0;//当前页
var $header = null;//表格头
var $content = null;//表格内容
var $footer = null;//表格尾
var $table = null;
var $tbodyTr = null;
$.fn.printTable = function( options ) {
$.extend( settings, defaults, options );
$table = $(this);
$tbodyTr = $table.find("tbody tr");
switch ( settings.mode ){
case modes.rowHeight :
rowHeightPage();//行高分页
break;
case modes.rowNumber :
rowNumberPage();//行数分页
}
};
//获取页总数
$.fn.printTable.getStartPage = function(startPage) {
return getPageStyle(startPage , pageCount);
};
//行高分页
function rowHeightPage(){
var contentHeight = initHeightPage();
getContentColne();
beginPageByHeight(contentHeight);
hidenContent();
}
//行数分页
function rowNumberPage(){
initNumberPage();
getContentColne();
beginPageByNumber();
hidenContent();
}
//按行高分页
function beginPageByHeight(contentHeight){
var totalHeight = 0;
var startLine = 0;
$tbodyTr.each(function(i){
var cHeight = $(this).outerHeight(true);
$(this).height(cHeight);
if((totalHeight + cHeight ) < contentHeight){
totalHeight += cHeight;
if(i == $tbodyTr.length -1){
newPage(i + 1);
}
}else{
newPage(i);
}
});
function newPage(index){
createPage(startLine,index);
currentPage ++;
startLine = index;
totalHeight = 0;
}
}
//初始化高度分页信息
function initHeightPage(contentHeight){
var contentHeight = initContentHeight();
currentPage = 0 + settings.startPage;
pageCount = Math.ceil($table.find("tbody").outerHeight(true)/contentHeight) + settings.startPage - 1;//初始化总页数
rowCount = $tbodyTr.length;//初始化总记录数
return contentHeight;
}
//初始化内容高度
function initContentHeight(){
var headerHeight = $(settings.header).outerHeight(true);
var footerHeight = $(settings.footer).outerHeight(true);
var theadHeight = $table.find("thead").outerHeight(true);
var tableHeight = settings.pageHeight - settings.topMargin - settings.bottomMargin ;
var tbodyHeight = tableHeight - theadHeight- headerHeight - footerHeight;
return tbodyHeight;
}
//初始化分页基本信息
function initNumberPage(){
rowCount = $tbodyTr.length;//初始化总记录数
pageCount = Math.ceil(rowCount/settings.pageSize) + settings.startPage - 1;//初始化总页数
currentPage = 0 + settings.startPage;
}
//开始分页
function beginPageByNumber(){
var startLine = 1;//开始行号
var offsetLine = 0;//偏移行号
for(var i = settings.startPage; i <= pageCount ;i++ ){
currentPage = i;
startLine = settings.pageSize* (currentPage - settings.startPage);
offsetLine = (startLine + settings.pageSize) > rowCount ? rowCount : startLine + settings.pageSize;
createPage(startLine,offsetLine);
};
}
//创建新的一页
function createPage(startLine,offsetLine){
var $pageHeader = $header.clone();
var $pageContent = $content.clone().append(getTrRecord(startLine,offsetLine));
var $pageFooter = $footer.clone();
$pageFooter.find(settings.pageNumClass).text(getPageStyle(currentPage , pageCount));//页码显示格式
if(offsetLine == rowCount){
$table.before($pageHeader).before($pageContent).before($pageFooter);
}else{
$table.before($pageHeader).before($pageContent).before($pageFooter).before(addPageBreak());
}
}
//添加分页符
function addPageBreak(){
return "<div class='"+settings.breakClass+"'></div>";
}
//获取分页样式
function getPageStyle(currentPage , pageCount){
var numStr = settings.pageNumStyle;
numStr = numStr.replace(/#p/g,currentPage);
numStr = numStr.replace(/#P/g,pageCount);
return numStr;
}
//获取记录
function getTrRecord(startLine,offsetLine){
return $tbodyTr.clone().slice(startLine,offsetLine);
}
//获取内容
function getContentColne(){
$header = $(settings.header).clone().removeAttr("id");
$content = $table.clone().find("tbody").remove().end().removeAttr("id");
$footer = $(settings.footer).clone().removeAttr("id");
}
//隐藏原来的数据
function hidenContent(){
$(settings.header).hide();
$table.hide();
$(settings.footer).hide();
}
})(jQuery);
jquery 表格自动拆分(方便打印)插件-printTable的更多相关文章
- jQuery表格自动增加
<!DOCTYPE html> <html dir="ltr" lang="zh-CN"> <head> <meta ...
- 25款顶级的jQuery表格插件
jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...
- asp.net 实现在线打印功能,jQuery打印插件PrintArea实现自动分页
使用的组件:jQuery打印插件PrintArea,有兴趣的可以研究一下. 使用方法略过,这里将介绍如何实现打印多页是可以分页. 现在提供两种方法思路: 1.根据特定的打印机型号和使用的纸张类型,然后 ...
- jQuery 表格插件25
jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...
- Datatables快速入门开发--一款好用的JQuery表格插件
博主是一个java后端程序员小白,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jqu ...
- JQuery表格插件
http://www.datatables.club/example/#styling Datatables快速入门开发--一款好用的JQuery表格插件 博主是一个java后端程序员,前端技术会 ...
- 25个顶级的jQuery表格插件
jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...
- 一款比较强大的jquery表格插件Datatables
Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 链接:http://www.datatables.club/ 本人无聊时发现的一款用 ...
- jQuery简单易用的网页内容打印插件
简要教程 jQuery.print是一款简单易容且功能强大的网页内容打印jQuery插件.该网页打印插件可以打印指定区域的网页元素,可以指定跳过不打印某些元素,还可以打印整个页面内容.并且提供了丰富的 ...
随机推荐
- mysql参照完整性 策略设置之 on update 和 on delete
一.当表中有外键约束的时候参照表中数据的删除和修改违背参照完整性时 可根据以下策略进行处理 1.两条策略设置为cascade的时候 参照表中的数据修改或者删除的时候改表中数据也会被删除 2.两条策略设 ...
- spring MVC 学习(四)---拦截器,视图解析器
1.接口HandlerInterceptor 该接口包含3个方法,分别是preHandle,postHandle,afterCompletion,分别代表着执行前,执行后,执行完成要执行的方法,其中p ...
- linux qt下 QSqlDatabase: QMYSQL driver not loaded
出现上述问题是qt安装目录未包含mysql驱动. 解决方法如下: 1.查看系统是否存在libqsqlmysql.so find / -name libqsqlmysql.so 2.若不存在该文件则安装 ...
- JVM内存四大类型:Heap,Stack,Contant,DirectMemory等
Stack属于栈的区域,属于每条线程私有的. 方法区和本地方法栈有很大的不同,方法区是用Java级别角度做的代码,本地方法栈指向的是C/C++. Java开发,对象就在堆中,一般而言,堆中只有对象. ...
- Yii2 教程 - yii2-redis 扩展详解
该教程已被合并到<Yii2 权威指南中文版>中!Yiichina 教程地址为<yii2-redis 扩展详解>! 一.简介 yii2-redis 扩展为 Yii2 框架提供了 ...
- Python(线程进程2)
新进程的创建都是由一个已经存在的进程执行了一个用于创建进程的系统调用而创建的: 1. 在UNIX中该系统调用是:fork,fork会创建一个与父进程一模一样的副本,二者有相同的存储映像.同样的环境字符 ...
- linux 下安装python3
这篇真的很好 没报错一次通过了 https://www.cnblogs.com/kimyeee/p/7250560.html
- 2017 计蒜之道 初赛 第三场 D. 腾讯狼人杀 (点边都带权的最大密度子图)
点边都带权的最大密度子图,且会有必须选的点. 求\(\frac{\sum w_e}{k*(2n-k)}\)的最大值,其中k为子图点数 设\[h(g) = \sum w_e - g*(2nk-k^2)\ ...
- C#调用小票打印机
using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...
- JavaWeb 如何在web.xml中配置多个servlet
15:34:42 <servlet> <description></description> <display-name>ListMusicServle ...