基于springboot和ajax的简单项目 04.html文件的js用来分页功能，有专门的分页页面html文件（下）

01，因为分页的功能是很多场景都需要使用的，所以可以单独提出来，到时候加载到相关html的div中就好了。
最开始初始化分页html文件（page.html）的全部代码：（直接使用的是ul，li）

<ul class="pagination pagination-sm no-margin pull-right">
    <li><a class="first">首页</a></li>
	<li><a class="pre">上一页</a></li>
	<li><a class="next">下一页</a></li>
	<li><a class="last">尾页</a></li>
	<li><a class="rowCount">总记录数(0)</a></li>
	<li><a class="pagesall">总页数(0)</a></li>
	<li><a class="pageCurrent">当前页(1)</a></li>
</ul>
<script type="text/javascript">

</script>

02.由于是不完整的html文件，所以，可以使用加载页面的标签。
在日志界面（log_list.html），有个div是专门加载分页的，id=pageid。

<div id="pageId" class="box-footer clearfix" dm="100">
			  
</div>

可以在page.html中去使用这个div（id=pageid），给相关的li标签添加点击事件。因为很多情况下都需要使用分页，所以js在page.html写比较好。

$(function(){
            //事件注册
             $("#pageId").on("click",".first,.pre,.next,.last",doJumpToPage);
})

03.更新分页界面的信息。
这个更新的操作，应该和成功查找数据后的操作一起同时发生。
也就是说，这个两个函数应该写在一起（并且page.html文件是不完整的html文件，所以，这个文件的函数是可以运行在加载的html文件上的）

在page.html文件中声明更新操作函数：（.html（）函数是更新html标签数据的jQuery函数）

 function doSetPagination(page){
            //1.始化数据
            $(".rowCount").html("总记录数("+page.rowCount+")");
            $(".pagesall").html("总页数("+page.pagesall+")");
            $(".pageCurrent").html("当前页("+page.pageCurrent+")");
           
    }

再在log_list.html文件中去运行这个函数（在更新table数据函数之后）。

function doHandleQueryResponseResult (result){ //JsonResult
           if(result.state==1){//ok
                //更新table中tbody内部的数据
                doSetTableBodyRows(result.data.rcords);//将数据呈现在页面上
                //更新页面page.html分页数据
                //doSetPagination(result.data); //此方法写到page.html中
            }else{
                alert(result.message);
            }  
 }

04.跳转界面
功能描述：在点击首页，上一页，下一页，尾页的时候，更新页面（table）的数据和当前页（li）的数据

使用的是data（）方法。因为其他的例如value（），text（）都不能满足要求，获取li标签上的pageCurrent的值

优化更新分页数据doSetPagination(page)函数，添加代码

//2.绑定数据(为后续对此数据的使用提供服务)
		$("#pageId").data("pageCurrent",page.pageCurrent);
		$("#pageId").data("pagesall",page.pagesall);

	function doSetPagination(page){
		//1.始化数据
		$(".rowCount").html("总记录数("+page.rowCount+")");
		$(".pagesall").html("总页数("+page.pagesall+")");
		$(".pageCurrent").html("当前页("+page.pageCurrent+")");
		//2.绑定数据(为后续对此数据的使用提供服务)
		$("#pageId").data("pageCurrent",page.pageCurrent);
		$("#pageId").data("pagesall",page.pagesall);
	}

跳转函数，也就是点击事件响应的函数

使用标签的class属性，来分别确定是哪个li标签，从而修改相应的pageCurrent的值，例如首页的话，pageCurrent=1。上一页的话，是pageCurrent–，下一页的话，是pageCurrent++，尾页的话，是pageCurrent=pageall。执行真正的跳转函数，也就是log_list.html文件上的那个更新table的函数（getjson的那个函数）（这也是点击事件要实现的功能之一，而后在回调函数中，再去执行doSetPagination(page)更新li中的数据 ）

function doJumpToPage () {
		//1.获取点击对象的class值
		var cls=$(this).prop("class");//Property
		//2.基于点击的对象执行pageCurrent值的修改
		//2.1获取pageCurrent,pageCount的当前值
		var pageCurrent=$("#pageId").data("pageCurrent");
		var pagesall=$("#pageId").data("pagesall");
		//2.2修改pageCurrent的值
		if(cls=="first"){//首页
			pageCurrent=1;
		}else if(cls=="pre"&&pageCurrent>1){//上一页
			pageCurrent--;
		}else if(cls=="next"&&pageCurrent<pageCount){//下一页
			pageCurrent++;
		}else if(cls=="last"){//最后一页
			pageCurrent=pagesall;
		}else{
			return;
		}
		//3.对pageCurrent值进行重新绑定
		$("#pageId").data("pageCurrent",pageCurrent);
		//4.基于新的pageCurrent的值进行当前页数据查询
		doGetObjects();

	}

因为是使用的data（）方法来保存要返回的pageCurrent值，所以，是要修改申请后台数据的函数的内容（pageCurrent是一个要传入后台的参数），不会再去写死pageCurrent的值是1，而是去接受由page.html文件doJumpToPage 函数传递过来的pageCurrent。

修改的代码：

var pageCurrent=$("#pageId").data("pageCurrent");
           //为什么要执行如下语句的判定，然后初始化pageCurrent的值为1
           //pageCurrent参数在没有赋值的情况下，默认初始值应该为1.
           if(!pageCurrent) pageCurrent=1;
           var params={"pageCurrent":pageCurrent};//pageCurrent=2

总体的代码是：

function doGetObjects() {
        //发送json请求，接受数据
		//1.定义url和参数
		var pageCurrent=$("#pageId").data("pageCurrent");
		//为什么要执行如下语句的判定，然后初始化pageCurrent的值为1
		//pageCurrent参数在没有赋值的情况下，默认初始值应该为1.
		if(!pageCurrent) pageCurrent=1;
		var params={"pageCurrent":pageCurrent};//pageCurrent=2

		var url="log/doFindPageObjects";
		//2.发起异步请求,getjson方法
		$.getJSON(url,params,function (result) {
			//请问result是一个字符串还是json格式的js对象？对象
		console.log(result);
		dohandlerresult(result);
		})

	}