前后台交互，数据分页展示

<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);
   }

//结果展示如下