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_第1张图片jquery 表格自动拆分(方便打印)插件-printTable_第2张图片

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

你可能感兴趣的:(jquery 表格自动拆分(方便打印)插件-printTable)