html table 自动 换页,jQuery自动分页打印表格(HTMLtable),可以强制换页

1

2

3

4

5

6 (function() {7 window.print();8 })();9

10

11 *12 {

13 margin:0;

14 padding:0;

15 }

16 body17 {

18 font-family:Verdana, Geneva, sans-serif;

19 font-size:12px;

20 width:210mm;

21 text-align:center;

22 }

23

24 a25 {

26 text-decoration:none;

27 }

28

29 .bold30 {

31 font-weight:bold;

32 }

33

34 ul, li35 {

36 list-style:none;

37 }

38

39 img40 {

41 border:none;

42 }

43

44 #print-content45 {

46 width:98%;

47 margin:10px auto;

48 }

49

50 #print-content h151 {

52 font-size:24px;

53 text-align:center;

54 }

55

56 .floatLeft57 {

58 float:left;

59 }

60 .floatLeft5061 {

62 float:left;

63 margin-left:50px;

64 }

65 .floatRight66 {

67 float:right;

68 }

69

70 .headInfo71 {

72 margin:5px auto;

73 height:16px;

74 }

75

76 table77 {

78 border-collapse:collapse;

79 width:100%;

80 border:1px solid #000;

81 }

82

83 .tableTopBorder_384 {

85 border-top:0px solid #000;

86 }

87

88 td, th89 {

90 border:1px solid #000;

91 text-align:center;

92 padding:3px 5px;

93 }

94

95 .signatureArea96 {

97 height:25px;

98 line-height:25px;

99 }

100 .signatureArea .firstSpan101 {

102 margin-right:200px;

103 }

104 #print-content .header .titleArea105 {

106 height:50px;

107 position:relative;

108 }

109 #print-content .header h1110 {

111 padding-top:10px;

112 }

113 .printTm114 {

115 position:absolute;

116 left:0px;

117 top:0px;

118 }

119 .contractTable td120 {

121 text-align:left;

122 }

123 .contractTable th124 {

125 font-weight:bold;

126 }

127 .printInput128 {

129 width:99%;

130 border:none;

131 background:none;

132 }

133 .font24134 {

135 font-size:24px;

136 }

137 .font20138 {

139 font-size:20px;

140 }

141 .width200142 {

143 width:200px;

144 }

145 .width180146 {

147 width:180px;

148 }

149 .btn150 {

151 cursor:pointer;

152 padding:2px 10px;

153 margin:0px 10px;

154 }

155 @media print156 {

157 .pageBreak158 {159 page-break-after:always; /*强制换页的关键*/

160 }

161 .noPrint162 {

163 display:none;

164 }

165 }166

167

168

169

170

171

172

173 订单表头

174

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 JavaScript 或者 jQuery 实现 HTML 表格的分页显示。具体实现方法如下: 1. 在 HTML 中添加一个表格和一个分页器的容器: ```html <table id="myTable"> <!-- 表格内容 --> </table> <div id="pagination"></div> ``` 2. 在 JavaScript 中定义每页显示的行数和当前页码: ```javascript var rowsPerPage = 10; // 每页显示的行数 var currentPage = 1; // 当前页码 ``` 3. 编写一个函数来根据当前页码和每页显示的行数来显示表格的某一页: ```javascript function showTablePage(page) { var startIndex = (page - 1) * rowsPerPage; var endIndex = startIndex + rowsPerPage; $('#myTable tbody tr').hide(); // 隐藏所有行 $('#myTable tbody tr').slice(startIndex, endIndex).show(); // 显示当前页的行 } ``` 4. 编写一个函数来生成分页器: ```javascript function generatePagination() { var numRows = $('#myTable tbody tr').length; var numPages = Math.ceil(numRows / rowsPerPage); var paginationHtml = ''; for (var i = 1; i <= numPages; i++) { paginationHtml += '<a href="#" class="page-link" data-page="' + i + '">' + i + '</a>'; } $('#pagination').html(paginationHtml); } ``` 5. 在页面加载完成后调用 `showTablePage` 和 `generatePagination` 函数,并且为分页器中的每个链接添加点击事件: ```javascript $(document).ready(function() { showTablePage(currentPage); generatePagination(); $('#pagination').on('click', '.page-link', function(event) { event.preventDefault(); currentPage = $(this).data('page'); showTablePage(currentPage); }); }); ``` 这样就可以实现 HTML 表格的分页显示了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值