利用CSS樣式實(shí)現(xiàn)分頁打印

用CSS樣式實(shí)現(xiàn)分頁打印，其主要應(yīng)用thead標(biāo)記、tfoot標(biāo)記和page-break-after屬性。

（1）thead標(biāo)記

thead用于設(shè)置表格的表頭。

（2）tfoot標(biāo)記

tfoot用于設(shè)置表格的表尾。

（3）page-break-after屬性

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

參數(shù)說明：

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

after：設(shè)置對象后出現(xiàn)頁分隔符。設(shè)置為always時(shí)，始終在對象之后插入頁分隔符。

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

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

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

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

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

null：空白字符串。取消了分隔符設(shè)置。

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=關(guān)閉所有>
<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=打印預(yù)覽>
<input name=Button .Click=document.all.WebBrowser.ExecWB(8,1) type=button value=頁面設(shè)置>
<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=關(guān)閉>

運(yùn)用CSS樣式實(shí)現(xiàn)分頁打印。其具體步驟如下：

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

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

（2）應(yīng)用include命令連接數(shù)據(jù)源文件，并應(yīng)用do…while循環(huán)語句輸出圖書信息到瀏覽器，并設(shè)置好表頭、表尾及打印分頁，關(guān)鍵代碼如下：

<?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;"> <!--設(shè)置表頭-->
<tr bgcolor="#EFEFEF">
<td width="6%" height="20" align="center">編號(hào)</td>
<td width="27%" align="center">圖書名稱</td>
<td width="23%" align="center">內(nèi)容簡介</td>
<td width="8%" align="center">定價(jià)</td>
<td width="10%" align="center">作者</td>
<td width="15%" align="center">出版社</td>
<td width="11%" align="center">發(fā)行時(shí)間</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))
?>
<!--設(shè)置表尾-->
<tfoot style="display:table-footer-group; border:none;"><tr><td></td></tr></tfoot>
</table>

（3）建立HTML的object標(biāo)簽，調(diào)用WebBrowser控件，代碼如下：

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

（4）建立相關(guān)的打印超級鏈接，并調(diào)用WebBrowser控件的相應(yīng)參數(shù)實(shí)現(xiàn)打印預(yù)覽及打印功能，代碼如下：

述

昨天介紹了Oracle分頁實(shí)現(xiàn)方案，那么，mysql又是如何實(shí)現(xiàn)分頁呢？

參考官網(wǎng)：https://dev.mysql.com/doc/refman/5.7/en/select.html

mysql分頁實(shí)現(xiàn)

MySQL中實(shí)現(xiàn)分頁查詢：在數(shù)據(jù)量較小的情況下可使用limit查詢來實(shí)現(xiàn)分頁查詢，在數(shù)據(jù)量大的情況下使用建立主鍵或唯一索引來實(shí)現(xiàn)，另外可通過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分頁實(shí)現(xiàn)

先看一下limit語法

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

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

1.1、傳統(tǒng)實(shí)現(xiàn)方式

一般情況下，客戶端通過傳遞 pageNo（頁碼）、pageSize（每頁條數(shù)）兩個(gè)參數(shù)去分頁查詢數(shù)據(jù)庫中的數(shù)據(jù)，在數(shù)據(jù)量較小（元組百/千級）時(shí)使用 MySQL自帶的 limit 來解決這個(gè)問題

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

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

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

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

1.3、基于數(shù)據(jù)再排序

當(dāng)需要返回的信息為順序或者倒序時(shí)，對上面的語句基于數(shù)據(jù)再排序。order by ASC/DESC 順序或倒序默認(rèn)為順序

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

2、查詢顯示行號(hào)（實(shí)現(xiàn)類似Oracle數(shù)據(jù)庫的ROWNUM()）

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

一般實(shí)現(xiàn)過程如下：

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

3、實(shí)例演示

3.1、環(huán)境準(zhǔn)備

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條數(shù)據(jù)
select * from t order by empno desc limit (1-1)*5,5;

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

3.3、查詢顯示行號(hào)

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

