/**
* 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);

转载于:https://www.cnblogs.com/lenther2002/p/5088938.html

jquery 表格自动拆分(方便打印)插件-printTable相关推荐

  1. jQuery 表格自动增加

    <!DOCTYPE html><html dir="ltr" lang="zh-CN"><head><meta cha ...

  2. excel表格内容拆分_3个动图,教你学会如何让excel表格自动拆分,学会它,小白变大神...

    Hello,大家好,大家工作中有没有遇到自动拆分表格的需求呢?就是将总表按照某个字段自动拆分为多个多表,当然了如果数据还能自动更新就好了,其实这个操作并不难,我们借助power query点点鼠标1分 ...

  3. jquery表格自动补全插件——datagrid

    ①在页面中创建一个或多个表格,设定表头,给每一个th添加一个field属性,属性值与后端数据名字相同 <table>         <thead>             & ...

  4. jQuery表格数据导出成Excel插件

    下载地址 一款能将网页上的Table表格数据导出成Excel文件的插件,这个导出插件使用jQuery代码实现的,很实用的导出Excel插件. dd:

  5. jq jqprint 设置页脚_jquery打印插件jqprint.js使用教程

    最近的项目要使用web前端打印,本来在网上搜索了一下采用的js:window.print()局部打印网页的方法,但是经过实际测试发现兼容性不好,无奈只好再找其他方法,终于被我找到了一款基于jquery ...

  6. html 表格自动排序,jQuery html表格排序插件tablesorter使用方法详解

    tablesort是一款很好用的jQuery表格排序插件. 支持多种数据类型排序,会自动识别表格内容数据类型,使用也非常方便. 使用jQuery tablesort实现html表格方法: 1. 下载j ...

  7. 简单易用的JQuery网页内容打印插件——jQuery.print.js

    1. 官方网址 下载jQuery.print.js.配置参数介绍.官方Demo 2. 简介: jQuery.print是一款简单易容且功能强大的网页内容打印jQuery插件.该网页打印插件可以打印指定 ...

  8. jQuery 表格插件汇总

    本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等.这 ...

  9. jQuery 表格插件

    本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等.这 ...

最新文章

  1. JSP中的EL表达式详细介绍
  2. SparkSQL使用之Thrift JDBC server
  3. details和summary标签
  4. 使用U盘在Mac机上装win8.1系统
  5. nacos1.3.2连接mysql_Nacos 1.3.0版本部署连接mysql 8+
  6. 在树莓派4上安装 .NET Core 3.0 运行时及 SDK
  7. 略读《大教堂与市集》
  8. UpdatePanel的内容中出现自定义多语言运行异常
  9. android两个java文件内容_java – 在1个请求中将多个文件从Android上传...
  10. 【英语学习】【Daily English】U01 Greetings / L03 Have we met before?
  11. Linux下的iscsi(设备的共享服务)
  12. python海龟交易策略_【手把手教你】用Python量化海龟交易法则
  13. Greenplum 数据库一体机硬件配置正式开源
  14. 双屏幕切换成单屏,软件不显示的问题与解决方法(总结全网)
  15. 计算机内码和国际码的转换,汉字机内码、国标码和区位码之间转换关系图
  16. 企业财务报表分析【1】
  17. string.h头文件的简单运用
  18. 用java实现原神自动弹琴(附谱)
  19. Doxygen简介及使用说明
  20. 华脉智联可视化指挥调度系统

热门文章

  1. SQL中触发器实例讲解(转)
  2. 图本检索的Zero-Shot超过CLIP模型!FILIP用细粒度的后期交互获得更好的预训练效率。...
  3. 10倍加速!爱奇艺超分辨模型加速实践
  4. 谷歌 Pixel 4 人像模式拍照算法揭秘
  5. CV Code | 计算机视觉开源周报20191002期
  6. The 2nd AI on Fashion and Textile International Conference 2019
  7. Google CVPR 2019最新成果!用神经架构搜索实现更好的目标检测
  8. 剖析:3D游戏建模的千奇百变,带你快速入门
  9. 端到端半监督目标检测框架Instant-Teaching:
  10. CVPR | BASNet:边缘感知的显著性物体检测