jquery打印html表格自动分页
Jquery简单分页实现方法
Jquery简单分页实现⽅法本⽂实例讲述了Jquery简单分页实现⽅法。
分享给⼤家供⼤家参考。
具体如下:js代码:function dolistpage(pagerow,pagenum,rowcount,pagecount){$("#pagemsg").html("每页显⽰"+pagerow+"条,当前" + pagenum + "/" +pagecount + "页 共" +rowcount + "条"); if (pagenum == 1) {$("#fpbtn").attr("disabled", true);$("#rpbtn").attr("disabled", true);}else {$("#fpbtn").removeAttr("disabled");$("#rpbtn").removeAttr("disabled");}if (pagenum == pagecount) {$("#npbtn").attr("disabled", true);$("#lpbtn").attr("disabled", true);}else {$("#npbtn").removeAttr("disabled");$("#lpbtn").removeAttr("disabled");}$("#fpbtn").click(function(){loadtpage(1);});$("#rpbtn").click(function(){loadtpage(pagenum - 1);});$("#npbtn").click(function(){if ((pagenum + 1) >= pagecount)loadtpage(pagecount);elseloadtpage(pagenum + 1);});$("#lpbtn").click(function(){loadtpage(pagecount);});$("#gpbtn").click(function(){var tzys = $("#gpinput").val();var re = /^[1-9]+[0-9]*$/;if (tzys == null || tzys == undefined || tzys == '') {alert("请输⼊跳转页数!");$("#gpinput").focus();return;}if (!re.test(tzys)) {alert("请输⼊正确跳转页数!");$("#gpinput").focus();return;}if (tzys > pagecount)tzys = pagecount;if (tzys <= 0)tzys = 1;loadtpage(tzys);});$("#gpinput").val(pagenum);}HTML代码:<table><tfoot><tr><td colspan="11"><span class="water-table-listbtn"></span><span class="water-table-page"><span id="pagemsg" class="water-table-pagemsg">当前0/0页</span><input type="button" id="fpbtn" value="⾸页"/><input type="button" id="rpbtn" value="上页"/><input type="button" id="npbtn" value="下页"/><input type="button" id="lpbtn" value="尾页"/><span id="pagemsg" class="water-table-pagemsg">跳转<input type="text" id="gpinput" size="3" value="0"/>页 </span><input type="button" id="gpbtn" value="跳转"/></span></td></tr></tfoot></table>希望本⽂所述对⼤家的jquery程序设计有所帮助。
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对象与后端做数据交互。
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打印了。
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项目源码,后台中列表页面均可作为示例,其中文章列表页面的功能最为丰富。
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>。
html页面以及表格数据打印的实现
$iframe.appendTo("body"); var doc = $iframe[0].contentWindow.document; }
if (opt.importCSS) {
if ($("link[media=print]").length > 0) {
$("link[media=print]").each( function() { doc.write("<link type='text/css' rel='stylesheet' href='" + $(this).attr("href") + "' media='print' />");
至此,问题应该是解决了,页面也可以正常打印。
3、 强 大 的 打 印 功 能 jatoolsPrinter
据说很强大,不过没有用过,网上可以找到一些教程可以学习。
以上内容代表个人观点,仅供参考,不喜勿喷。。。
if (opt.operaSupport && $.browser.opera) {
var tab = window.open("","jqPrint-preview"); tab.document.open();
jQuery实现的分页插件完整示例
jQuery实现的分页插件完整⽰例本⽂实例讲述了jQuery实现的分页插件。
分享给⼤家供⼤家参考,具体如下:呈现html⽂件<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script src="引⼊⼀个jquery⽂件,这⾥就不提供了"></script><link rel="stylesheet" href="引⼊下边提供的css⽂件" rel="external nofollow" ></head><body><div id="pages" class="devidePage" ></div></body><script>var pages=10; //计算出总页数(⼀定要是5的倍数)function getData(num){/*当前页数*/var currentPageNum = num;/*取数据*/$.ajax({type: "post",url: url, /*请求的servlet的地址*/data: {"currentPageNum":currentPageNum},cache: false,async : false,dataType: "json",success: function (data ,textStatus, jqXHR){if("true"==data.flag){setData(data.data);}else{console.log("不合法!错误信息如下:"+data.errorMsg);}},error:function (XMLHttpRequest, textStatus, errorThrown) {console.log("请求失败!");}});}function setData(data){/*放数据*/}</script><script src="引⼊下边提供的js⽂件"></script></html>css⽂件@charset "UTF-8";/*分页所在的div*/.devidePage{margin-top:300px;margin-left: 400px;height: 50px;width: 800px;/* background: gray; */}/*显⽰页数的div*/.pages{float:left;margin-left:2px;height:50px;width:50px;background: #EEEEEE;text-align:center;line-height:50px;cursor:pointer;}/*⾸页*/.theFirstPage{float:left;margin-left:2px;height:50px;width:50px;background: #EEEEEE;text-align:center;line-height:50px;cursor:pointer;}/*末页*/.theLastPage{float:left;margin-left:2px;height:50px;width:50px;background: #EEEEEE;text-align:center;line-height:50px;cursor:pointer;}/*上⼀页*/.prePage{float:left;margin-left:2px;height:50px;width:50px;background: #EEEEEE;text-align:center;line-height:50px;cursor:pointer;}/*下⼀页*/.nextPage{float:left;margin-left:2px;height:50px;width:50px;background: #EEEEEE;text-align:center;line-height:50px;cursor:pointer;}/*当前页数*/.currentPage{float:left;margin-left:2px;height:50px;width:100px;background: #EEEEEE;text-align:center;line-height:50px;}/*总页数*/.pageNums{float:left;margin-left:2px;height:50px;width:100px;background: #EEEEEE;text-align:center;line-height:50px;}/*输⼊页数*/.jump{float:left;margin-left:2px;height:48px;width:50px;border:0.5px solid #EEEEEE; }/*跳转*/.jumpClick{float:left;margin-left:2px;height:50px;width:50px;background: #EEEEEE;text-align:center;line-height:50px;cursor:pointer;}js⽂件/*** 侠 2018-8-15*/function loadAll() {var theFirstPage = "<div class=\"theFirstPage\" οnclick=\"theFirstPage()\">⾸页</div>";var prePage = "<div class=\"prePage\" οnclick=\"prePage()\">上⼀页</div>";var pagess = "<div id=\"page_1\" class=\"pages\" οnclick=\"changePage(this.id)\">1</div>" + "<div id=\"page_2\" class=\"pages\" οnclick=\"changePage(this.id)\">2</div>"+ "<div id=\"page_3\" class=\"pages\" οnclick=\"changePage(this.id)\">3</div>"+ "<div id=\"page_4\" class=\"pages\" οnclick=\"changePage(this.id)\">4</div>"+ "<div id=\"page_5\" class=\"pages\" οnclick=\"changePage(this.id)\">5</div>";var nextPage = "<div class=\"nextPage\" οnclick=\"nextPage()\">下⼀页</div>";var theLastPage = "<div class=\"theLastPage\" οnclick=\"theLastPage()\">末页</div>";var currentPages = "<div id=\"currentPage\" class=\"currentPage\">第1页</div>";var pageNums = "<div id=\"pageNums\" class=\"pageNums\">共" + pages+ "页</div>";var jump = "<input id=\"jump\" type=\"text\" class=\"jump\" "+"οnkeyup=\"(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)\"" +" οnblur=\"this.v();\">";var jumpClick = "<div class=\"jumpClick\" οnclick=\"jump()\">跳转</div>";$("#pages").html(theFirstPage +prePage + pagess + nextPage + theLastPage + currentPages + pageNums + jump+ jumpClick);}loadAll();function defultBackground() {$("#page_1").css("background", "#66b2ff"); //配置选中颜⾊}defultBackground();function changeBackground() {$(".pages").css("background", "#EEEEEE"); //配置默认颜⾊for (var i = 0; i < 5; i++) {if ($("#page_" + (i + 1)).text() == $("#currentPage").text().split("第")[1].split("页")[0]) {$("#page_" + (i + 1)).css("background", "#66b2ff"); //配置选中颜⾊break;}}}function theFirstPage(){$('#currentPage').html("第" + 1 + "页");$("#page_1").html(1);$("#page_2").html(2);$("#page_3").html(3);$("#page_4").html(4);$("#page_5").html(5);changeBackground();getData(getCurrentPageNum());}function theLastPage(){$('#currentPage').html("第" + pages + "页");$("#page_1").html(pages-4);$("#page_2").html(pages-3);$("#page_3").html(pages-2);$("#page_4").html(pages-1);$("#page_5").html(pages);changeBackground();getData(getCurrentPageNum());}function changePage(id) {var pagenum = parseInt($("#" + id).text()) - 1;$('#currentPage').html("第" + $("#" + id).text() + "页");if ((id.split("_")[1] == 1) && (parseInt($("#" + id).text()) > 1)) {$("#page_1").html(parseInt($("#page_1").text()) - 1);$("#page_2").html(parseInt($("#page_2").text()) - 1);$("#page_3").html(parseInt($("#page_3").text()) - 1);$("#page_4").html(parseInt($("#page_4").text()) - 1);$("#page_5").html(parseInt($("#page_5").text()) - 1);}if ((id.split("_")[1] == 5) && (parseInt($("#" + id).text()) < pages)) {$("#page_1").html(parseInt($("#page_1").text()) + 1);$("#page_2").html(parseInt($("#page_2").text()) + 1);$("#page_3").html(parseInt($("#page_3").text()) + 1);$("#page_4").html(parseInt($("#page_4").text()) + 1);$("#page_5").html(parseInt($("#page_5").text()) + 1);}changeBackground();getData(getCurrentPageNum());}function prePage() {var currentPageNumStr = $("#currentPage").text().split("第")[1].split("页")[0]; var currentPageNum = parseInt(currentPageNumStr);if (currentPageNum > 1) {var toPageNum = currentPageNum - 1;$("#currentPage").html("第" + toPageNum + "页");if ((currentPageNum > 1) && ($("#page_1").text() != 1)) {$("#page_1").html(parseInt($("#page_1").text()) - 1);$("#page_2").html(parseInt($("#page_2").text()) - 1);$("#page_3").html(parseInt($("#page_3").text()) - 1);$("#page_4").html(parseInt($("#page_4").text()) - 1);$("#page_5").html(parseInt($("#page_5").text()) - 1);}changeBackground();getData(getCurrentPageNum());} else {}}function nextPage() {var currentPageNumStr = $("#currentPage").text().split("第")[1].split("页")[0]; var currentPageNum = parseInt(currentPageNumStr);if (currentPageNum < pages) {var toPageNum = currentPageNum + 1;$("#currentPage").html("第" + toPageNum + "页");if (currentPageNum >= 5 && ($("#page_5").text() != pages)) {$("#page_1").html(parseInt($("#page_1").text()) + 1);$("#page_2").html(parseInt($("#page_2").text()) + 1);$("#page_3").html(parseInt($("#page_3").text()) + 1);$("#page_4").html(parseInt($("#page_4").text()) + 1);$("#page_5").html(parseInt($("#page_5").text()) + 1);}changeBackground();getData(getCurrentPageNum());} else {}}function jump() {var numstr = $("#jump").val();var num = parseInt(numstr);if ((num < 1) || (num > pages)) {alert("输⼊不合法");$("#jump").val(1);} else {$("#currentPage").html("第" + num + "页");if (num >= 5) {$("#page_5").html(num);$("#page_4").html(num - 1);$("#page_3").html(num - 2);$("#page_2").html(num - 3);$("#page_1").html(num - 4);} else {if (num = 4) {$("#page_5").html(num + 1);$("#page_4").html(num);$("#page_3").html(num - 1);$("#page_2").html(num - 2);$("#page_1").html(num - 3);}if (num = 3) {$("#page_5").html(num + 2);$("#page_4").html(num + 1);$("#page_3").html(num);$("#page_2").html(num - 1);$("#page_1").html(num - 2);}if (num = 2) {$("#page_5").html(num + 3);$("#page_4").html(num + 2);$("#page_3").html(num + 1);$("#page_2").html(num);$("#page_1").html(num - 1);}if (num = 1) {$("#page_5").html(num + 4);$("#page_4").html(num + 3);$("#page_3").html(num + 2);$("#page_2").html(num + 1);$("#page_1").html(num);}}changeBackground();getData(getCurrentPageNum());}}function getCurrentPageNum(){return parseInt( $("#currentPage").text().split("第")[1].split("页")[0] );}更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家jQuery程序设计有所帮助。
jquery实现的分页显示功能示例
jquery实现的分页显⽰功能⽰例本⽂实例讲述了jquery实现的分页显⽰功能。
分享给⼤家供⼤家参考,具体如下:我们在显⽰⽂章列表的时候,通常需要分页显⽰。
⼀种⽅式是通过SQL查询的limit进⾏分页,即只查询该页⾯的数据。
另外⼀种⽅式是查询出所有的数据,传递给前段,然后⽤jquery控制只显⽰我们想看到的分页。
html代码<div class="am-g"><div class="am-u-sm-12" id="listTag"></div></div>js代码$(function(){showPage(1);});function showPage(page){$.ajax({type:"GET",url:"<{$urlParent}>/newsManageList?cid=all",dataType:"json",success:function(data){var newsTotalNum = data.length; //新闻记录的总条数var pageNum = Math.ceil(newsTotalNum/<{$newsPageNum}>); //分页的总页数var content = ' <form class="am-form" id="listContainer">' +'<table class="am-table am-table-striped am-table-hover table-main" id="newsList">' +'<thead>' +'<tr>' +'<th class="table-id">ID</th><th class="table-title">标题</th><th class="table-type">类别</th><th class="table-author am-hide-sm-only">作者</th><th class="table-date am-hide-sm-only">修改⽇期</th><th class="table-set">操作</th> ' + '</tr>' +'</thead>' +'<tbody>';for(var i=((page-1)*<{$newsPageNum}>);i<(page*<{$newsPageNum}>)&&i<newsTotalNum;i++){content += '<tr>' +'<td>'+(i+1)+'</td>' +'<td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+data[i].title+'</a></td>'+'<td>'+data[i].name+'</td>' +'<td class="am-hide-sm-only">'+data[i].author+'</td>' +'<td class="am-hide-sm-only">'+data[i].time+'</td>' +'<td>' +'<div class="am-btn-toolbar"><div class="am-btn-group am-btn-group-xs">' +'<a href="<{$urlParent}>/newsUpdate?id='+data[i].id+'>" rel="external nofollow" class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</a> ' +'<a href="<{$urlParent}>/newsDel?id='+data[i].id+'>" rel="external nofollow" class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</a> ' +'</div></div>' +'</td>' +'</tr>';}content += '</tbody></table>' +'<div class="am-cf">' +'共 '+newsTotalNum+' 条记录 / '+pageNum+'页' +'<div class="am-fr">' +'<ul class="am-pagination" id="page">';//判断前⾯是否还有页⾯if(page == 1){content += '<li class="am-disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >«</a></li>';}else{content += '<li><a href="javascript:showPage('+(page-1)+')" rel="external nofollow" >«</a></li>';}for(var i=1;i<=pageNum;i++){if(i == page){content += '<li class="am-active"><a href="javascript:showPage('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';}else{content += '<li><a href="javascript:showPage('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';}}//判断后⾯是否还有页⾯if(page == pageNum){content += '<li class="am-disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >»</a></li>';}else{content += '<li><a href="javascript:showPage('+(page+1)+')" rel="external nofollow" >»</a></li>';}content += '</ul>' +'</div>' +'</div><hr>' +'</form>';$("#listTag").empty();$("#listTag").append(content);}});}显⽰效果:更多关于jQuery相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》及《》希望本⽂所述对⼤家jQuery程序设计有所帮助。
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)需求分析 1)需要⾸页,末页功能 2)有点击查看上⼀页,下⼀页功能 3)页码到当前可视页码最后⼀页刷新页⾯实现思路也是分为三部分处理 1)点击⾸页,末页直接显⽰第⼀页或者最后⼀页内容,当前页⾯为第1页或者最后⼀页。
隐藏⾸页或者末页按钮。
demo 显⽰截图 ⾸页状态和末页状态代码执⾏结果截图 2)点击可视页码截图 3)点击上⼀页或者下⼀页,,需要刷新页码状态时截图,昨天表⽰当前页码为7,右图是点击上⼀页,刷新页码时的状态代码参数说明<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script><script src="data/data.js" type="text/javascript"></script><script src="js/sendAjax.js" type="text/javascript"></script><script src="js/page.js" type="text/javascript"></script><script>/* 初始化页⾯ */var initTotalPageNum = 11;$("#ui-page").paging({pageSize:5,totalPage:initTotalPageNum});</script>为了区分清楚,所以把每⼀个⽂件都分开写了。
data.js //是⽤json模拟的后台数据.sendAjax.js //是模拟的ajax请求后台数据的⽂件page.js //是封装的⽣成页码的功能initTotalPageNum //模拟的后台传⼊的数据总页码pageSize //⾃定义参数,可以定义可视区域代码,当前demo。
用jQuery和jTemplates插件实现客户端分页的表格展现
一直以来觉得用JSON和JavaScript在客户端绑定数据给一个表格或者Grid是件很麻烦的事情。
Microsoft Ajax提供了类似Sys.Date.DataTable和Sys.Dat.DataView这样的类来帮助实现客户端绑定,也可以用for循环来动态构建表格,但这些都显得很麻烦而且很不灵活。
jQuery的jTemplates插件实现了一种灵活的方式来控制显示,它允许我们定义好一个显示模板,jQuery在展现数据时根据选择的模板来动态生成。
这就类似于中的ItemTemplate,也和XSLT 有些类似。
通过这样的方式,你可以很容易的在客户端通过自定义模板以很灵活的方式展现列表数据。
jQuery官方网站给jTemplates的定义是:jTemplates is a template engine 100% in JavaScript.更多的信息可以参考/。
接下来我们实现一个小例子来演示如何使用jTemplate去构建一个RSS阅读器。
创建RSS阅读器RSS源通常都位于另外的domain中,而在AJAX中浏览器通常禁止cross-domain的访问,在这里,为了避开这个问题我们可以在服务端去取得数据。
通常我们可以将这些方法做成WebMethod方法放到WebServices中,但这里我们可以将这些方法放到页面的cs文件中。
需要注意的是,这个方法必须被声明为Static 方法,而且要以WebMethod标注。
这样做的目的是,只有在标注为WebMethod,客户端才能正常访问这个方法。
而Static标记标识了这个方法不与任何这个页面的实例相关,而是而这个页面本身相关,对于任何一个实例而言都是相同的。
所以在你调用的时候,你不需要与任何页面类的实例相关。
在上边的方法中设定了RSS的地址,并通过LINQ to XML来取得我们想要的属性。
Skip和Take函数联合起来实现了一个分页的功能。
通过jQuery调用Page MethodjQuery.Ajax方法实现了用Ajax的方式来请求一个页面并设定回调函数来处理相应状态和结果。
jqGridjqGrid分页参数+条件查询
jqGridjqGrid分页参数+条件查询HTML<div class="row"><div class="col-sm-20"><form id="formSearch" class="form-horizontal"><div class="form-group" style="margin-top:15px"><label class="control-label col-sm-1" style="margin-left: 20px;" for="GOODS_ID">商品ID</label><div class="col-sm-2"><input type="text" class="form-control" id="GOODS_ID" name="GOODS_ID"></div><label class="control-label col-sm-1" style="width: 120px" for="GOODS_NAM">商品名称</label><div class="col-sm-2"><input type="text" class="form-control" id="GOODS_NAM"></div><div class="col-sm-1" style="text-align:center;"><button type="button" id="find_btn" class="btn btn-primary">查询</button></div></div></form><div class="ibox-content"><div class="jqGrid_wrapper"><table id="table_list_2"></table><div id="pager_list_2" style="width: 100%"></div></div></div></div></div>table_list_2 数据显⽰的地⽅pager_list_2 表格下⾯的分页参数js1/* -----------------------------加载表数据开始 -------------------------------- */2 $(document).ready(function(){3 $.jgrid.defaults.styleUI="Bootstrap";4 $("#table_list_2").jqGrid({5 height:434,autowidth:true, shrinkToFit:true,/* autoScroll: false, *//*forceFit: true, */6 colNames:["商品ID","商品名称","商品单价","库存","上架⽇期","上架时间","商品描述","操作 "],7 colModel:[{name:"GOODS_ID",index:"GOODS_ID",autowidth:true,align:"center"},8 {name:"GOODS_NAM",index:"GOODS_NAM",autowidth:true,align:"center"},9 {name:"GOODS_PRICE",index:"GOODS_PRICE",autowidth:true,align:"center"},10 {name:"G_STOCK",index:"G_STOCK",autowidth:true,align:"center"},11 {name:"UP_SHELVES_DAT",index:"UP_SHELVES_DAT",autowidth:true,align:"center"},12 {name:"UP_SHELVES_TIM",index:"UP_SHELVES_TIM",autowidth:true,align:"center"},13 {name:"G_DESC",index:"G_DESC",autowidth:true,align:"center"},14 {name:"edit",index:"edit",autowidth:true,align:"center"}15 ],16 pager:"#pager_list_2",17 viewrecords:true,hidegrid:false,18 url:"<%=path %>/terminal/findGoodInfo",19 datatype:'json',20 rownumbers: true,21 rowNum : 10,22 rowList : [ 10, 15,30 ],23 jsonReader: {24 root:"dataList", page:"currPage", total:"totalpages", // 很重要定义了后台分页参数的名字。
jquery的flexgrid的分页
最近要写一个分页的功能,找了很多的ajax分页资料,都觉得不是很好,本来想用ext的,可是觉得速度有点慢,在加上公司明确要求用jquery+json 实现分页,没办法,后来发现jquery的flexgrid的分页还不错。
就花了点时间写了个。
java 代码:@Controllerpublic class InfoIssueAction extends PBaseAction {public InfoIssueAction(){};@AutowiredInfoIssueService infoIssueService;List rows=new ArrayList();protected int rp;protected int page=1;protected int total;@SuppressWarnings("unchecked")public String showInfoIssue(){int startIndex = (page - 1) * rp; //计算查询开始数据下标total=infoIssueService.getAllInfoIssue().size();List list=infoIssueService.getInfoIssue(startIndex, rp);for (Iterator iterator = list.iterator(); iterator.hasNext();) {InfoIssue infoissue = (InfoIssue) iterator.next();Map cellMap = new HashMap();cellMap.put("issueid", infoissue.getIssueid());cellMap.put("cell", new Object[] {infoissue.getIssueid(),infoissue.getCaption(),infoissue.getAttribute(),infoissue.getMaketop(),infoissue.getIssued()}); rows.add(cellMap);}return "listSuccess";}@JSON(name="rows")public List getRows() {return rows;}public void setRows(List rows) {this.rows = rows;}public int getRp() {return rp;}public void setRp(int rp) {this.rp = rp;}public int getPage() {return page;}public void setPage(int page) {this.page = page;}public int getTotal() {return total;}public void setTotal(int total) {this.total = total;}}jsp代码:需要导入文件,:<link rel="stylesheet" type="text/css" href="grid/css/flexigrid/flexigrid.css"></link><script type="text/javascript" src="page/js/jquery.js"></script><script type="text/javascript" src="page/grid/flexigrid.js"></script><div class="bborderx"><table id="flex1" style="display:none"></table></div>js代码:$("#flex1").flexigrid({url: 'infoIssue/InfoIssue!show.action',dataType: 'json',colModel : [{display: '编号', name : 'issueid', width : 60, sortable : true, align: 'center'}, {display: '标题', name : 'caption', width : 120, sortable : true, align: 'left'}, {display: '是否置顶', name : 'maketop', width : 120, sortable : true, align: 'left'},{display: '是否发布', name : 'issued', width : 120, sortable : true, align: 'left'}],buttons : [{name: '增加', bclass: 'add', onpress : test},{name: '删除', bclass: 'delete', onpress : test},{separator: true}],searchitems : [{display: '标题', name : 'caption', isdefault: true}],sortname: "issueid",sortorder: "asc",usepager: true,title: '新闻发布 ',useRp: true,rp: 1,showTableToggleBtn: true,width: 600,height: 300});function test(com,grid){if (com=='删除'){confirm('是否删除这 ' + $('.trSelected',grid).length + ' 条记录吗?')}else if (com=='增加'){alert('增加一条!');}}现在比较主流的技术,在视图层所使用的表格控件,本来是打算使用功能比较强大的dhtmlxgrid的,但是在这个表格控件的样式不好定义,使用默认的样式和我想要的UI样式不协调,最后决定使用jquery的一个插件表格flexigrid,在集成和使用的过程中遇到了一些问题,实在让我郁闷得很,但最终还是一一解决了.在些做一个小结.有不对的地方希望各位大虾不要拍砖.对于struts2和spring+hibernate的集成没什么好说的网上有好多这方面的资料,在些就不讲解了.只讲一下如何使用json传输数据.在stuts2中使用json传输数据,需要使用到一个struts2的插件jsonplugin,在网上下载后,直接考到类路径下面就可以了,需要在struts2的配置sturts.xml文件里中里修改一下如下:1, <package name="luanmadAjaxTree" extends="json-default" >//包要继承这个,因为jsonplugin自己带了一个配置文件struts-plugin.xml,里面继承了struts-default 包,文件如下:<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE struts PUBLIC"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN""/dtds/struts-2.0.dtd"><struts><package name="json-default" extends="struts-default"><result-types><result-type name="json"class="com.googlecode.jsonplugin.JSONResult"/></result-types><interceptors><interceptor name="json" class="com.googlecode.jsonplugin.JSONInterceptor"/></interceptors></package></struts>2, 修改action的返回值类型,当使用这个插件以后,可以不返回任何视图,直接返回json数据.交由js处理<action name="demo" class="demo" method="list" ><result type="json"></result></action>后台基本配置好了,下面就是对前台的一个整合下载jquery和flexigrid包含到页面,注意顺序,先jquery.js在flexigrid.js.表格初如化1,定义表格容器,对flexigrid是需要有个表格容器才能显示的;<table id="flexigrid"></table>2,初始化<script>$(document).ready(function(){$("#grid").flexigrid({url: "demo.action",dataType: 'json',colModel : [{display: '编号', name : 'id', width : 20, sortable : true, align: 'center'},{display: '姓名, name : 'name', width : 180, sortable : true, align: 'left'}, {display: '生日', name : 'bathday', width : 60, sortable : true, align: 'left'}, {display: '年龄, name : 'age', width : 60, sortable : true, align: 'left'}],sortname: "id",sortorder: "desc",usepager: true,title: '表头名称',useRp: false,rp: 10,showTableToggleBtn: true,procmsg: '正在加载数据,请稍等...'</script>还有许多参数,具体作用如下:1. height: 200, //flexigrid插件的高度,单位为px2. width: ‘auto’, //宽度值,auto表示根据每列的宽度自动计算3. striped: true, //是否显示斑纹效果,默认是奇偶交互的形式4. novstripe: false,5. minwidth: 30, //列的最小宽度6. minheight: 80, //列的最小高度7. resizable: true, //是否可伸缩8. url: false, //ajax方式对应的url地址9. method: ‘POST’, // 数据发送方式10. dataType: ‘xml’, // 数据加载的类型11. errormsg: ‘Connection Error’,//错误提升信息12. usepager: false, //是否分页13. nowrap: true, //是否不换行14. page: 1, //默认当前页15. total: 1, //总页面数16. useRp: true, //是否可以动态设置每页显示的结果数17. rp: 15, // 每页默认的结果数18. rpOptions: [10,15,20,25,40],//可选择设定的每页结果数19. title: false,//是否包含标题20. pagestat: ‘Displaying {from} to {to} of {total} items’,//显示当前页和总页面的样式21. procmsg: ‘Processing, please wait …’,//正在处理的提示信息22. query: ”,//搜索查询的条件23. qtype: ”,//搜索查询的类别24. nomsg: ‘No items’,//无结果的提示信息25. minColToggle: 1, //minimum allowed column to be hidden26. showToggleBtn: true, //show or hide column toggle popup27. hideOnSubmit: true,//隐藏提交28. autoload: true,//自动加载29. blockOpacity: 0.5,//透明度设置30. onToggleCol: false,//当在行之间转换时31. onChangeSort: false,//当改变排序时32. onSuccess: false,//成功后执行33. onSubmit: false // 调用自定义的计算函数下面就是最主要的一点,把返回的json格式的数据填到表格里后台业务代码我就不写了,这里主要讲一下返回的json格式,前几天就是因为返回的格式不对,表格里老是显示不出来数据,郁闷得很.flexigrid要求的返回格式,{"total":111, //数据总数"page":4, //页码(第几页)"rows":[{"id":"1","cell":["a","b","c","e"]},{"id":"2","cell":["a","b","c","e"]},{"id":"3","cell":["a","b","c","e"]},{"id":"4","cell":["a","b","c","e"]},]}格式一定要按照上面的来,要不然就是显示不出来,如果json格式是自己转换的话,但是不难,问题是,我们使用了插件,插件会自动帮我们转换,但是按照一般的来处理就会导致转换出来的格式不对,我在这里说一下.几种类型的转成json后的返回值:map{"map名":{}}转换时会自动在前面加上一个map后面才是值{"map":{"id":2,"age":22,"name":"zhang","bathday":"2009-08-09"}}list{"list名":{}}同上{"list":[{"age":12,"bathday":"2009-10-11","id":1,"name":"deng"},{"age":22,"bathd ay":"2009-08-09","id":2,"name":"zhang"}]}javaBean{"bean名":{}}同上{"dean":{"age":12,"bathday":"2009-10-11","id":1,"name":"deng"}}直接返变量{"":"","":""}{"age":22,"bathday":"2009-08-09","id":2,"name":"zhang"}从上面几种返回格式,我们就可以去构造flexigrid所需要的数据格式了{"total":111, //数据总数"page":4, //页码(第几页)"rows":[{"id":"1","cell":["a","b","c","e"]},{"id":"2","cell":["a","b","c","e"]},{"id":"3","cell":["a","b","c","e"]},{"id":"4","cell":["a","b","c","e"]},]}里面有变量的返回类型,有list的返回类型,有map的返回类型构造private bean//这是你的bean类private total;private page;private Map map=new HashMap()private List rows=new ArrayList();//这里有一个List返回,所以名字起成rows生成相应的get和set 方法map.put("id","1");//对应"id":"1","map.put("cell",new Object{bean.getA(),bean.getB()......})//对应cell":["a","b","c","e"]rows.add(map);//对应"rows":[{"id":"1","cell":["a","b","c","e"]},{"id":"2","cell":["a","b","c","e"]},{"id":"3","cell":["a","b","c","e"]},{"id":"4","cell":["a","b","c","e"]},]}total="100""total":111, //数据总数pate="2"//"page":4, //页码(第几页)这样就可以构造出正确的数据格式。
Html表格及分页
Html表格及分页1.Html<%@Page Language="C#"AutoEventWireup="true"CodeBehind="HistEventPage.aspx.cs"Inherit s="Web.HistEventPage" %><!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head runat="server"><meta http-equiv="X-UA-Compatible"content="IE=EmulateIE8"/><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><title>系统事件</title><script src="Script/jquery1.7.2.min.js"type="text/javascript"></script><script src="Script/histeventpage.js"type="text/javascript"></script><link href="CSS/histeventpage.css"rel="stylesheet"type="text/css"/><!--时间选择器--><link href="CSS/TimePicker/jquery-ui.css"rel="stylesheet"type="text/css"/><link href="CSS/TimePicker/timepicker.css"rel="stylesheet"type="text/css"/><script type="text/javascript"src="Script/TimePicker/jquery-ui.js"></script><script type="text/javascript"src="Script/TimePicker/jquery-ui-slide.min.js"></scr ipt><script type="text/javascript"src="Script/TimePicker/jquery-ui-timepicker-addon.js "></script><!--时间选择器--></head><body oncontextmenu="return false;"><iframe id="download"name="download"style="display: none"></iframe> <div id="waiting"><div class="opacity"></div><div class="border"><img alt=""src="image/waiting.gif"/><br/>操作进行中,请耐心等待...</div></div><form id="form1"runat="server"><%-- <div id="headSection"><div class="header-content"><h1 class="brand-mark">■</h1><h1 class="brand-id">系统事件</h1></div></div>--%><div id="mainSection"><div class="block"><span>事件类型:</span><select id="eventtype"><%--<option value="0">所有事件</option>--%><option value="1">系统事件</option><option value="7">操作日志事件</option></select><span>事件描述:</span><input id="description"type="text"/></div><div class="block"><span>时间范围:</span><input id="starttime"type="text"class="timepicker"/>~<input id="endtime"type="text"class="timepicker"/> </div><div class="block"><span></span><input id="querybtn"type="button"value="查询"onclick="queryclick()"class="mbtn"/><input type="button"value="导出"onclick="exoprtascsv('histevent')"class="mbtn"/></div><div class="block"><table class="datatable"cellspacing="0"cellpadding="5"border="0"rules="n one"><tr><th>时间</th><th>事件类型</th><th>事件描述</th></tr><tbody id="databody"><tr><td> </td><td></td><td></td></tr></tbody></table></div><div id="pager"class="block"><em>总共<span id="totalcount">0</span>条</em><em>第<input id="pageindex"type="text"value="0"class="pagerctrl"/>/<em id="totalpage">0</e m>页</em><input type="button"value="跳转"onclick="pagerjump()"class="pagerctrl"id="jumpbtn"/><input type="button"value="首页"onclick="pagerfirst()"class="pagerctrl"id="firstbtn"/><input type="button"value="上一页"onclick="pagerperv()"class="pagerctrl"id="prevbtn"/><input type="button"value="下一页"onclick="pagernext()"class="pagerctrl"id="nextbtn"/><input type="button"value="尾页"onclick="pagerlast()"class="pagerctrl"id="lastbtn"/></div><div style="clear: both;"/></div></form></body></html><script type="text/javascript">$(".timepicker").datetimepicker().attr("readonly", "readonly"); $(".pagerctrl").attr("disabled", "disabled");$("#waiting").hide();DayString();</script>2..histeventpage.js/// <reference path="jquery1.7.2.min.js" />var eventtype = "";var description = "";var starttime = "";var endtime = "";//查询按钮,查询分页信息并查出第一页内容function queryclick() {//获取查询条件eventtype = $("#eventtype").val();description = $("#description").val();starttime = $("#starttime").val();endtime = $("#endtime").val();if (starttime == "" || endtime == "") {alert("请选择时间范围!");return;}//过滤编码description = sqlfilter(description);$("#description").val(description);description = encodeURIComponent(description);//查询分页信息$("#querybtn").attr("disabled", "disabled");$(".pagerctrl").attr("disabled", "disabled");$("#waiting").fadeIn();$.post("Services/queryhistevent.ashx",{ "eventtype": eventtype, "description": description, "starttime": starttime,"endtime": endtime, "pagesize": pagesize, "pageindex": 0, "total": true }, function (result) {totalcount = parseInt(result);if (totalcount > 0) {pageindex = 1;totalpage = Math.ceil(totalcount / pagesize);querydata(1);}else {pageindex = 0;totalpage = 0;$("#databody").html("<tr><td>无数据</td><td>无数据</td><td>无数据</td></tr>");$("#querybtn").removeAttr("disabled");updatepagerbtn();$("#waiting").fadeOut();}$("#pageindex").val(pageindex);$("#totalpage").html(totalpage);$("#totalcount").html(totalcount);});}//sql过滤器function sqlfilter(str) {return str.replace(/[%';]/g, "");}//查询内容$("#querybtn").attr("disabled", "disabled");$(".pagerctrl").attr("disabled", "disabled");$("#waiting").fadeIn();$.post("Services/queryhistevent.ashx",{ "eventtype": eventtype, "description": description, "starttime": starttime,"endtime": endtime, "pagesize": pagesize, "pageindex": index}, function (result) {$("#databody").html(result);$("#querybtn").removeAttr("disabled");updatepagerbtn();$("#waiting").fadeOut();});}//分页代码var totalcount = 0;var pageindex = 0;var totalpage = 0;var pagesize = 15;function pagerjump() {var topage = $("#pageindex").val();if (isNaN(topage)) {alert("页数必须为数字");$("#pageindex").val(pageindex);return;}pagerchange(topage);}function pagerfirst() {pagerchange(1);}function pagerlast() {pagerchange(totalpage);}function pagerperv() {pagerchange(pageindex - 1);}function pagernext() {pagerchange(pageindex + 1);}function pagerchange(topage) {if (topage >= 1 && topage <= totalpage) { topage = parseInt(topage);if (topage != pageindex) {pageindex = parseInt(topage);querydata(pageindex);}}$("#pageindex").val(pageindex);}function updatepagerbtn() {if (pageindex == 0 || totalpage == 0) {$(".pagerctrl").attr("disabled", "disabled");}else {$("#jumpbtn").removeAttr("disabled");$("#pageindex").removeAttr("disabled");if (pageindex == 1) {$("#firstbtn").attr("disabled", "disabled"); }else {$("#firstbtn").removeAttr("disabled");}if (pageindex == totalpage) {$("#lastbtn").attr("disabled", "disabled"); }else {$("#lastbtn").removeAttr("disabled");}if (pageindex > 1) {$("#prevbtn").removeAttr("disabled");}else {$("#prevbtn").attr("disabled", "disabled"); }if (pageindex < totalpage) {$("#nextbtn").removeAttr("disabled");}else {$("#nextbtn").attr("disabled", "disabled"); }}}//导出csvfunction exoprtascsv(exporttype) {if (totalpage <= 0) {alert("请先查询有无数据!");return;}$("#querybtn").attr("disabled", "disabled");$(".pagerctrl").attr("disabled", "disabled");$("#waiting").fadeIn();$.post("Services/exportdata.ashx",{ "eventtype": eventtype, "description": description, "starttime": starttime,"endtime": endtime, "pagesize": pagesize, "pageindex": 0, "exporttype": exporttype}, function (result) {$("#querybtn").removeAttr("disabled");updatepagerbtn();$("#waiting").fadeOut();if (result.indexOf("提示:") == 0) {alert(result);}else {if (result.indexOf("http") == 0) {try {window.open(result, "download", "");}catch (e) {alert("提示:浏览器拦截了下载导出文件窗口!");}}else {alert("提示:下载地址有误!"); }}});}//当天时间function DayString() {var date = new Date();var targetday_milliseconds = date.getTime();date.setTime(targetday_milliseconds);var datestr = date.getFullYear() + "-";var month = date.getMonth() + 1;var day = date.getDate();var hour = date.getHours();var minute = date.getMinutes();if (month < 10) {datestr += "0" + month + "-";}else {datestr += month + "-";}if (day < 10) {datestr += "0" + day + " "; }else {datestr += day + " ";}var end = "";if (hour < 10) {end += "0" + hour + ":";}else {end += hour + ":";}if (minute < 10) {end += "0" + minute;}else {end += minute;}var start = "00:00";$("#starttime").val(datestr + start);$("#endtime").val(datestr + end);}3.WebServices:queryhistdata.ashxusing System;using System.Collections.Generic;using System.Data;using System.Diagnostics;using System.Text;using System.Web;using IMCP.iReport.BLL;using System.Web.SessionState;namespace Web.Services{///<summary>///查询历史事件,不包括告警事件,只有系统事件与操作日志事件///</summary>public class queryhistevent : IHttpHandler, IRequiresSessionState {int pagesize = 15;public void ProcessRequest(HttpContext context){context.Response.ContentType = "text/plain";string total = context.Request.Form["total"];bool istotal = !string.IsNullOrEmpty(total);try{Authority.ServicesCheck(context.Session);string eventtype = context.Request.Form["eventtype"];string description = context.Request.Form["description"]; description = context.Server.UrlDecode(description);string starttime = context.Request.Form["starttime"];string endtime = context.Request.Form["endtime"];string pagesizestring = context.Request.Form["pagesize"];string pageindex = context.Request.Form["pageindex"];int.TryParse(pagesizestring, out pagesize);//验证参数if (string.IsNullOrEmpty(eventtype)){throw new MsgException("参数不正确");}DateTime time1, time2;if (!(DateTime.TryParse(starttime, out time1)&& DateTime.TryParse(endtime,out time2))){throw new MsgException("参数不正确");}if (time1 > time2){DateTime tmp = time1;time1 = time2;time2 = tmp;}int index = 0;if (!int.TryParse(pageindex, out index)){throw new MsgException("参数不正确");}//获取数据库的表名DataTable tables = Tablemgr.CGetList("tablename", "where type=2");List<string> tablelist = new List<string>();foreach (DataRow row in tables.Rows){tablelist.Add(row["tablename"].ToString());//列出需要查询的表名DateTime start = new DateTime(time1.Year, time1.Month, 1), end= new DateTime(time2.Year, time2.Month, 1);int i = 0;List<string> tablenames = new List<string>();while (start.AddMonths(i) <= end){DateTime temp = start.AddMonths(i);tablenames.Add(string.Format("e{0}", temp.ToString("yyyyMM")));i++;}//构造where语句string strwhere = string.Format("where eventtime between '{0}' and '{1}' ", time1.ToString("yyyy-MM-dd HH:mm:ss"), time2.ToString("yyyy-MM-dd HH:mm:ss"));if (eventtype != "0"){strwhere += string.Format("and eventtype={0} ", eventtype);}else{strwhere += string.Format("and eventtype in (1,7) ", eventtype);if (!string.IsNullOrEmpty(description)){strwhere += string.Format("and description like '%{0}%' ", description);}//构造sql语句bool union = false;StringBuilder sb = new StringBuilder();if (istotal){sb.Append("select count(A.id) total from (");}else{sb.Append("select A.eventtime,A.eventtype,A.description from ("); }for (i = 1; i <= tablenames.Count; i++){if (tablelist.Contains(tablenames[tablenames.Count - i])){if (union){sb.Append(" union ");}else{union = true;}if (istotal){sb.AppendFormat("select id from {0} ",tablenames[tablenames.Count - i]);sb.Append(strwhere);}else{sb.AppendFormat("select eventtime,eventtype,description from {0} ", tablenames[tablenames.Count - i]);sb.Append(strwhere);sb.Append("order by eventtime desc");}}}{sb.AppendFormat(") A");}else{sb.AppendFormat(") A limit {0},{1}", (index - 1) * pagesize, pagesize); }if (!union){throw new MsgException("时间范围内无数据表");}DataTable result = HistEventBLL.CQueryList(sb.ToString());if (result.Rows.Count > 0){if (istotal){context.Response.Write(result.Rows[0][0]);}else{for (int j = 0; j < result.Rows.Count; j++)context.Response.Write(string.Format("<tr><td>{0:yyyy-MM-dd HH:mm:ss}</td><td>{1}</td><td>{2}</td></tr>",result.Rows[j]["eventtime"],EventConverter(result.Rows[j]["eventtype"].ToString()),result.Rows[j]["description"]));}}}else{throw new MsgException("无数据");}}catch (MsgException msg){context.Response.Clear();FailString(istotal, context, msg.Message);}catch (Exception ex){context.Response.Clear();FailString(istotal, context, "未知错误!");ErrorLog.Write(ex);}}public string EventConverter(string str){switch (str){case"1":return"系统事件";case"7":return"操作日志事件";default:return"其他";}}public void FailString(bool istotal, HttpContext context, string msg) {if (istotal){context.Response.Write("0");}else{context.Response.Write(string.Format("<tr><td>{0}</td><td></td><td></td ></tr>", msg));}}public bool IsReusable{get{return false;}}}}。
html打印表格每页都有的表头和打印分页
html打印表格每页都有的表头和打印分页在做项⽬的时候碰到的。
⽤户要求,页⾯呈现太长时,打印的时候,要求,每页上都要有表头。
找了好久,才在⽹上找到。
原来,是要对每个表格,定义其thead,并对其样式设置成:style="display:table-header-group"。
如果要求有表尾,也⼀样,要定义其tfoot,并对style="display:table-footer-group"<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>⽆标题⽂档</title><style>@media print{INPUT {display:none}}</style></head><body><TABLE border="0" style="font-size:9pt;" width="300px" align="center"><THEAD style="display:table-header-group;font-weight:bold"><TR><TD colspan="2" align="center" style="font-weight:bold;border:3px double red">每页都有的表头</TD></TR></THEAD><TBODY style="text-align:center""><TR><TD>表格内容</TD><TD>表格内容</TD></TR><TR><TD>表格内容</TD><TD>表格内容</TD></TR><TR><TD>表格内容</TD><TD>表格内容</TD></TR><TR><TD>表格内容</TD><TD>表格内容</TD></TR><TR><TD>表格内容</TD><TD>表格内容</TD></TR><TR><TD>表格内容</TD><TD>表格内容</TD></TR><TR style="page-break-after:always;"><TD>表格内容</TD><TD>表格内容</TD></TR><TR><TD>表格内容</TD><TD>表格内容</TD></TR><TR><TD>表格内容</TD><TD>表格内容</TD></TR><TR><TD>表格内容</TD><TD>表格内容</TD></TR><TR><TD>表格内容</TD><TD>表格内容</TD></TR><TR><TD>表格内容</TD><TD>表格内容</TD></TR><TR><TD>表格内容</TD><TD>表格内容</TD></TR><TR style="page-break-after:always;"><TD>表格内容</TD><TD>表格内容</TD></TR><TR><TD>表格内容</TD><TD>表格内容</TD></TR><TR><TD>表格内容</TD><TD>表格内容</TD></TR><TR><TD>表格内容</TD><TD>表格内容</TD></TR><TR><TD>表格内容</TD><TD>表格内容</TD></TR><TR><TD>表格内容</TD><TD>表格内容</TD></TR><TR><TD>表格内容</TD><TD>表格内容</TD></TR><TR style="page-break-after:always;"><TD>表格内容</TD><TD>表格内容</TD></TR></TBODY><TFOOT style="display:table-footer-group;font-weight:bold"><TR><TD colspan="2" align="center" style="font-weight:bold;border:3px double blue">每页都有的表尾</TD></TR></TFOOT></TABLE><input type=button value=" 打印 " onclick=javascript:window.print()></body></html>。
HTML页面打印分页标签样式
HTML页⾯打印分页标签样式<html><head><meta name="vs_targetSchema" content="/intellisense/ie5"><title>***上海市眼病防治中⼼病⼈结帐费⽤报表***</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><!--media=print 这个属性可以在打印时有效--><style media="print">.Noprint{display: none;}.PageNext{page-break-after: always;}</style><style>body, td, th{font-size: 12px;}.tdp{border-bottom: 1 solid #000000;border-left: 1 solid #000000;border-right: 0 solid #ffffff;border-top: 0 solid #ffffff;}.tabp{border-color: #000000;border-collapse: collapse;}.NOPRINT{font-family: "宋体";font-size: 12px;}</style></head><body><object id="WebBrowser" classid="CLSID:8856F961-340A-11D0-A96B-00C04FD705A2" height="0"width="0" viewastext></object><input type="button" value="打印" onclick="document.all.WebBrowser.ExecWB(6,1)" class="NOPRINT"><input type="button" value="直接打印" onclick="document.all.WebBrowser.ExecWB(6,6)" class="NOPRINT"> <input type="button" value="页⾯设置" onclick="document.all.WebBrowser.ExecWB(8,1)" class="NOPRINT"> <input type="button" value="打印预览" onclick="document.all.WebBrowser.ExecWB(7,1)" class="NOPRINT"> <br /><table width="90%" border="0" align="center" cellpadding="0" cellspacing="0"><tr align="center"><td colspan="5"><font size="3">上海市眼病防治中⼼病⼈结帐费⽤报表(A) </font></td></tr><tr><td>汇总⼈次 5</td><td>费⽤合计 15853.12</td><td>统计⽇期</td><td>制表⼈ 023</td><td>制表⽇期:2004-05-13</td></tr></table><table width="90%" border="1" align="center" cellpadding="2" cellspacing="0" bordercolor="#000000" class="tabp"><tr><td>姓名</td><td>住院号</td><td>科室</td><td>结帐⽇期</td><td>出院⽇期</td><td>费⽤合计</td><td>医保交易费⽤</td><td>分类给付费⽤</td><td>⾮医保交易费</td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td><td> </td></tr></table><hr align="center" width="90%" size="1" noshade class="NOPRINT"><!--分页--><div class="PageNext"></div><table width="90%" border="1" align="center" cellpadding="2" cellspacing="0" bordercolor="#000000" class="tabp"><tr><td>第2页</td></tr><tr><td>看到分页了吧</td></tr><tr><td> </td></tr><tr><td> </td></tr><tr><td><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td width="50%">这样的报表对⼀般的要求就够了。
jQuery实现Table分页效果
jQuery实现Table分页效果本⽂实例为⼤家分享了jQuery实现Table分页效果的具体代码,供⼤家参考,具体内容如下CSS:<style>.pager {font-size: 18px;}.pagerTotal {font-size: 18px;height: 36px;line-height: 36px;margin-left: 2px;}.pager_a {display: block;width: 36px;height: 36px;line-height: 36px;float: left;text-align: center;border: 1px solid black;color: black;margin-left: 2px;cursor: pointer;}.pager_a_red {display: block;width: 36px;height: 36px;line-height: 36px;float: left;text-align: center;border: 1px solid red;color: red;font-weight: bold;margin-left: 2px;cursor: pointer;}</style>HTML:<span class="pager"></span> <span class="pagerTotal"></span><table><tr><th>品牌</th><th>店铺</th><th>仓库</th></tr><tbody id='tbody'></tbody></table><span class="pager"></span> <span class="pagerTotal"></span>JavaScript:<script>//初始化$(function () {ReportPage(1);});//加载报表-分页function ReportPage(pageIndex) {var index = pageIndex;//页码var size = 500;//每页条数var startDate = $("#startDate").val();$("tbody").empty();$.ajax({async: false,type: "GET",data: {"startDate": startDate,"pageIndex": index,"pageSize": size,},url: "/Controller/GetData",dataType: "json",success: function (request) {//拼表格$.each(request.data, function (i, field) {var html = "";html += "<tr>";html += "<td>" + field.品牌 + "</td>";html += "<td>" + field.店铺 + "</td>";html += "<td>" + field.仓库 + "</td>";html += "</tr>";$("#tbody").append(html);});Pages(pageIndex, request.allPage, request.total);//⽣成分页},});}//分页按钮function Pages(pageIndex, pageCount, pageTotal) {$(".pagerTotal").html(" 总共:<font color='red'>" + pageTotal + "</font> 条数据!"); $(".pager").empty();var page = "";for (var i = 0; i < pageCount; i++) {if ((i + 1) == pageIndex) {page += "<span class='pager_a_red'>" + (i + 1) + "</span>";}else {page += "<span class='pager_a' onclick='ReportPage(" + (i + 1) + ")'>" + (i + 1) + "</span>";}}$(".pager").append(page);}</script>MVC:public ActionResult GetData(string startDate, int pageIndex, int pageSize){string json = string.Empty;if (!string.IsNullOrEmpty(startDate)){int total = 0;int allPage = 0;DataTable dt = bll.GetData(startDate, pageIndex, pageSize, out total, out allPage);if (dt != null && dt.Rows.Count > 1){json = JsonConvert.SerializeObject(new{total = total,//总记录数allPage = allPage,//总页数data = dt,//分页后数据});}}return Content(json);}获得分页数据dataTable、总数据数total、总页数allpage:public DataTable GetDate(string startDate, int pageIndex, int pageSize, out int total, out int allPage){//计算总数据数和总分页数string sqlCount = "select count(*) from table where date='"+startDate+"'";//获取数据总数total = int.Parse(SqlHelper.GetSingel(sqlCount ).ToString());//总数据⾏数allPage = total / pageSize;//总分页个数 = 总数据⾏数 / 每页⾏数allPage += total % pageSize == 0 ? 0 : 1;//不⾜⼀页也算⼀页//获取分页数据string sql = "";sql = "DECLARE @PageIndex INT;";sql = "DECLARE @PageSize INT;";sql = "SET @PageIndex=" + pageIndex;sql = "SET @PageSize=" + pageSize;sql += " SELECT * FROM (SELECT ROW_NUMBER() OVER(ORDER BY ID desc) rownum, * FROM table where date ='"+ startDate +"')a"; sql += " WHERE rownum > @PageSize * (@PageIndex - 1) AND rownum <= @PageSize * @PageIndex";sql += " order by ID desc";DataTable dt = SqlHelper.GetDate(sql);//分页数据return dt;}预览:点击页码会重新调⽤ajax获取新的数据。
layui+jquery支持IE8的表格分页方法
layui+jquery⽀持IE8的表格分页⽅法⼯具(框架、插件)1、layui-v1.0.92、jquery-1.8.3代码1、jsp代码(可忽略jsp部分,转成html)<%@ page language="java" contentType="text/html; charset=utf-8"%><%@ include file="/common/include/taglib.jsp"%><%<html><head><title>test page</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><meta http-equiv="x-ua-compatible" content="ie=8" /><link rel="stylesheet" href="ad/layui/css/layui.css" rel="external nofollow" ><style>.left_buttons{float:left;margin-top:3px;}.search{float:right;margin-top:3px;}.dataTable{clear:both;}th{min-width:90px;text-align:center;}tfoot{text-align:center;}#modify{width:18px;padding:0 5 0 5;}#dlt{width:18px;padding:0 5 0 5;}</style></head><body><div><div class="top"><div class="left_buttons"><span id="add" class="layui-btn layui-btn-primary" style="border:none;font-size:16"><i class="layui-icon"> </i>button1</span><span class="layui-btn layui-btn-primary" style="border:none;font-size:16"><i class="layui-icon"> </i>button2</span></div><div class="search"><form class="layui-form search-input" action=""><div class="layui-form-item layui-form-pane"><label class="layui-form-label"><i class="layui-icon"> </i></label><div class="layui-input-block" style="width:300px"><input type="text" name="title" required lay-verify="required" placeholder="请输⼊主题" autocomplete="off" class="layui-input" /></div></div></form></div></div><div class="dataTable"><div class="表格内容"><table class="layui-table" lay-skin="line"><colgroup><col width="150"><col width="200"><col></colgroup><thead><tr class="table_title"><th>col1</th><th>col2</th><th>col3</th><th>col4</th><th>col5</th><th>col6</th><th>col7</th><th>col8</th><th>col9</th><th>col10</th><th>col11</th></tr></thead><tbody class="dataBody"></tbody><tfoot><tr><td colspan="11"><span class="water-table-listbtn"></span><span class="water-table-page"><span id="pagemsg" class="water-table-pagemsg">当前0/0页</span><input type="button" id="fpbtn" value="⾸页"/><input type="button" id="rpbtn" value="上页"/><input type="button" id="npbtn" value="下页"/><input type="button" id="lpbtn" value="尾页"/><span id="pagemsg" class="water-table-pagemsg">跳转到<input type="text" id="gpinput" size="3" value="0"/>页</span><input type="button" id="gpbtn" value="跳转"/></span></td></tr></tfoot></table></div></div></div><!-- 此处是最外围DIV --><script src="/bhps/ad/layui/layui.js"></script><script src="/js/jquery/jquery-1.8.3.min.js"></script><script src="/bhps/ad/js/component.js"></script><script>var userId="<%=request.getAttribute("userid")%>";var page=0;var pages = 0;var rows = 8;</script></body></html>2、js代码$(document).ready(function(){$("#fpbtn").attr("disabled", true);$("#rpbtn").attr("disabled", true);rewriteTable(page,rows,1);});function rewriteTable(page,rows,isReplace){$.post("ADTasks.ered?reqCode=queryAssignTask",{loginuserid:userId,start: page*rows,limit: rows},function(result){if(result.resultCode == 200){if(isReplace){$(".dataBody").html("");}pages = changeShowedPage(page+1,result.total);buttonControl(page,pages);//alert(result.data.length);for(var i=0; i< result.data.length; i++){$(".dataBody").append("<tr>"+"<th>"+isNotNUll(result.data[i].1)+"</th>"+"<th>"+isNotNUll(result.data[i].2)+"</th>"+"<th>"+isNotNUll(result.data[i].3)+"</th>"+"<th>"+isNotNUll(result.data[i].4)+"</th>"+"<th>"+isNotNUll(result.data[i].5)+"</th>"+"<th>"+isNotNUll(result.data[i].6)+"</th>"+"<th>"+isNotNUll(result.data[i].7)+"</th>"+"<th>"+isNotNUll(result.data[i].8)+"</th>"+"<th>"+isNotNUll(result.data[i].9)+"</th>"+"<th>"+isNotNUll(result.data[i].10)+"</th>"+"<th>"+"<span id=\"modify\" class=\"layui-btn layui-btn-primary\" style=\"border:none;font-size:16\"><i class=\"layui-icon\"> </i></span>"+"<span id=\"dlt\" class=\"layui-btn layui-btn-primary\" style=\"border:none;font-size:16\"><i class=\"layui-icon\" onClick=\"deleteTask("+result.data[i].id+",\'"+result.data[i].theme+"\'"+");\"> </i></span>"+ "</th>"+"</tr>");//alert("hello");//console.log(result["data"][i]);//var o = result["data"][i];// $(".dataBody").append("<tr>");// $(".dataBody").append("<th>"+isNotNUll(result.data[i].1)+"</th>");// $(".dataBody").append("<th>"+isNotNUll(result.data[i].2)+"</th>");// $(".dataBody").append("<th>"+isNotNUll(result.data[i].3)+"</th>");// $(".dataBody").append("<th>"+isNotNUll(result.data[i].4)+"</th>");// $(".dataBody").append("<th>"+isNotNUll(result.data[i].5)+"</th>");// $(".dataBody").append("<th>"+isNotNUll(result.data[i].6)+"</th>");// $(".dataBody").append("<th>"+isNotNUll(result.data[i].7)+"</th>");// $(".dataBody").append("<th>"+isNotNUll(result.data[i].8)+"</th>");// $(".dataBody").append("<th>"+isNotNUll(result.data[i].9)+"</th>");// $(".dataBody").append("<th>"+isNotNUll(result.data[i].10)+"</th>");// $(".dataBody").append("<th>"+// "<span id=\"modify\" class=\"layui-btn layui-btn-primary\" style=\"border:none;font-size:16\"><i class=\"layui-icon\"> </i></span>"+// "<span id=\"dlt\" class=\"layui-btn layui-btn-primary\" style=\"border:none;font-size:16\"><i class=\"layui-icon\" onClick=\"deleteTask("+result.data[i].id+","+result.data[i].1+");\"> </i></span>"+// "</th>");// $(".dataBody").append("</tr>");}}else{alert("获取数据失败.."+result.message);}},"json");}function isNotNUll(param){if(param){return param;}else{return "";}}//////////////////////////////////////分页function///////////////////////////////////fpbtn ⾸页//rpbtn 上页//npbtn 下页//lpbtn 尾页//gpbtn 跳转$("#npbtn").click(function(){page = page + 1;rewriteTable(page,rows,1);});$("#rpbtn").click(function(){page = page - 1;rewriteTable(page,rows,1);$("#npbtn").removeAttr("disabled");});$("#fpbtn").click(function(){page = 0;rewriteTable(page,rows,1);});$("#gpbtn").click(function(){var jumpPage = $("#gpinput").val();if(jumpPage<1||jumpPage>pages){alert("请输⼊符合范围的页码");return;}if(jumpPage - 1 == page){alert("当前已经是第"+jumpPage+"页");return;}page = jumpPage - 1;rewriteTable(page,rows,1);});$("#lpbtn").click(function(){page = pages - 1;rewriteTable(pages-1,rows,1);});function buttonControl(currentP,totalP){ //翻页按钮的可⽤与禁⽤if(totalP == 1){$("#rpbtn").attr("disabled", true);$("#fpbtn").attr("disabled", true);$("#npbtn").attr("disabled", true);$("#lpbtn").attr("disabled", true);return;}if(currentP <= 0){$("#rpbtn").attr("disabled", true);$("#fpbtn").attr("disabled", true);$("#npbtn").removeAttr("disabled");$("#lpbtn").removeAttr("disabled");}if(currentP >= totalP-1){$("#npbtn").attr("disabled", true);$("#lpbtn").attr("disabled", true);$("#fpbtn").removeAttr("disabled");$("#rpbtn").removeAttr("disabled");}if(currentP>0 && currentP<totalP-1){$("#npbtn").removeAttr("disabled");$("#lpbtn").removeAttr("disabled");$("#fpbtn").removeAttr("disabled");$("#rpbtn").removeAttr("disabled");}}//改变页码function changeShowedPage(currentPage, total){var totalPage;if(total%rows ==0 ){totalPage = total/rows;}else{totalPage = parseInt(total/rows)+1;}$("#pagemsg").html("当前" + currentPage + "/" +totalPage + "页, 共"+total+"条记录");return totalPage;}//////////////////////////////////////分页function结束/////////////////////////////////function deleteTask(id,theme){// alert(id+" "+theme);e('layer', function(){var layer = yer;layer.open({title:'确认',offset:'100px',content:'确定删除'+theme+'?',btn: ['确定','取消'] //按钮,yes:function(){//console.log("12345");$.post("ADTasks.ered?reqCode=deleteTask",{ loginuserid:userId,id:id},function(result){alert(result.msg);},"json")page = 0;rewriteTable(page,rows,1);layer.closeAll();}});});}注意事项1、layer官⽹称layer⽀持IE8,但我⽆法调试成功,因此还是使⽤了layui中的弹窗⽅式。
Jqprint实现页面打印
Jqprint实现页⾯打印好些项⽬需要实现页⾯打印,特别是⼀些后台管理类系统,下⾯介绍⼀款轻量级的打印插件:1、实现页⾯打印要引⼊jQuery和Jqprint。
<script language="javascript" src="jquery-1.4.4.min.js"></script><script language="javascript" src="jquery.jqprint-0.3.js"></script>2、HTML代码:<div id="print-area"><table><tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr><tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr><tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr><tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr><tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr></table></div><input type="button" onclick=" print()" value="打印">3、JavaScript代码:<script language="javascript">function print(){$("#print-area").jqprint({debug: false,importCSS: true,printContainer: true,operaSupport: false});}</script>4、属性1) debug: false, //如果是true则可以显⽰iframe查看效果(iframe默认⾼和宽都很⼩,可以再源码中调⼤),默认是false2) importCSS: true, //true表⽰引进原来的页⾯的css,默认是true。
基于Jquery实现表格动态分页实现代码
基于Jquery实现表格动态分页实现代码项目中经常会对表格进行分页,以下运用jquery对用户管理中的用户表格进行分页。
当页面点击分页图标时,程序会自动去后台获取对应页数的记录。
关键代码如下:需要引入的css和js文件有:复制代码代码如下:<link rel="stylesheet" type="text/css" href="<%=basePath %>css/theme/default/css/jpage.css"></link><link ID="skin" rel="stylesheet" type="text/css" href="<%=basePath %>css/config.css" /><script language="javascript" type="text/javascript" src="<%=basePath %>js/jquery.js"></script> 其中jsp页面代码如下:复制代码代码如下:<script language="jscript" type="text/javascript">var pageIndex = 1; //当前页数$(function(){GetPageCount();//获取分页数量以及总的记录条数$("#load").hide();//隐藏loading提示$("#template").hide();//隐藏模板ChangeState(0,1);//设置翻页按钮的初始状态bind();//绑定第一页的数据//第一页按钮click事件$("#first").click(function(){pageIndex = 1;ChangeState(0,1);bind();});//上一页按钮click事件$("#previous").click(function(){pageIndex -= 1;ChangeState(-1,1);if(pageIndex <= 1){pageIndex = 1;ChangeState(0,-1);}bind();});//下一页按钮click事件$("#next").click(function(){pageIndex += 1;ChangeState(1,-1);if(pageIndex>=pageCount){pageIndex = pageCount;ChangeState(-1,0);}bind(pageIndex);});//最后一页按钮click事件$("#last").click(function(){pageIndex = pageCount;ChangeState(1,0);bind(pageIndex);});//每页显示记录条数select事件$("#pageSize").change(function(){bind();})});//AJAX方法取得数据并显示到页面上function bind(){$("#load").show();var pageSize = $("#pageSize").val();$.ajax({type: "get",//使用get方法访问后台dataType: "json",//返回json格式的数据url: "<%=basePath%>actionSmUser.do?method=listUser2",//要访问的后台地址data: "pageIndex=" + pageIndex+"&pageSize="+pageSize,//要发送的数据complete : function(msg){//msg为返回的数据,在这里做数据绑定$("[id=ready]").remove();var data = eval("("+msg.responseText+")");$.each(data, function(i, n){var row = $("#template").clone();row.find("#userId").text(erId);row.find("#userName").text(erName);row.find("#depId").text(n.depId);row.find("#createTime").text(n.createTime);if(n.createTime !== undefined) row.find("#createTime").text(n.createTime);row.find("#creator").text(n.creator);row.find("#menusId").text(n.menusId);row.find("#isValid").text(n.isValid);row.attr("id","ready");//改变绑定好数据的行的idrow.appendTo("#datas");//添加到模板的容器中});$("[id=ready]").show();SetPageInfo();}});}function ChangeDate(date){return date.replace("-","/").replace("-","/");}//设置第几页/共几页的信息function SetPageInfo(){var pageCount = $("#pageCount").val();var totalCount = $("#totalCount").val();var pageSize = $("#pageSize").val();$("#pageinfo").html(" 第<input class='default_pgCurrentPage' id='pageIndex' type='text' value='"+pageIndex+"' style='width: 30px' /> 页" + "/" +"共"+pageCount+"页"+" 检索到"+totalCount+"条记录,显示第"+(pageIndex*pageSize-pageSize)+" 条- 第"+(pageIndex*pageSize)+" 条记录");}//AJAX方法取得分页总数function GetPageCount(){var pageSize = $("#pageSize").val();$.ajax({type: "get",dataType: "text",url: "<%=basePath%>actionSmUser.do?method=getPageCount",data: "pageSize="+pageSize ,async: false,success: function(msg){var data = eval("("+msg+")");$("#pageCount").val(data[0].pageCount);$("#totalCount").val(data[0].totalCount);}});}//改变翻页按钮状态function ChangeState(state1,state2){$("#first").attr("class","default_pgFirst default_pgBtn");$("#previous").attr("class","default_pgPrev default_pgBtn");$("#next").attr("class","default_pgNext default_pgBtn");$("#last").attr("class","default_pgLast default_pgBtn");if(state1 == 1) {document.getElementById("first").disabled = "";document.getElementById("previous").disabled = "";}else if(state1 == 0){document.getElementById("first").disabled = "disabled";document.getElementById("previous").disabled = "disabled";$("#first").attr("class","default_pgFirstDisabled default_pgBtn");$("#previous").attr("class","default_pgPrevDisabled default_pgBtn");}if(state2 == 1){document.getElementById("next").disabled = "";document.getElementById("last").disabled = "";}else if(state2 == 0){document.getElementById("next").disabled = "disabled";document.getElementById("last").disabled = "disabled";$("#next").attr("class","default_pgNextDisabled default_pgBtn");$("#last").attr("class","default_pgLastDisabled default_pgBtn");}}</script>html页面代码如下:复制代码代码如下:<body><div><div><br /><table id="datas" align="center" class="listtable" width="100%" bgcolor="#CCCCCC" cellSpacing="1" cellpadding="1" style="margin-top:5px;"><tr class="fixheader"><th width="14%">用户ID</th><th width="14%">用户名称</th><th width="14%">所在科室</th><th width="14%">创建时间</th><th width="14%">创建人</th><th width="14%">菜单集名称</th><th width="14%">是否有效</th></tr><tr id="template" height="22px" bgcolor="#F9FDFF" onmouseover="javascript:backgroundColor='#FFFFCC'; return true;" onMouseOut="javascript:this.style.backgroundColor='#F9FDFF'; return true;"><td id="userId" class="tdc"></td><td id="userName" class="tdc"></td><td id="depId" class="tdc"></td><td id="createTime" class="tdc"></td><td id="creator" class="tdc"></td><td id="menusId" class="tdc"></td><td id="isValid" class="tdc"></td></tr></table></div><div id="load" style="left: 0px; position: absolute; top: 0px; background-color: red"> LOADING....</div><div class="default_pgContainer" ><div class="default_container"><div class="default_pgPanel" id="skinDiv"><table class="default_pgToolbar"><tr><td class="black_pgCurrentPage"><select id="pageSize" name="pageSize"><option selected="selected" value="10">10</option><option value="20">20</option><option value="30">30</option></select></td><td><div id="first" class="default_pgFirst default_pgBtn" /></td><td><div id="previous" class="default_pgPrev default_pgBtn" /></td><td class="default_separator"></td><td><div id="next" class="default_pgNext default_pgBtn" /></td><td><div id="last" class="default_pgLast default_pgBtn" /></td><td class="default_separator"></td><td><span id="pageinfo"></span></td></tr></table></div></div></div></div><div id="test"></div><input type="hidden" id="pageCount" style="width: 45px" /><input type="hidden" id="totalCount" style="width: 45px" /></body>后台action中代码如下:复制代码代码如下://分页获取用户信息public void listUser2(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response){ RequestTool tool = new RequestTool(request);Integer pageSize = tool.getIntParameter("pageSize");Integer pageIndex = tool.getIntParameter("pageIndex");ResultPage res = serviceSmUserImpl.findAllSmUsers(pageIndex, pageSize); List<SmUser> smUserList = (List<SmUser>)res.getResult();JSONArray array = new JSONArray();JSONObject object ;for(SmUser user:smUserList){object = new JSONObject();object.put("userId", user.getUserId());object.put("userName",user.getUserName());object.put("depId", user.getOrganCode());object.put("createTime", user.getCreateTime());object.put("creator", user.getCreator());object.put("menusId", user.getMenusId());object.put("isValid", (user.getValid().equals("1")?"有效":"无效"));array.add(object);}AjaxTool.returnAjaxResponse(response, array.toJSONString());}//获取总的记录数和总页数public void getPageCount(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response){RequestTool tool = new RequestTool(request);int pageSize = tool.getIntParameter("pageSize");List<POJO> pojos = serviceSmUserImpl.findAll();int pageCount = pojos.size()% pageSize > 0 ? (pojos.size()/ pageSize+1):(pojos.size()/ pageSize); JSONArray array = new JSONArray();JSONObject object = new JSONObject();object.put("pageCount", pageCount);object.put("totalCount", pojos.size());array.add(object);AjaxTool.returnAjaxResponse(response,array.toJSONString());}。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
竭诚为您提供优质文档/双击可除jquery打印html表格自动分页
篇一:html表格及分页
html表格及分页
1.html
transitional//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);//获取当前页码,如果未指定则设为1
3.$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,n。