利用CSS樣式實現分頁打印

用CSS樣式實現分頁打印，其主要應用thead標記、tfoot標記和page-break-after屬性。

（1）thead標記

thead用于設置表格的表頭。

（2）tfoot標記

tfoot用于設置表格的表尾。

（3）page-break-after屬性

page-break-after屬性在打印文檔時發生作用，用于進行分頁打印。但是對于<br>和<hr>對象不起作用。其語法格式如下：

參數說明：

page-break：打印時在樣式控制的對象前后換頁。

after：設置對象后出現頁分隔符。設置為always時，始終在對象之后插入頁分隔符。

auto：需要在對象之后插入頁分隔符時插入。

always：始終在對象之后插入頁分隔符。

avoid：未支持。避免在對象后面插入分隔符。

left：未支持。在對象后面插入頁分隔符，直到它到達一個空白的左頁邊。

right：未支持。在對象后面插入頁分隔符，直到它到達一個空白的右頁邊。

null：空白字符串。取消了分隔符設置。

WebBrowser.ExecWB的完整說明

<OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0></OBJECT>
<input name=Button .Click=document.all.WebBrowser.ExecWB(1,1) type=button value=打開>
<input name=Button .Click=document.all.WebBrowser.ExecWB(2,1) type=button value=關閉所有>
<input name=Button .Click=document.all.WebBrowser.ExecWB(4,1) type=button value=另存為>
<input name=Button .Click=document.all.WebBrowser.ExecWB(6,1) type=button value=打印>
<input name=Button .Click=document.all.WebBrowser.ExecWB(6,6) type=button value=直接打印>
<input name=Button .Click=document.all.WebBrowser.ExecWB(7,1) type=button value=打印預覽>
<input name=Button .Click=document.all.WebBrowser.ExecWB(8,1) type=button value=頁面設置>
<input name=Button .Click=document.all.WebBrowser.ExecWB(10,1) type=button value=屬性>
<input name=Button .Click=document.all.WebBrowser.ExecWB(17,1) type=button value=全選>
<input name=Button .Click=document.all.WebBrowser.ExecWB(22,1) type=button value=刷新>
<input name=Button .Click=document.all.WebBrowser.ExecWB(45,1) type=button value=關閉>

運用CSS樣式實現分頁打印。其具體步驟如下：

（1）編寫用于控制指定內容不打印的CSS樣式，代碼如下。

@media print{
    .bgnoprint{
        background:display:none;
    }
    .noprint{
        display:none
    }
}

（2）應用include命令連接數據源文件，并應用do…while循環語句輸出圖書信息到瀏覽器，并設置好表頭、表尾及打印分頁，關鍵代碼如下：

<?php include "conn/conn.php"; ?>
<table width="99%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="27" align="center" style=" font-size:14px;"><b>圖書信息查詢</b></td>
</tr>
</table>
<table width="98%" border="0" cellpadding="0" cellspacing="1" bgcolor="#000000" bordercolor="#FFFFFF" bordercolordark="#000000" bordercolorlight="#FFFFFF" >
<thead style="display:table-header-group;"> <!--設置表頭-->
<tr bgcolor="#EFEFEF">
<td width="6%" height="20" align="center">編號</td>
<td width="27%" align="center">圖書名稱</td>
<td width="23%" align="center">內容簡介</td>
<td width="8%" align="center">定價</td>
<td width="10%" align="center">作者</td>
<td width="15%" align="center">出版社</td>
<td width="11%" align="center">發行時間</td>
</tr>
</thead>
<!--控制分頁-->
<?php
$sql=mysql_query("select * from tb_book");
$info=mysql_fetch_array($sql);
$row=1;
do{
?>
<tr align="center" <?php if($row==2){ ?>style="page-break-after:always"<?php } ?>>
<td bgcolor="#FFFFFF"><?php echo $info[id];?></td>
<td height="25" align="left" bgcolor="#FFFFFF"> <?php echo $info[bookname];?></td>
<td align="left" bgcolor="#FFFFFF"> <?php echo $info[synopsis];?></td>
<td bgcolor="#FFFFFF"><?php echo $info[price];?></td>
<td bgcolor="#FFFFFF"><?php echo $info[maker];?></td>
<td bgcolor="#FFFFFF"><?php echo $info[publisher];?></td>
<td bgcolor="#FFFFFF"><?php echo $info[issuDate];?></td>
</tr>
<?php
$row++;
}while($info=mysql_fetch_array($sql))
?>
<!--設置表尾-->
<tfoot style="display:table-footer-group; border:none;"><tr><td></td></tr></tfoot>
</table>

