文档章节

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

milin
 milin
发布于 2014/12/15 23:30
字数 813
阅读 87
收藏 3
插件代码:

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

插件运行效果:


附件下载:http://download.csdn.net/detail/afgasdg/5518173

© 著作权归作者所有

milin
粉丝 10
博文 94
码字总数 19598
作品 0
郑州
高级程序员
私信 提问
15款提高表格操作的jQuery插件

table表格由于它的浏览器兼容性和复杂的标签嵌套方式,可以算是添加样式最困难的对象之一了。大多数前端er都把网页中的table标签替换为div,主要就是因为div要比table更容易添加CSS样式。但是...

鉴客
2010/08/12
5.7K
1
jQuery 表格工具集

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

红薯
2010/04/15
9.4K
10
jquery表格

新闻来源:noupe.com 本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行...

长平狐
2012/10/16
386
1
jQuery 表格插件汇总

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

晨曦之光
2012/03/09
321
0
28个有用的表格插件推荐

OSCHINA曾发布过文章“18个最好的 jQuery 表格插件”,今天再提供一份表格插件的长名单。 28个表格插件,列表如下: Table Sorter Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的...

小卒过河
2011/07/01
4.5K
9

没有更多内容

加载失败,请刷新页面

加载更多

抽离css以及公共js

分离css 分离css:为何要把 CSS 文件分离出来,而不是直接一起打包在 JS 中。最主要的原因是我们希望更好地利用缓存。 extract-text-webpack-plugin > 1. 假设我们原本页面的静态资源都打包成...

莫西摩西
43分钟前
1
0
面向对象的7大原则

https://blog.csdn.net/u010355144/article/details/44940171

南桥北木
今天
2
0
Jenkins的配置从节点中默认没有Launch agent via Java Web Start,该如何配置使用

Jenkins的配置从节点中默认没有Launch agent via Java Web Start,如下图所示,而这种启动方式在Windows上是最方便的。 如何设置才能让出来呢? 1:打开"系统管理"——"Configure Global Sec...

shzwork
今天
2
0
BAT面试必问HashMap源码分析

HashMap 简介 HashMap 主要用来存放键值对,它基于哈希表的Map接口实现,是常用的Java集合之一。 JDK1.8 之前 HashMap 由 数组+链表 组成的,数组是 HashMap 的主体,链表则是主要为了解决哈...

别打我会飞
今天
10
0
RISC-V双周简报0x1f:一晚上写个RISC-V处理器玩玩(2018-09-01)

https://cnrv.io/bi-week-rpts/2018-09-01 https://blog.csdn.net/zoomdy/article/details/82914730...

whoisliang
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部