jquery打印html表格自动分页
table的分页打印

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中的tr4)获取此刻的表格,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>789<script>10function printTable (ro){11var row=18; //默认分页18⾏,demo中参数是3⾏12if(ro != undefined){13 row=ro;14 }15var $tbl = $('table.printTable');16var $tableparent=$tbl.parent();17var $thead = $tbl.find('thead');18// var $tfoot = $tbl.find('tfoot');19var $tbody = $tbl.find('tbody');20var $tbodyTr = $tbody.children();21var $clonefirstTr= $tbodyTr.first().clone();22 $clonefirstTr.children().each(function(){23 $(this).html(' ');24 })25//打空⽩⾏26var tbodyTrlength = $tbodyTr.length;27var addrow = 0;28var remainder =tbodyTrlength%row;29var nulltr="";30if( remainder!=0){31 addrow = row- remainder;32for(var i = 0;i<addrow;i++){33 nulltr+=$clonefirstTr[0].outerHTML;34 }35 }36 $tbody.append(nulltr); //空⽩⾏加⼊到⽂档37//再⼀次获取所有的tr⾏38 $tbodyTr=$tbody.children();39//清空tbody40 $tbody.children().remove();41//再获取整个表格(此时的表格tbody已经没东西了,这样解释是不是有点啰嗦了?)42 $tbl = $('table.printTable');43//创建⼀个⽂档碎⽚(这⾥没有⽤⽂档碎⽚了,jQuery操作字符串更简单)44var fragment='';45//给表格加18⾏tr(主体内容)46 tbodyTrlength = $tbodyTr.length;47var trFG= '';48for(var i =0 ; i<tbodyTrlength; i++){49 trFG+=$tbodyTr.eq(i)[0].outerHTML;50if((i+1)%row==0){51var 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 }6061</script>62</head>63<body>64<button onclick="printTable(3)">调⽤函数按钮</button>6566<table class="printTable" border="1">67<thead>68<tr>69<td>头</td>70<td>头</td>71</tr>72</thead>7374<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>119120<tfoot>121<tr>122<td>tfoot</td> 123<td>tfoot</td> 124</tr>125</tfoot>126</table>127128</body>129</html>。
ipage分页的用法

ipage分页的用法
iPage是一个基于jQuery的分页插件,以下是使用步骤:
1. 引入iPage库。
将iPage库的文件引入到你的网页中。
可以通过将以下代码添加到你的HTML代码中来引入iPage库:
```
<script src=""></script>
```
2. 创建一个分页实例。
需要创建一个iPage实例来管理你的分页。
可以使用以下代码来创建一个实例:
```
var myIpage = new iPage();
```
3. 配置分页参数。
可以设置总页数、每页显示数量、当前页等参数。
例如:
```
(5); //总页数
(10); //每页显示数量
(1); //当前页
```
4. 绑定分页事件。
可以绑定点击页码时的回调函数,可以在此函数中进行数据的异步加载。
例如:
```
(function (page) { // 点击页码时的回调函数
// 在此处进行数据的异步加载
});
```
以上步骤仅供参考,建议访问iPage官网查看更详细的使用说明。
jqueryDataTable实现前后台动态分页

jqueryDataTable实现前后台动态分页整理⽂档,搜刮出⼀个jquery DataTable实现前后台动态分页,稍微整理精简⼀下做下分享。
html代码:<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>测试页⾯</title><meta name="description" content=""><meta name="keywords" content=""><link href="https:///1.10.12/css/jquery.dataTables.min.css" rel="external nofollow" rel="stylesheet"><link href="///ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css" rel="external nofollow" rel="stylesheet"><link href="https:///1.10.12/css/dataTables.bootstrap4.min.css" rel="external nofollow" rel="stylesheet"></head><body><div style="width:50%;height:500px;margin:150px auto ;background-color: #f4cccc"><table id="example" class="display" cellspacing="0" width="100%"><thead><tr><th>Name</th><th>Cellphone</th><th>Position</th><th>Company</th><th>Salary</th></tr></thead><tbody></tbody></table></div><script type="text/javascript" src="///jquery-1.12.3.min.js"></script><script type="text/javascript" src=" ///1.10.12/js/jquery.dataTables.min.js"></script><script type="text/javascript">$(document).ready(function() {refreshDataTable();});var refreshDataTable=function() {var table = $('#example').DataTable({//"ajax":"data/tabledata.json",// "iDisplayLength": 3,"sPaginationType": "full_numbers","bPaginite": true,"bInfo": true,"bSort": true,"processing": false,"serverSide": true,"sAjaxSource": "customize/datatable.php",//这个是请求的地址"fnServerData": retrieveData});function retrieveData(url, aoData, fnCallback) {var data={"data":{"id":"123123","name":"2s",}};$.ajax({url: url,//这个就是请求地址对应sAjaxSourcedata : {"aoData" : JSON.stringify(aoData)},type: 'POST',dataType: 'json',async: false,success: function (result) {//var obj=JSON.parse(result);console.log(result);fnCallback(result);//把返回的数据传给这个⽅法就可以了,datatable会⾃动绑定数据的},error:function(XMLHttpRequest, textStatus, errorThrown) {alert("status:"+XMLHttpRequest.status+",readyState:"+XMLHttpRequest.readyState+",textStatus:"+textStatus);}});}};</script></body></html>PHP代码:<?phpheader('Content-type: text/json');$res = $_POST['aoData'];$sEcho = 0;$iDisplayStart = 0; // 起始索引$iDisplayLength = 0;//分页长度$jsonarray= json_decode($res) ;foreach($jsonarray as $value){if($value->name=="sEcho"){$sEcho=$value->value;}if($value->name=="iDisplayStart"){$iDisplayStart=$value->value;}if($value->name=="iDisplayLength"){$iDisplayLength=$value->value;}}$Array = Array();//此处⽣成50条数据,模仿数据库数据for ($i = 1; $i < 51; $i++) {$d = array($i,$i,$i,$i,$i);Array_push($Array, $d);}$json_data = array ('sEcho'=>$sEcho,'iTotalRecords'=>50,'iTotalDisplayRecords'=>50,'aaData'=>array_slice($Array,$iDisplayStart,$iDisplayLength)); //按照datatable的当前页和每页长度返回json数据 $obj=json_encode($json_data);echo $obj;>效果图:以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。
jquery打印html表格自动分页

竭诚为您提供优质文档/双击可除jquery打印html表格自动分页篇一:html表格及分页html表格及分页1.htmltransitional//en""/tR/xhtml1/dtd/x html1-transitional.dtd">系统事件操作进行中,请耐心等待...■系统事件--%>事件类型:所有事件--%>系统事件操作日志事件事件描述:时间范围:~"onclick="queryclick()"class="mbtn"/> "onclick="exoprtascsv(histevent)"class="mbtn"/>时间事件类型事件描述总共0条第/0页"onclick="pagerjump()"class="pagerctrl"id="jumpbtn" />"onclick="pagerfirst()"class="pagerctrl"id="firstbt n"/>"onclick="pagerperv()"class="pagerctrl"id="prevbtn" />"onclick="pagernext()"class="pagerctrl"id="nextbtn" />"onclick="pagerlast()"class="pagerctrl"id="lastbtn"/>$(".timepicker").datetimepicker().attr("readonly"," readonly");$(".pagerctrl").attr("disabled","disable d");$("#waiting").hide();daystring();2..histeventpage.js///vareventtype="";vardescription="";varstarttime="";varendtime="";//查询按钮,查询分页信息并查出第一页内容functionqueryclick(){//获取查询条件eventtype=$("#eventtype").val();description=$("#description").val();篇二:使用php和jquery制作分页和表格使用php和jquery制作分页和表格如果您已经下载了本站提供的baseproject项目源码,后台中列表页面均可作为示例,其中文章列表页面的功能最为丰富。
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)

jQuery学习笔记——jqGrid的使⽤记录(实现分页、搜索功能)jqGrid 是⼀个⽤来显⽰⽹格数据的jQuery插件,通过使⽤jqGrid可以轻松实现前端页⾯与后台数据的ajax异步通信。
⼀、要引⽤的⽂件要使⽤jqGrid,⾸先页⾯上要引⼊如下css与js⽂件。
1、css<link href="/css/ui.jqgrid.css" rel="stylesheet" type="text/css" />2、js <script src='/Scripts/js/jquery-2.0.3.min.js' type="text/javascript"></script> <script src='/Scripts/js/jqGrid/jquery.jqGrid.min.js' type="text/javascript"></script> <script src='/Scripts/js/jqGrid/i18n/grid.locale-en.js' type="text/javascript"></script>⼆、使⽤要点说明1、获取值(1)、获取单个id获取⾏号,有这种⽅式:var rowid = $("#grid-table").jqGrid("getGridParam", "selrow");但是经过实际验证,这种⽅式不可⾏,当选中⾏,再点击同⼀⾏会出现获取不到⾏号的情况。
最后先在js最外部定义⼀个变量selId,然后使⽤如下代码在选中⾏时赋值:onSelectRow: function (rowid, status) { selId = rowid; //给最外层的selId赋值 }(2)、获取多个选中⾏的idvar ids=$('#gridTable').jqGrid('getGridParam','selarrrow');其输出格式是逗号分隔的id,如:1,2,3,4,5(3)、获得所有⾏的ID数组var ids = $("jqgridtableid").jqGrid('getDataIDs');(4)、获取⾏数据如果想获取选择的⾏的数据,只要传⼊rowId即可,如下:var rowData = $('#gridTable').jqGrid('getRowData',rowId);⽽这个rowData是⼀个对象,如果要获取选择的⾏的这个对象的属性值,如name的值,需如下:var Name= ;(5)、获取单元格数据var celldata = $("jqgridtableid").jqGrid('getCell',id,colnum);(6)、设定⾏选中 //设定选中⾏,可设定多⾏选中: $("jqgridtableid").jqGrid('setSelection',id1); $("jqgridtableid").jqGrid('setSelection',id2);2、⾃定义分页、数据交互何谓⾃定义?就是允许你⽤你⾃⼰喜欢的js对象与后端做数据交互。
jq print 方法

jq print 方法摘要:1.简介jq print方法2.用法示例3.配置和优化4.注意事项5.总结正文:【简介】jq print方法是一种用于在网页上打印特定内容的实用工具。
它允许用户自定义打印内容、样式和布局,使得打印出来的文档更加美观实用。
通过jq print方法,我们可以轻松地将网页上的部分内容转化为打印友好型文档,满足用户打印需求。
【用法示例】要在网页上使用jq print方法,首先需要引入jQuery库。
然后,可以使用以下语法来实现打印功能:```javascript$("selector").print();```其中,`selector`表示需要打印的元素。
例如,如果我们想要打印一个id 为`content`的div内容,可以这样写:```javascript$("#content").print();```【配置和优化】jq print方法提供了许多配置选项,以满足不同需求。
以下是一些常用配置:1.设置打印内容:通过`printElement`函数,可以自定义打印的元素。
```javascript$("#content").print({printElement: $(".print-element")});```2.设置打印样式:通过`printSettings`函数,可以自定义打印时的样式。
```javascript$("#content").print({printSettings: {style: "default", // 打印样式printButton: true, // 是否显示打印按钮printBody: true, // 是否打印整个身体base64: true, // 是否使用base64编码图片image: true, // 是否打印图片cssFile: "path/to/css/file.css" // 自定义样式文件}});```3.设置打印对话框:通过`printDialogSettings`函数,可以自定义打印对话框的配置。
jQuery打印指定区域Html页面并自动分页

jQuery打印指定区域Html页面并自动分页项目中需要用到打印HTML页面,需要指定区域打印,使用jquery.PrintArea.js 插件实现分页,需要的朋友可以参考下最近项目中需要用到打印HTML页面,需要指定区域打印,使用jquery.PrintArea.js 插件用法:$("div#printmain").printArea();但还是会打印DIV后面的内容,这里可以使用CSS控制打印分页<div style="page-break-after: always;"></div>有时用CSS控制分页了但还是会连续打印页面,这里就可以用上PrintArea 插件中的属性参数。
PrintArea部分源码:var modes = { iframe : "iframe", popup : "popup" };var defaults = { mode : modes.iframe,popHt : 800,popWd : 800,popX : 200,popY : 200,popTitle : '',popClose : false ,twoDiv : '', //自已扩展的属性,为满足变态需求pageTitle: ''};//自已扩展的属性,为满足变态需求可以看出插件中定义的属性格式为JSON,下面介绍部分属性modes定义了两个属性,指定popup时会打开新窗口,可以视为打印预览页面,默认为ifra me。
@popClose | [boolean] | (false),true 打印完成后是否开闭预览页面,默认为false(不关闭)。
$("div#printmain").printArea({mode:"popup",popClose:true});这样就可以指定DIV打印了。
HTML 网页打印实现分页打印功能

1.html>2.<head>3.<title>页面打印</title>4.<!--media=print 这个属性在打印时有效有些不想打印出来的分页打印的都可以应用这类样式进行控制在非打印时是无效的(可从打印预览中看到效果)-->5.<style media=print>6. /* 应用这个样式的在打印时隐藏 */7. .noPrint {8. display: none;9. }10.11. /* 应用这个样式的,从那个标签结束开始另算一页,之后在遇到再起一页,以此类推 */12. .page {13. page-break-after: always;14. }15.</style>16.17.<!-- 这个是普通样式 -->18.<style type="text/css">19. .tab td {20. border-bottom: 1 solid #000000;21. border-left: 1 solid #000000;22. border-right: 0 solid #ffffff;23. border-top: 0 solid #ffffff;24. }25.26. .tab {27. border-color: #000000 #000000 #000000 #000000;28. border-style: solid;29. border-top-width: 2px;30. border-right-width: 2px;31. border-bottom-width: 1px;32. border-left-width: 1px;33. }34.35. .hr {36. font-family: "宋体";37. font-size: 9pt;38. }39.</style>40.<script language="JavaScript"type="text/JavaScript">41. var hkey_root, hkey_path, hkey_key;42.hkey_root = "HKEY_CURRENT_USER";43.hkey_path = "//Software//Microsoft//Internet Explorer//PageSetup//";44. //这个是用来设置打印页眉页脚的,你可以设置为空或者其它45. try{46. var RegWsh = new ActiveXObject("WScript.Shell");47.hkey_key="header";48. RegWsh.RegWrite(hkey_root+hkey_path+hkey_key, "&w&b页码,&p/&P");49.hkey_key="footer";50. RegWsh.RegWrite(hkey_root+hkey_path+hkey_key,"");51. }catch(e){52. alert(e.description());53. }54.</script>55.</head>56.<body bgcolor="white">57.<table cellspacing="0"cellpadding="0"width="100%"align="center"border="0">58.<thead class="noPrint">59.<tr>60.<td align="center"colspan="3">61.<center class="NoPrint">62.<OBJECT id=WebBrowser classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0width=0></O BJECT>63.<input type=button value=打印onclick=document.all.WebBrowser.ExecWB(6,1)>64.<input type=button value=直接打印onclick=document.all.WebBrowser.ExecWB(6,6) />65.<input type=button value=页面设置onclick=document.all.WebBrowser.ExecWB(8,1) />66.<input type=button value=打印预览onclick=document.all.WebBrowser.ExecWB(7,1) />67. <!--68.关于这个组件还有其他的用法,列举如下:69. WebBrowser.ExecWB(1,1) 打开70. Web.ExecWB(2,1) 关闭现在所有的IE窗口,并打开一个新窗口71. Web.ExecWB(4,1) 保存网页72. Web.ExecWB(6,1) 打印73. Web.ExecWB(7,1) 打印预览74. Web.ExecWB(8,1) 打印页面设置75. Web.ExecWB(10,1) 查看页面属性76. Web.ExecWB(15,1) 好像是撤销,有待确认77. Web.ExecWB(17,1) 全选78. Web.ExecWB(22,1) 刷新79. Web.ExecWB(45,1) 关闭窗体无提示80. -->81.</center>82.</td>83.</tr>84.</thead>85.<tr>86.<td align="center"colspan="3"style="font-size: 24px">87.<b>报告印章申请表</b>88.</td>89.</tr>90.<tr>91.<td align="left"colspan="2">编号:A002</td>92.<td align="right"></td>93.</tr>94.<tr>95.<td colspan="3">96.<table class="tab"cellSpacing="0"cellPadding="0"width="100%">97.<tr align="center"height="23">98.<td width="10%"height="23"><b>编号</b></td>99.<td width="5%"><b>份数</b></td>100.<td width="12%"><b>项目/级别编号</b></td>101.<td width="12%"><b>单位</b></td>102.<td width="12%"><b>项目名称</b></td>103.<td width="12%"><b>工程地点</b></td>104.<td width="12%"><b>检测项目</b></td>105.<td width="7%"><b>单价</b></td>106.<td width="8%"><b>数量</b></td>107.<td width="10%"><b>总价</b></td>108.</tr>109.<tr style="font-size: 13px"align="c enter"height="23">110.<td>A14785</td>111.<td>5</td>112.<td>A1546/8975</td>113.<td>中国广东广州</td>114.<td>BRT工程</td>115.<td>广州天河</td>116.<td>BRT工程</td>117.<td>¥999999999.99</td>118.<td>20</td>119.<td>20*¥999999999.99</td>120.</tr>121.<tr align="center"height="23"> 122.<td colspan="2">备注</td>123.<td colspan="8"></td>124.</tr>125.</table>126.</td>127.</tr>128.</table>129.<hr class="noprint"width="100%"size="2"/>130.<div class="page"></div>131.<table class="tab"cellSpacing="0"cellPadding="0"w idth="100%">132.<tr align="center"height="23">133.<td width="10%"height="23"><b>编号</b></td>134.<td width="5%"><b>份数</b></td>135.<td width="12%"><b>项目/级别编号</b></td> 136.<td width="12%"><b>单位</b></td>137.<td width="12%"><b>项目名称</b></td>138.<td width="12%"><b>工程地点</b></td>139.<td width="12%"><b>检测项目</b></td>140.<td width="7%"><b>单价</b></td>141.<td width="8%"><b>数量</b></td>142.<td width="10%"><b>总价</b></td>143.</tr>144.<tr style="font-size: 13px"align="center"heigh t="23">145.<td>A14785</td>146.<td>5</td>147.<td>A1546/8975</td>148.<td>中国广东广州</td>149.<td>BRT工程</td>150.<td>广州天河</td>151.<td>BRT工程</td>152.<td>¥999999999.99</td>153.<td>20</td>154.<td>20*¥999999999.99</td>155.</tr>156.<tr align="center"height="23">157.<td colspan="2">备注</td>158.<td colspan="8"></td>159.</tr>160.</table>161.162.<div class="page"></div>163.<table class="tab"cellSpacing="0"cellPadding="0"w idth="100%">164.<tr align="center"height="23">165.<td width="10%"height="23"><b>编号</b></td>166.<td width="5%"><b>份数</b></td>167.<td width="12%"><b>项目/级别编号</b></td> 168.<td width="12%"><b>单位</b></td>169.<td width="12%"><b>项目名称</b></td>170.<td width="12%"><b>工程地点</b></td>171.<td width="12%"><b>检测项目</b></td>172.<td width="7%"><b>单价</b></td>173.<td width="8%"><b>数量</b></td>174.<td width="10%"><b>总价</b></td>175.</tr>176.<tr style="font-size: 13px"align="center"heigh t="23">177.<td>A14785</td>178.<td>5</td>179.<td>A1546/8975</td>180.<td>中国广东广州</td>181.<td>BRT工程</td>182.<td>广州天河</td>183.<td>BRT工程</td>184.<td>¥999999999.99</td> 185.<td>20</td>186.<td>20*¥999999999.99</td> 187.</tr>188.<tr align="center"height="23"> 189.<td colspan="2">备注</td> 190.<td colspan="8"></td> 191.</tr>192.</table>193.194.</body>195.</html>。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
竭诚为您提供优质文档/双击可除jquery打印html表格自动分页篇一:html表格及分页html表格及分页1.htmltransitional//en""/tR/xhtml1/dtd/x html1-transitional.dtd">系统事件操作进行中,请耐心等待...■系统事件--%>事件类型:所有事件--%>系统事件操作日志事件事件描述:时间范围:~"onclick="queryclick()"class="mbtn"/> "onclick="exoprtascsv(histevent)"class="mbtn"/>时间事件类型事件描述总共0条第/0页"onclick="pagerjump()"class="pagerctrl"id="jumpbtn" />"onclick="pagerfirst()"class="pagerctrl"id="firstbt n"/>"onclick="pagerperv()"class="pagerctrl"id="prevbtn" />"onclick="pagernext()"class="pagerctrl"id="nextbtn" />"onclick="pagerlast()"class="pagerctrl"id="lastbtn"/>$(".timepicker").datetimepicker().attr("readonly"," readonly");$(".pagerctrl").attr("disabled","disable d");$("#waiting").hide();daystring();2..histeventpage.js///vareventtype="";vardescription="";varstarttime="";varendtime="";//查询按钮,查询分页信息并查出第一页内容functionqueryclick(){//获取查询条件eventtype=$("#eventtype").val();description=$("#description").val();篇二:使用php和jquery制作分页和表格使用php和jquery制作分页和表格如果您已经下载了本站提供的baseproject项目源码,后台中列表页面均可作为示例,其中文章列表页面的功能最为丰富。
如果您没有下载该源码,相关的js文件可以从获得,示例页面为页面。
以下是后台文章列表页面的截图。
分页和表格功能实例截图分页功能详解分页功能用于当目标数据过多时,为提高页面展示速度采用的一种手段。
本文中的分页功能借用了zendFramework中的zend_paginator对象,分页适配器为zend_paginator_adapter_null。
该适配器也是最简单易用的一个。
工作原理在php端,分页功能的基本参数为记录总数($countRows)、每页显示的记录数($rowsperpage)、当前页码($page默认值为1),页码数量($items指每次在页面上显示多少个页码,建议为单数)。
其他参数可以通过计算得到:1.页码合计($countpages)取不小于$countRows/$rowsperpage的整数;2.起始页码和结束页码的计算方式太长不写了;3.页码列表:从起始页码到结束页码的页码组成的数组,如array(4,5,6,7,8)在html端,必要的参数为php端计算得出的数据,同时需要指定一个用于显示分页信息的html元素。
然后使用jquery根据参数动态生成html并将其插入到指定的html元素中就行了。
php示例代码详解1.2.publicfunctionarticlesaction(){$pagenumber=$this->getRequest()->getparam(page,1);//获取当前页码,如果未指定则设为13.$sortby=$this->getRequest()->getparam(sortby);//获取sortby设置4.if(empty($sortby)||!preg_match(/^[a-z0-9_-]+(asc| desc)$/i,$sortby)){5.//如果sortby为空或者不符合格式要求则使用以下的排序方式6.//注意:一定要进行格式检查,防止sql注入7.$sortby=project_table::getFullycolumnname(article ,id).desc;8.}9.$marticle=newmodel_article();10./*这部分是处理where子句的,和本文关系不大,略过*/11.$wherearray=array(12.`article`.`article_category_id`=>$this->getRequest()->getparam(project_table::getF ullycolumnname(article,article_category_id)),13.`article`.`article_status_id`=>$this->getRequest()->getparam(project_table::getF ullycolumnname(article,article_status_id)),14.);15.$wherestring=;16.foreach($wherearrayas$key=>$value){17.if(!empty($value)){18.if($key==`article`.`article_category_id`-1){19.$wherestring.="and{$key}isnull";20.}else{21.$wherestring.="and{$key}={$value}";22.}23.}24.}25.if(!empty($wherestring)){26.$wherestring=substr($wherestring,strlen(and));27.}else{28.$wherestring=null;29.}30./*以上是处理where子句的*/31.$maxgetRows=project_config::paginatoR_item_count _peR_page;//设置每页显示的记录数量32.$articles=$marticle->getarticles($wherestring,$s ortby,$maxgetRows,($pagenumber-1)*$maxgetRows);//从数据库中读取数据33.$countarticles=project_table::getlastFoundRows() ;//获得符合条件的数据总数35.//如果没有取到任何记录,而且记录总数不为空,说明当前页码超出范围了,所以处理一下36.$articles=$marticle->getarticles($wherestring,$s ortby,$maxgetRows,null);37.$pagenumber=1;38.}39.$pdate=project_datetime::getinstance();//时间处理工具,和本文无关40.foreach($articlesas$key=>$article){41.$articles[$key][project_table::getFullycolumnnam e(article,modified)]=$pdate->getusertimeFromtime($a rticle[project_table::getFullycolumnname(article,mo dified)],true);//把时间戳转换为用户的当地时间,和本文无关42.}$paginator=zend_paginator::factory($countarticles,null);//调用zend提供的分页适配器,参数1是总记录数,参数2是适配器的名字44.$paginator->setcurrentpagenumber($pagenumber);//告诉分页器当前页码45.$pages=$paginator->getpages();//得到了前面提到的所有参数,后面我会打印它,这样你会直观的看到其内容46.$this->view->articles=$articles;47.$this->view->pages=$pages;43.48.//以下处理是为了页面中的下拉选单提供选项数据,和本文关系不大49.if(!$this->getRequest()->ispost()){50.$mparticle=newmapper_article();51.$this->view->elementarticlestatusid=$mparticle->getelement(article_status_id,array(proj ect_mapper::options_nullable=>true,project_mapper:: options_deFault=>));52.$_categories=$marticle->getallowappendarticlearticlecategories(null,null,null,null,true);53.$categories=array(54.$this->view->translate(model_article::no_categoR y)=>-1,55.);56.foreach($_categoriesas$key=>$row){57.$categories[$row[project_table::getFullycolumnname( article_category,name)]]=$row[project_table::getFul lycolumnname(article_category,id)];58.}59.$mparticle=newmapper_article();60.$this->view->elementarticlecategories=$mparticle->getelement(article_category_id,array(pr oject_mapper::options_in_aRRay=>$categories,project _mapper::options_nullable=>true));61.}62.}$pages中的内容我打印了一下,这样更直观。