利用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（每页条数）两个参数去分页查询数据库中的数据，在数据量较小（元组百/千级）时使用 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 href="http://www.csdn.com" 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小时内与您取得联系。