（3）建立HTML的object標簽，調用WebBrowser控件，代碼如下：

<object id="Wb" classid="ClSID:8856F961-340A-11D0-A96B-00C04Fd705A2" width="0" height="0">
</object>

（4）建立相關的打印超級鏈接，并調用WebBrowser控件的相應參數實現打印預覽及打印功能，代碼如下：

述

昨天介紹了Oracle分頁實現方案，那么，mysql又是如何實現分頁呢？

參考官網：https://dev.mysql.com/doc/refman/5.7/en/select.html

mysql分頁實現

MySQL中實現分頁查詢：在數據量較小的情況下可使用limit查詢來實現分頁查詢，在數據量大的情況下使用建立主鍵或唯一索引來實現，另外可通過order by對其排序。

The LIMIT clause can be used to constrain the number of rows returned by the SELECT statement. LIMIT takes one or two numeric arguments, which must both be nonnegative integer constants, with these exceptions:

Within prepared statements, LIMIT parameters can be specified using ? placeholder markers.
Within stored programs, LIMIT parameters can be specified using integer-valued routine parameters or local variables.

1、limit分頁實現

先看一下limit語法

SELECT * FROM TABLE
    [ORDER BY {col_name | expr | position}
      [ASC | DESC], ... [WITH ROLLUP]]
    [LIMIT {[offset,] row_count | row_count OFFSET offset}]

LIMIT子句可以被用于強制 SELECT 語句返回指定的記錄數。LIMIT接受一個或兩個數字參數。參數必須是一個整數常量。
如果給定兩個參數，第一個參數指定第一個返回記錄行的偏移量，第二個參數指定返回記錄行的最大數目。初始記錄行的偏移量是 0(而不是 1)。

1.1、傳統實現方式

一般情況下，客戶端通過傳遞 pageNo（頁碼）、pageSize（每頁條數）兩個參數去分頁查詢數據庫中的數據，在數據量較?。ㄔM百/千級）時使用 MySQL自帶的 limit 來解決這個問題

--pageNo：頁碼
--pagesize:每頁顯示的條數
select * from table limit (pageNo-1)*pageSize,pageSize;

1.2、建立主鍵或者唯一索引(高效)

在數據量較小的時候簡單的使用 limit 進行數據分頁在性能上面不會有明顯的緩慢，但是數據量達到了萬級到百萬級 sql語句的性能將會影響數據的返回。這時需要利用主鍵或者唯一索引進行數據分頁；

--pageNo：頁碼
--pagesize:每頁顯示的條數
--假設主鍵或者唯一索引為 t_id
select * from table where t_id > (pageNo-1)*pageSize limit pageSize;

1.3、基于數據再排序

當需要返回的信息為順序或者倒序時，對上面的語句基于數據再排序。order by ASC/DESC 順序或倒序默認為順序

 select * from table where t_id > (pageNo-1)*pageSize order by t_id limit pageSize;

2、查詢顯示行號（實現類似Oracle數據庫的ROWNUM()）

Oracle中有專門的rownum()顯示行號的函數，而MySQL沒有專門的顯示行號函數，但可以通過用@rownum自定義變量顯示行號。

一般實現過程如下：

SELECT 
  (@rownum := @rownum + 1) AS rownum,
  t.* 
FROM
  table t,
  (SELECT @rownum := 0) AS rn

3、實例演示

3.1、環境準備

