<style> .nbgz-right { width: 1040px; /*height: 800px;*/ } .nbgz-right .nbgz-right-artcle ul{ margin:20px 50px; } .nbgz-right .nbgz-right-artcle li{ font-size: 13px; padding: 15px 0px 15px 15px; list-style-type: none; border-bottom: #d7d7d7 1px dashed; background: url("{ms:globalskin.url/}images/nasm_newslistbg_03.png") left center no-repeat; } .nbgz-right .nbgz-right-artcle li span{ float: right; } .nbgz-right .nbgz-right-artcle li a{ color: #000000; } .nbgz-right .nbgz-right-page { height: 80px; width: auto; margin-left: 110px; display:none; } .nbgz-right .nbgz-right-page .right-div-1 { height: 34px; width: auto; float: left; line-height: 34px; margin: 20px 20px 40px 20px; /*margin-bottom: 40px;*/ /*border-width: 1px; border-color: #ddd; border-style: solid; border-radius: 3px;*/ text-align: center; /*margin-right: 20px;*/ } .nbgz-right .nbgz-right-page .right-div-2 { height: 78px; width: auto; float: left; margin-right: 20px; } .nbgz-right .nbgz-right-page .right-div-3 { height: 34px; width: auto; float: left; line-height: 34px; margin: 20px 5px 40px 5px; /*border-width: 1px; border-color: #ddd; border-style: solid; border-radius: 3px;*/ text-align: center; } .nbgz-right .nbgz-right-page .right-div-5 { height: 34px; width: 40px; /*float: left;*/ line-height: 34px; margin: 0px 5px 10px 5px; border-width: 1px; border-color: #ddd; border-style: solid; border-radius: 3px; text-align: center; } .nbgz-right .nbgz-right-page .right-div-4 { height: 34px; width: auto; line-height: 34px; margin: 20px 5px 10px 5px; border-width: 1px; border-color: #ddd; border-style: solid; border-radius: 3px; text-align: center; background: white; color: #337ab7; text-align: center; /*margin-bottom: 0px;*/ } </style> <script src="{ms:globalskin.url/}lib/jquery.twbsPagination.min.js"></script> <div class="nbgz-right"> <!-- 面包屑 --> <div class="zxjj-crumb"> {ms:include filename=ngcc-ztzl/tdtjs/crumbs.htm/} </div> <div class="nbgz-right-artcle"> <ul id="uls"> <!-- Zhaoyt 2017-12-20 --> {ms:arclist titlelen=80 orderby=date} <li> <a href="[field.link]" title="[field.title/]">[field.title/]</a> <span>[field.date fmt=yyyy-MM-dd/]</span> </li> {/ms:arclist} </ul> </div> <div class="nbgz-right-page"> <div class="right-div-1"><span id="span" style="color: #777"></span></div> <div class="right-div-2"><ul id="pagination"></ul></div> <div class="right-div-3"><span style="color: #777">前往<input type="text" class="right-div-5" id="ins" />页</span></div> <button class="right-div-4" id="inl" value="go">确认</button> <!-- <div class="right-div-4"></div> --> <!-- <div class="right-div-3"><span style="color: #777">页</span></div> --> </div> </div> <script> var totalPages = 1; //调用插件 function initPage(page,size,totalPages){ // totalPages = Math.ceil(count/size); $('#pagination').twbsPagination({ totalPages: totalPages, visiblePages: 5, first:"首页", prev:"上一页", next:"下一页", last:"尾页", onPageClick: function (event, page) { load(page,size); } }); } //向后台请求数据 function load(page,size){ // $.ajaxError(function(){ // alert ('warnning!'); // }); //php服务地址 var url = "http://172.*.*.*:8080/MyProject/backend/public/index.php/index/index/test2?startpage="+page+"&pagesize="+size; $.post(url,function(rest){ console.log(status); if (rest==null) { } var r1 = JSON.parse(rest); var count = r1.count; if (count>0) { // console.log($(".nbgz-right-page").css("display")); // 修改分页模块的显示属性 $(".nbgz-right-page").css("display","block"); } var data = r1.data; var htmlStr = ""; totalPages = Math.ceil(count/size); for (var i = 0; i < data.length; i++) { var name = data[i].WEBNAME; var site = data[i].WEBSITE; var time = data[i].RKSJ; htmlStr += "<li><a href='"+site+"'>"+name+"</a><span>"+time+"</span></li>"; } $("#span").html("共 "+totalPages+" 页"); $('#uls').html(htmlStr); if(page === 1){ initPage(page,size,totalPages); } // initPage(page,size,count); }); } $(function () { load(1,10); //Enter键绑定跳转事件 $('input').keyup(function(){ if (event.keyCode == "13") { //获取输入的页码值 var val = $("#ins").val(); if(val==null||val==""||val==0){ alert("页码不规范!"); }else if(totalPages<val){ alert("页码超出范围!"); }else{ $('#pagination').twbsPagination("show",parseInt(val)); //提交后清楚输入内容 $('#ins').val(''); } } }) //确认按钮绑定跳转事件 $("#inl").on('click', function (){ //获取输入的页码值 var val = $("#ins").val(); if(val==null||val==""||val==0){ alert("页码不规范!"); }else if(totalPages<val){ alert("页码超出范围!"); }else{ $('#pagination').twbsPagination("show",parseInt(val)); //提交后清除输入内容 $('#ins').val(''); } }); }); </script>
<!-------------------------------------以下为php脚本代码---------------------------------------->
//数据库连接部分省略
public function test2($startpage,$pagesize){ $data = array(); $db = Db::table('net_table')->page($startpage,$pagesize)->select(); $counts = Db::table('net_table')->count(); $data['data']=$db; $data['count']=$counts; return json_encode($data); }
//结果展示如下