jquery 表格自动拆分（方便打印）插件-printTable

插件代码：

[javascript]  view plain copy

1. /** 
2.  * jquery 表格打印插件 
3.  * 
4.  * 作者： LiuJunGuang 
5.  * 日期：2013年6月4日 
6.  * 分页样式(需要自定义)： 
7.  * @media print { 
8.  *  .pageBreak { page-break-after:always; } 
9.  * }  
10.  * 使用例子： 
11.  *  $(function(){ 
12.  *      $("#tabContent").printTable({ 
13.  *       mode          : "rowNumber", 
14.  *       header        : "#headerInfo", 
15.  *       footer        : "#footerInfo", 
16.  *       pageNumStyle  : "第#p页/共#P页", 
17.  *       pageNumClass  : ".pageNum", 
18.  *       pageSize      : 10 
19.  *      }); 
20.  *   }); 
21.  *  注意事项： 
22.  *      使用时注意表格中要使用 thead 和 tbody区分出标题头与表格内容，否则可能出现错误 
23.  *  
24.  * 参数说明： 
25.  *  options are passed as json (json example: { rowHeight : "rowHeight", header : ".tableHeader",}) 
26.  * 
27.  *  {OPTIONS}        | [type]    | (default), values            | Explanation 
28.  *  ---------------- | --------- | -----------------------------| ----------- 
29.  *  @mode            | [string]  | ("rowHeight"),rowNumber      | 分页模式，按行高分页或按行数分页 
30.  *  @header          | [string]  | (".tableHeader")             | 页面开始处要添加的内同 
31.  *  @footer          | [string]  | (".tableFooter")             | 页面结束要添加的内容 
32.  *  @pageSize        | [number]  | (30)                         | 自动分页行数，按行高分页时改参数无效 
33.  *  @breakClass      | [string]  | ("pageBreak")                  | 分页插入符class,需要定义分页样式 
34.  *  @pageNumStyle    | [string]  | "#p/#P"                      | 页码显示样式，#p当前页，#P总页数 
35.  *  @pageNumClass    | [string]  | ".pageNumClass"              | 页码class样式，用于设值(使用text方法设置)  
36.  *  @startPage       | [number]  | (1)                          | 第一页起始页码 
37.  *  @pageHeight      | [number]  | (297)                        | 页面高度,单位像素 
38.  *  @topMargin       | [number]  | (15)                         | 上边距高度，单位像素 
39.  *  @bottomMargin    | [number]  | (15)                         | 低边距高度，单位像素 
40.  */  
41. (function($) {  
42.     var modes = { rowHeight : "rowHeight", rowNumber : "rowNumber" };  
43.     //默认参数  
44.      var defaults = {   
45.              mode          : modes.rowHeight,  
46.              header        : ".tableHeader",  
47.              footer        : ".tableFooter",  
48.              pageSize      : 30,  
49.              breakClass    : "pageBreak",  
50.              pageNumStyle  : "#p/#P",  
51.              pageNumClass  : ".pageNumClass",  
52.              startPage     : 1,  
53.              pageHeight    : 1230,  
54.              topMargin     : 50,  
55.              bottomMargin  : 50  
56.          };  
57.      var settings = {};//global settings  
58.      var rowCount = 0;//行总数  
59.      var pageCount = 0;//页总数  
60.      var currentPage = 0;//当前页  
61.      var $header = null;//表格头  
62.      var $content = null;//表格内容  
63.      var $footer = null;//表格尾  
64.      var $table = null;  
65.      var $tbodyTr = null;  
66.     $.fn.printTable = function( options ) {  
67.         $.extend( settings, defaults, options );  
68.         $table = $(this);  
69.         $tbodyTr = $table.find("tbody tr");  
70.         switch ( settings.mode ){  
71.             case modes.rowHeight :  
72.                 rowHeightPage();//行高分页  
73.                 break;  
74.             case modes.rowNumber :  
75.                 rowNumberPage();//行数分页  
76.         }  
77.     };  
78.     //获取页总数  
79.     $.fn.printTable.getStartPage = function(startPage) {  
80.         return getPageStyle(startPage , pageCount);  
81.     };  
82.     //行高分页  
83.     function rowHeightPage(){  
84.         var contentHeight =  initHeightPage();  
85.         getContentColne();  
86.         beginPageByHeight(contentHeight);  
87.         hidenContent();  
88.     }  
89.       
90.       
91.     //行数分页  
92.     function rowNumberPage(){  
93.         initNumberPage();  
94.         getContentColne();  
95.         beginPageByNumber();  
96.         hidenContent();  
97.     }  
98.       
99.     //按行高分页  
100.     function beginPageByHeight(contentHeight){  
101.         var totalHeight = 0;  
102.         var startLine = 0;  
103.         $tbodyTr.each(function(i){  
104.             var cHeight = $(this).outerHeight(true);  
105.             $(this).height(cHeight);  
106.             if((totalHeight + cHeight ) < contentHeight){  
107.                 totalHeight += cHeight;  
108.                 if(i == $tbodyTr.length -1){  
109.                     newPage(i + 1);  
110.                 }  
111.             }else{  
112.                 newPage(i);  
113.             }  
114.         });  
115.         function newPage(index){  
116.             createPage(startLine,index);  
117.             currentPage ++;  
118.             startLine = index;  
119.             totalHeight = 0;  
120.         }  
121.     }  
122.       
123.     //初始化高度分页信息  
124.     function initHeightPage(contentHeight){  
125.         var contentHeight = initContentHeight();  
126.         currentPage = 0 + settings.startPage;  
127.         pageCount = Math.ceil($table.find("tbody").outerHeight(true)/contentHeight) + settings.startPage - 1;//初始化总页数  
128.         rowCount = $tbodyTr.length;//初始化总记录数  
129.         return contentHeight;  
130.     }  
131.       
132.       
133.     //初始化内容高度  
134.     function initContentHeight(){  
135.         var headerHeight = $(settings.header).outerHeight(true);  
136.         var footerHeight = $(settings.footer).outerHeight(true);  
137.         var theadHeight = $table.find("thead").outerHeight(true);  
138.         var tableHeight =  settings.pageHeight - settings.topMargin - settings.bottomMargin ;  
139.         var tbodyHeight =  tableHeight - theadHeight- headerHeight - footerHeight;  
140.         return tbodyHeight;  
141.     }  
142.     //初始化分页基本信息  
143.     function initNumberPage(){  
144.         rowCount = $tbodyTr.length;//初始化总记录数  
145.         pageCount =  Math.ceil(rowCount/settings.pageSize) + settings.startPage - 1;//初始化总页数  
146.         currentPage = 0 + settings.startPage;  
147.     }  
148.       
149.     //开始分页  
150.     function beginPageByNumber(){  
151.         var startLine = 1;//开始行号  
152.         var offsetLine = 0;//偏移行号  
153.         for(var i = settings.startPage; i <= pageCount  ;i++ ){  
154.             currentPage = i;  
155.             startLine = settings.pageSize* (currentPage - settings.startPage);  
156.             offsetLine = (startLine + settings.pageSize) > rowCount ? rowCount : startLine + settings.pageSize;  
157.             createPage(startLine,offsetLine);  
158.         };  
159.     }  
160.      //创建新的一页  
161.     function createPage(startLine,offsetLine){  
162.         var $pageHeader = $header.clone();  
163.         var $pageContent = $content.clone().append(getTrRecord(startLine,offsetLine));  
164.         var $pageFooter = $footer.clone();  
165.         $pageFooter.find(settings.pageNumClass).text(getPageStyle(currentPage , pageCount));//页码显示格式  
166.         if(offsetLine == rowCount){  
167.             $table.before($pageHeader).before($pageContent).before($pageFooter);  
168.         }else{  
169.             $table.before($pageHeader).before($pageContent).before($pageFooter).before(addPageBreak());  
170.         }  
171.     }  
172.       
173.     //添加分页符  
174.     function addPageBreak(){  
175.         return "<div class='"+settings.breakClass+"'></div>";  
176.     }  
177.       
178.     //获取分页样式  
179.     function getPageStyle(currentPage , pageCount){  
180.         var numStr = settings.pageNumStyle;  
181.          numStr = numStr.replace(/#p/g,currentPage);  
182.          numStr = numStr.replace(/#P/g,pageCount);  
183.          return numStr;  
184.     }  
185.       
186.     //获取记录  
187.     function getTrRecord(startLine,offsetLine){  
188.         return $tbodyTr.clone().slice(startLine,offsetLine);  
189.     }  
190.     //获取内容  
191.     function getContentColne(){  
192.         $header = $(settings.header).clone().removeAttr("id");  
193.         $content = $table.clone().find("tbody").remove().end().removeAttr("id");  
194.         $footer = $(settings.footer).clone().removeAttr("id");  
195.     }  
196.     //隐藏原来的数据  
197.     function hidenContent(){  
198.         $(settings.header).hide();  
199.         $table.hide();  
200.         $(settings.footer).hide();  
201.     }  
202. })(jQuery);      

插件运行效果：

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