CREATE TABLE t (
	EMPNO BIGINT ( 4 ) NOT NULL,
	ENAME VARCHAR ( 10 ),
	JOB VARCHAR ( 9 ),
	MGR BIGINT ( 4 ),
	HIREDATE date,
	SAL BIGINT ( 10 ),
	COMM BIGINT ( 10 ),
	DEPTNO BIGINT ( 2 ),
	PRIMARY KEY ( `EMPNO` ) 
) ENGINE = INNODB;
INSERT INTO t VALUES ('7369', 'SMITH', 'CLERK', '7902', '1980-12-17', '800', NULL, '20');
INSERT INTO t VALUES ('7499', 'ALLEN', 'SALESMAN', '7698', '1981-02-20', '1600', '300', '30');
INSERT INTO t VALUES ('7521', 'WARD', 'SALESMAN', '7698', '1981-02-22', '1250', '500', '30');
INSERT INTO t VALUES ('7566', 'JONES', 'MANAGER', '7839', '1981-04-02', '2975', NULL, '20');
INSERT INTO t VALUES ('7654', 'MARTIN', 'SALESMAN', '7698', '1981-09-28', '1250', '1400', '30');
INSERT INTO t VALUES ('7698', 'BLAKE', 'MANAGER', '7839', '1981-05-01', '2850', NULL, '30');
INSERT INTO t VALUES ('7782', 'CLARK', 'MANAGER', '7839', '1981-06-09', '2450', NULL, '10');
INSERT INTO t VALUES ('7788', 'SCOTT', 'ANALYST', '7566', '1987-04-19', '3000', NULL, '20');
INSERT INTO t VALUES ('7839', 'KING', 'PRESIDENT', NULL, '1981-11-17', '5000', NULL, '10');
INSERT INTO t VALUES ('7844', 'TURNER', 'SALESMAN', '7698', '1981-09-08', '1500', '0', '30');
INSERT INTO t VALUES ('7876', 'ADAMS', 'CLERK', '7788', '1987-05-23', '1100', NULL, '20');
INSERT INTO t VALUES ('7900', 'JAMES', 'CLERK', '7698', '1981-12-03', '950', NULL, '30');
INSERT INTO t VALUES ('7902', 'FORD', 'ANALYST', '7566', '1981-12-03', '3000', NULL, '20');
INSERT INTO t VALUES ('7934', 'MILLER', 'CLERK', '7782', '1982-01-23', '1300', NULL, '10');
commit;

3.2、limit分頁

--查詢第一頁，每頁顯示5條數據
select * from t order by empno desc limit (1-1)*5,5;

--查詢第二頁，每頁顯示4條數據
select * from t order by empno desc limit (2-1)*4,4;

3.3、查詢顯示行號

--查詢第二頁，每頁顯示4條數據,并在第一列加上行號
select (@rownum := @rownum + 1) AS rownum,t.* from t,
  (SELECT @rownum := 0) AS rn 
order by t.empno desc 
limit 4,4;

覺得有用的朋友多幫忙轉發哦！后面會分享更多devops和DBA方面的內容，感興趣的朋友可以關注下~

前端都會面臨的一個問題就是分頁，如果是純js分頁也是可以的，只是可能代碼量比較大，所以今天寫一個關于用bootstrap框架分頁的例子，希望以后可以幫助到一些對這方面比較頭疼的碼農。

首先需要明確的一點是，哪些數據是需要分頁的，單從數據顯示上其實是沒有必要分頁的，因為頁面是可以顯示的出來的，但是作為一個相對比較合格的前端，你首先要考慮的不僅僅是這個功能是不是可以實現，而是要考慮用戶體驗是不是好的，在既有功能上如果可以更多的考慮用戶體驗的問題，那么才可以算是一個相對比較合格的前端工程師。

先看渲染圖：

這個是一個項目中的例子，今天就做以這個為例子，做一下

首先我們將需要用的數據準備好（這個一般是ajax請求到的數據，現在我們直接放到一個js里面，加載js的時候直接取出數據）

var testboke = {
 "code":200,
 "message":null,
 "data":{
 "total":17,//總條數
 "size":10,//分頁大小-默認為0
 "pages":2,//總頁數
 "current":1,//當前頁數
 "records":[//author-riverLethe-double-slash-note數據部分
 {
 "id":17,//項目id
 "userName":"Night夜",//發起人名稱
 "companyName":"康佰裕",//發起人公司名稱
 "ptypeName":"13",//發起項目類別
 "pask":"13",
 "pname":"13",
 "pdesc":"13"
 },
 {
 "id":16,
 "userName":"Night夜",
 "companyName":"康佰裕",
 "ptypeName":"12",
 "pask":"12",
 "pname":"12",
 "pdesc":"12"
 },
 {
 "id":15,
 "userName":"BB機",
 "companyName":"北京電影",
 "ptypeName":"11",
 "pask":"11",
 "pname":"11",
 "pdesc":"11"
 },
 {
 "id":14,
 "userName":"BB機",
 "companyName":"北京電影",
 "ptypeName":"9",
 "pask":"9",
 "pname":"9",
 "pdesc":"9"
 },
 {
 "id":13,
 "userName":"BB機",
 "companyName":"北京電影",
 "ptypeName":"7",
 "pask":"7",
 "pname":"7",
 "pdesc":"7"
 },
 {
 "id":12,
 "userName":"Night夜",
 "companyName":"康佰裕",
 "ptypeName":"6",
 "pask":"6",
 "pname":"6",
 "pdesc":"6"
 },
 {
 "id":11,
 "userName":"BB機",
 "companyName":"北京電影",
 "ptypeName":"5",
 "pask":"5",
 "pname":"5",
 "pdesc":"5"
 },
 {
 "id":10,
 "userName":"Night夜",
 "companyName":"康佰裕",
 "ptypeName":"4",
 "pask":"4",
 "pname":"4",
 "pdesc":"4"
 },
 {
 "id":9,
 "userName":"BB機",
 "companyName":"北京電影",
 "ptypeName":"3",
 "pask":"3",
 "pname":"3",
 "pdesc":"3"
 },
 {
 "id":8,
 "userName":"Night夜",
 "companyName":"康佰裕",
 "ptypeName":"2",
 "pask":"2",
 "pname":"2",
 "pdesc":"2"
 }
 ]
 }
}

