jQuery刷新当前分页特效插件

简要教程

这是一款jQuery刷新当前分页不变，无刷新分页效果。支持当前分页跳转代码。

使用方法

在页面引入以下jquery.min.js、jquery.page.js这两个JS文件

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.page.js"></script>

<script type="text/javascript">
var tiaoshu=1000;//数据的条数
var yexian=4;//每页几条数据
var ye=  Math.ceil(tiaoshu/yexian);//可以分为几页
var currentUrl01 = decodeURI(window.location.href);
var arr01 = currentUrl01.split("?");
$('#zongye').text(ye);
$('#dang').html(arr01[1]);
$(function () {
    $('#tiao').val(arr01[1]);
    setTimeout(function () {
        $("#zhuan").click()
    },10);
});
function bian(yeshu){
    var stateObject = {};
    var title = "";
    var newUrl ="" ;
    if(arr01[0]!=parseInt($('#dang').text())){
        newUrl =arr01[0]+"?"+yeshu;
        history.pushState(stateObject,title,newUrl);
    }
}
  
////////////////////////////////这里面获取数据  p 为当前页数
$(".tcdPageCode").createPage({
    pageCount:ye,
    current:1,
    backFn:function(p){
        console.log(p);
        bian(p);
    }
});
</script>

Html代码

<div style="width:50% ;margin: 0 auto">
  <div style="float: left" class="tcdPageCode"></div>
  <div style="float: right;margin-top: 20px;font-size: 14px;margin-right:30px;"  id="aaa"><span style="color: blue">当前页面:<span style="color: red;font-size: 12px;" id="dang">1</span>/<span style="font-size: 12px;" id="zongye">10</span></span>
    <input onKeyUp="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" id="tiao" style="width: 25px;height: 16px;margin-left: 5px;border: 1px solid blue;" value="1">
    <button style="font-size: 12px;background-color: blue;border-radius: 5px;color: #ffffff;border: 1px solid blue;padding: 1px 2px;margin-left: 5px;cursor: pointer" id="zhuan">跳转</button>
  </div>
  <div style="clear: both"></div>
</div>