覺得有用的朋友多幫忙轉(zhuǎn)發(fā)哦！后面會(huì)分享更多devops和DBA方面的內(nèi)容，感興趣的朋友可以關(guān)注下~

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

首先需要明確的一點(diǎn)是，哪些數(shù)據(jù)是需要分頁的，單從數(shù)據(jù)顯示上其實(shí)是沒有必要分頁的，因?yàn)轫撁媸强梢燥@示的出來的，但是作為一個(gè)相對比較合格的前端，你首先要考慮的不僅僅是這個(gè)功能是不是可以實(shí)現(xiàn)，而是要考慮用戶體驗(yàn)是不是好的，在既有功能上如果可以更多的考慮用戶體驗(yàn)的問題，那么才可以算是一個(gè)相對比較合格的前端工程師。

先看渲染圖：

這個(gè)是一個(gè)項(xiàng)目中的例子，今天就做以這個(gè)為例子，做一下

首先我們將需要用的數(shù)據(jù)準(zhǔn)備好（這個(gè)一般是ajax請求到的數(shù)據(jù)，現(xiàn)在我們直接放到一個(gè)js里面，加載js的時(shí)候直接取出數(shù)據(jù)）

var testboke = {
 "code":200,
 "message":null,
 "data":{
 "total":17,//總條數(shù)
 "size":10,//分頁大小-默認(rèn)為0
 "pages":2,//總頁數(shù)
 "current":1,//當(dāng)前頁數(shù)
 "records":[//author-riverLethe-double-slash-note數(shù)據(jù)部分
 {
 "id":17,//項(xiàng)目id
 "userName":"Night夜",//發(fā)起人名稱
 "companyName":"康佰裕",//發(fā)起人公司名稱
 "ptypeName":"13",//發(fā)起項(xiàng)目類別
 "pask":"13",
 "pname":"13",
 "pdesc":"13"
 },
 {
 "id":16,
 "userName":"Night夜",
 "companyName":"康佰裕",
 "ptypeName":"12",
 "pask":"12",
 "pname":"12",
 "pdesc":"12"
 },
 {
 "id":15,
 "userName":"BB機(jī)",
 "companyName":"北京電影",
 "ptypeName":"11",
 "pask":"11",
 "pname":"11",
 "pdesc":"11"
 },
 {
 "id":14,
 "userName":"BB機(jī)",
 "companyName":"北京電影",
 "ptypeName":"9",
 "pask":"9",
 "pname":"9",
 "pdesc":"9"
 },
 {
 "id":13,
 "userName":"BB機(jī)",
 "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機(jī)",
 "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機(jī)",
 "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="">發(fā)起項(xiàng)目列表管理</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">發(fā)起項(xiàng)目列表</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>

這個(gè)時(shí)候也頁面上是沒有任何的元素的，因?yàn)槲覀冃枰氖菍㈨撁嫔系谋砀裼胘s動(dòng)態(tài)的畫出來，這樣才可以實(shí)現(xiàn)取出來的數(shù)據(jù)是可以分頁的，但是畫表格的前提是你要可以拿到數(shù)據(jù)對不對，所以接下來應(yīng)該是拿數(shù)據(jù)，而不是急著畫表格，因?yàn)闆]有數(shù)據(jù)的時(shí)候你的表格即使是畫出來了，也是顯示不出來的，那么我們開始拿數(shù)據(jù)：

我們寫一個(gè)函數(shù)取數(shù)據(jù)：

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

拿到數(shù)據(jù)以后怎么做，分頁，是的，不是急著將數(shù)據(jù)放到表格里面，先分頁，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>
		<!--引如測試數(shù)據(jù)的js-->
		<script src="../../js/testcode.js" type="text/javascript"></script>

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

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

var currPage = 1;
		var totalCount;
		var dataLIst = [];
		window.onload = function() {
			/*取到總條數(shù)*/
			/*每頁顯示多少條 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)
				}
			});
		}

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

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

在線咨詢

上一篇：簡單網(wǎng)頁設(shè)計(jì)模板html
下一篇：iOS 9 字體的介紹與使用

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。