接下來畫頁面的表格：

<body>
			<div class="templatemo-content col-1 light-gray-bg">
				<div class="templatemo-top-nav-container">
					<div class="row">
						<nav class="templatemo-top-nav col-lg-12 col-md-12">
							<li>
								<a href="">發起項目列表管理</a>
							</li>
						</nav>
					</div>
				</div>
				<!--正文部分-->
				<div style="background: #E8E8E8;height: 60rem;">
 
					<div class="templatemo-content-container">
						<div class="templatemo-content-widget no-padding">
							<!--表頭-->
							<div class="panel-heading templatemo-position-relative">
								<h2 class="text-uppercase">發起項目列表</h2></div>
							<div class="panel panel-default table-responsive" id="mainContent">
 
							</div>
						</div>
					</div>
				</div>
 
				<div class="pagination-wrap" id="callBackPager">
				</div>
				<footer class="text-right">
					<p>Copyright ? 2018 Company Name | Designed by
						<a  target="_parent">csdn</a>
					</p>
				</footer>	
	</body>

這個時候也頁面上是沒有任何的元素的，因為我們需要的是將頁面上的表格用js動態的畫出來，這樣才可以實現取出來的數據是可以分頁的，但是畫表格的前提是你要可以拿到數據對不對，所以接下來應該是拿數據，而不是急著畫表格，因為沒有數據的時候你的表格即使是畫出來了，也是顯示不出來的，那么我們開始拿數據：

我們寫一個函數取數據：

/*將數據取出來*/
		function data(curr, limit) {
				//console.log("tot:"+totalCount)
						/*拿到總數據*/
				totalCount = testboke.data.total; //取出來的是數據總量
				dataLIst = testboke.data.records; // 將數據放到一個數組里面（dataLIst 還未聲明，莫著急）
				createTable(curr, limit, totalCount);
 console.log("tot:"+totalCount)
		}

拿到數據以后怎么做，分頁，是的，不是急著將數據放到表格里面，先分頁，ok我們加載分頁的js（bootstrap的分頁js）

		<link href="../../css/font-awesome.min.css" rel="stylesheet" />
		<link href="../../css/bootstrap.min.css" rel="stylesheet" />
		<link href="../../css/templatemo-style.css" rel="stylesheet" />
		<link href="../../css/layui/css/layui.css" rel="stylesheet" />
		
		<script src="../../js/bootstrap.min.js" type="text/javascript"></script>
		<script src="../../js/jquery-1.8.3-min.js" type="text/javascript"></script>
		<script src="../../js/jquery.min.js" type="text/javascript"></script>
		<script src="../../js/extendPagination.js" type="text/javascript"></script>
		<script src="../../js/layui/lay/dest/layui.all.js" type="text/javascript"></script>
		<!--引如測試數據的js-->
		<script src="../../js/testcode.js" type="text/javascript"></script>

上面的這些js，css都可以去cdn上面找到，除了testcode，在最上面，就是我們加載數據的js。

下面就是將分頁的代碼寫上：

var currPage = 1;
		var totalCount;
		var dataLIst = [];
		window.onload = function() {
			/*取到總條數*/
			/*每頁顯示多少條 10條*/
			var limit = 10;
			data(currPage, limit)
			//console.log(totalCount)
			createTable(1, limit, totalCount);
			$('#callBackPager').extendPagination({
				totalCount: totalCount,
				limit: limit,
				callback: function(curr, limit, totalCount) {
					data(curr, limit)
				}
			});
		}

加載以后的效果是這樣的：

這個時候就是已經基本將數據處理好了，只是沒有將數據放進去，最后我們將數據放進去就可以了，（我的寫法不建議借鑒，很多現成的循環畫表格的方法，我是原生的拼接字符串寫的，不嫌麻煩的可以自己拼一下，畢竟不管是什么框架，最底層的還是這樣的實現原理）

在線咨詢

上一篇：簡單網頁設計模板html
下一篇：iOS 9 字體的介紹與使用

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。