table的分页打印
在工作中,经常有打印报表的需求,一般<tbody>中的<tr>比较多的时候,打印机打印的时候肯定会出去分页,有的客户要求比较高,一张A4纸一定要带上表头和表尾的内容(就是<thead>和<tfoot>中的内容),当然可以控制分页打印样式,把表头和表尾都加上样式,但是实际效果是不是太好,会比较难看,tfoot中的内容和tbody中的内容衔接不上.
后台程序是可以控制输出多少行tr后加上tfoot和thead,但是,页面显示的时候,一个页面会显示多个表头和表尾,效果不够完美,而且后台控制编程是面向过程的.
所有做了一个前台在用户点击打印按钮时,调用函数,把整个表格拆分成多个表格(一个表格打印在一张A4纸上).
从新整理下需求:
1)一个html中的一个table ,打印到A4纸上
2)每张纸上都要有表格的表头和表尾,内容部分的行数固定
3)最后一页,内容部分的输出行数不够了,输出空白行.
(补充下,打印的页边距是通过ScriptX控制的,这里就不细说了)
原理就是:
0)指定要输出的行数(每页纸要输出的tr,这里的tr仅属于tbody)
1)获取html中的整个表格.
2)获取tbody中tr的数量,根据指定的行数,判断是否要在末页输出空白行,
3)抽取出tbody中的所有tr,缓存在变量中,清空页面中tbody中的tr
4)获取此刻的表格,
5)克隆表格,循环添加指定行数的tr到克隆的表格中,克隆表格后面跟一个<div>加上强制分页样式,都缓存在变量中,
6)将变量插入文档,删除原有表格
思路就这样,接下看代码吧,函数是封装好的,可以直接调用,要使用的话,<table>要加一个class代码中的class是.printTable.
这个是一个比较简单的,实际工作中,可以能会有表格的嵌套使用,还要复杂很多,项目中我已经可以实现了,但还没封装好,有空在发布,现在就这个简单的先发上来在说了;
本人新手入行刚3个月多几天,说的对的地方,我改!各位大大大请轻喷,谢了
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="jquery-1.6.1.min.js"></script> 7 8 9 <script> 10 function printTable (ro){ 11 var row=18; //默认分页18行,demo中参数是3行 12 if(ro != undefined){ 13 row=ro; 14 } 15 var $tbl = $('table.printTable'); 16 var $tableparent=$tbl.parent(); 17 var $thead = $tbl.find('thead'); 18 // var $tfoot = $tbl.find('tfoot'); 19 var $tbody = $tbl.find('tbody'); 20 var $tbodyTr = $tbody.children(); 21 var $clonefirstTr= $tbodyTr.first().clone(); 22 $clonefirstTr.children().each(function(){ 23 $(this).html(' '); 24 }) 25 //打空白行 26 var tbodyTrlength = $tbodyTr.length; 27 var addrow = 0; 28 var remainder =tbodyTrlength%row; 29 var nulltr=""; 30 if( remainder!=0){ 31 addrow = row- remainder; 32 for(var i = 0;i<addrow;i++){ 33 nulltr+=$clonefirstTr[0].outerHTML; 34 } 35 } 36 $tbody.append(nulltr); //空白行加入到文档 37 //再一次获取所有的tr行 38 $tbodyTr=$tbody.children(); 39 //清空tbody 40 $tbody.children().remove(); 41 //再获取整个表格(此时的表格tbody已经没东西了,这样解释是不是有点啰嗦了?) 42 $tbl = $('table.printTable'); 43 //创建一个文档碎片(这里没有用文档碎片了,jQuery操作字符串更简单) 44 var fragment=''; 45 //给表格加18行tr(主体内容) 46 tbodyTrlength = $tbodyTr.length; 47 var trFG= ''; 48 for(var i =0 ; i<tbodyTrlength; i++){ 49 trFG+=$tbodyTr.eq(i)[0].outerHTML; 50 if((i+1)%row==0){ 51 var clonetbl = $tbl.clone(); //克隆一个表格 52 clonetbl.find("tbody").append(trFG);//在表格的body中加入内容 53 fragment+=clonetbl[0].outerHTML+"<div style='page-break-after:always;' ><br/></div>"; //把表格加入文档碎片中 54 trFG=''; 55 } 56 } 57 $tbl.before(fragment); 58 $tbl.remove(); 59 } 60 61 </script> 62 </head> 63 <body> 64 <button onclick="printTable(3)">调用函数按钮</button> 65 66 <table class="printTable" border="1"> 67 <thead> 68 <tr> 69 <td>头</td> 70 <td>头</td> 71 </tr> 72 </thead> 73 74 <tbody> 75 <tr> 76 <td>body</td> 77 <td>body</td> 78 </tr> <tr> 79 <td>body</td> 80 <td>body</td> 81 </tr> <tr> 82 <td>body</td> 83 <td>body</td> 84 </tr> <tr> 85 <td>body</td> 86 <td>body</td> 87 </tr> <tr> 88 <td>body</td> 89 <td>body</td> 90 </tr> <tr> 91 <td>body</td> 92 <td>body</td> 93 </tr> <tr> 94 <td>body</td> 95 <td>body</td> 96 </tr> <tr> 97 <td>body</td> 98 <td>body</td> 99 </tr> <tr> 100 <td>body</td> 101 <td>body</td> 102 </tr> <tr> 103 <td>body</td> 104 <td>body</td> 105 </tr> <tr> 106 <td>body</td> 107 <td>body</td> 108 </tr> <tr> 109 <td>body</td> 110 <td>body</td> 111 </tr> <tr> 112 <td>body</td> 113 <td>body</td> 114 </tr> <tr> 115 <td>body</td> 116 <td>body</td> 117 </tr> 118 </tbody> 119 120 <tfoot> 121 <tr> 122 <td>tfoot</td> 123 <td>tfoot</td> 124 </tr> 125 </tfoot> 126 </table> 127 128 </body> 129 </html>
