JS原生分页模板—HTML+JS(样式JQeryUI)--PHP脚本

---------------------------------HTML--------------------------------

<!-- 分页start -->
<div class="u-page fix pt20 pl20 pb20" id="pageinfo">
<div class="fl">共 <i class="u-text-orange"><?=$count?></i> 条数据</div>
<div class="pagers fr">
<span class="pr10">每页</span>
<div class="u-select-control u-xs-select-control w75 fl">
<select name="pageSize">
<option value="<?=$pageSize?>" id="op"><?=$pageSize?></option>
<option value="10" id="op10">10</option>
<option value="15" id="op15">15</option>
<option value="20" id="op20">20</option>
</select>
</div>
<?php
if(!isset($currPage)){
$currPage = 4;
$total = 8;
}
?>
<span class="pl10 pr5">条</span>
<a class="prev" href="javascript:;" id="prev"><i class="u-triangle u-triangle-right"></i>prev</a>
<a class="page" href="javascript:;" id="page1">1</a>
<span class="more" id="firstmore">...</span>
<a class="page" href="javascript:;" id="page2"><?=$currPage-1 ?></a>
<a class="page current" href="javascript:;" id="page3"><?=$currPage ?></a>
<a class="page" href="javascript:;" id="page4"><?=$currPage+1 ?></a>
<span class="more" id="secondmore">...</span>
<a class="page" href="javascript:;" id="page5"><?=$total ?></a>
<a class="next" href="javascript:;" id="next"><i class="u-triangle u-triangle-left"></i>next</a>
<span class="pl10 ml10 pr10">跳转到</span>
<span><input class="u-input-control u-xs-input-control" type="text" id="searchpage"></span>
<span class="pl10">页</span>
<a href="javascript:;" id="search">go</a>
</div>
</div>
<!-- 分页end -->

--------------JSJSJSJSJSJSJSJSJSJS-------------------------

//--------------------------------------分页开始--------------------------------------------------
var total = parseInt($("#page5").html());//总页数
var currpage = parseInt($(".current").html());//当前页
var pageSize = parseInt($("select[name='pageSize']").val());//每页记录数
var count = parseInt($(".u-text-orange").html());//总记录数
var pathname = window.location.pathname; //当前的链接地址
if(count <= parseInt($("#op10").html())){
$("#pageinfo").hide();
}

if($('tbody').find('td').html() === null || $('tbody').find('td').html() === ""){
$("#pageinfo").hide();
}

if($("#op").html() === $("#op10").html()){
$("#op10").hide();
}

if($("#op").html() === $("#op15").html()){
$("#op15").hide();
}

if($("#op").html() === $("#op20").html()){
$("#op20").hide();
}

if(count <= parseInt($("#op10").html()) ){
$("#op15").hide();
$("#op20").hide();
}

if( count > parseInt($("#op10").html()) && count <= parseInt($("#op15").html()) ){
$("#op20").hide();
}

if( total === 1){
$("#page1").hide();
$("#firstmore").hide();
$("#page2").hide();
$("#page4").hide();
$("#secondmore").hide();
$("#page5").hide();
//------只有一页时隐藏搜索页码功能---
// $(".pl10 ml10 pr10").hide();
// $("#searchpage").hide();
// $(".pl10").hide();
// $("#search").hide();
}

if((total - currpage) === 2 ){
$("#secondmore").hide();
}

if((total - currpage) === 1 ){
$("#secondmore").hide();
$("#page4").hide();
}

if(currpage === total){
$("#page4").hide();
$("#secondmore").hide();
$("#page5").hide();
}

if(currpage === 3 ){
$("#firstmore").hide();
}

if(currpage === 1 ){
$("#page1").hide();
$("#firstmore").hide();
$("#page2").hide();
}

if(parseInt($("#page2").html()) === 1){
$("#firstmore").hide();
$("#page2").hide();
}

$("select[name='pageSize']").change(function () {
var pageSize = parseInt($(this).val());
parent.location.href = pathname + "?page="+currpage+"&pageSize="+pageSize;

});

$("#prev").click(function(){
if(currpage !== 1){
var page = currpage - 1;
parent.location.href = pathname + "?page="+page+"&pageSize="+pageSize;
}
});

$("#page1").click(function(){
var page = $(this).html();
parent.location.href = pathname + "?page="+page+"&pageSize="+pageSize;
});

$("#page2").click(function(){
var page = $(this).html();
parent.location.href = pathname + "?page="+page+"&pageSize="+pageSize;
});

$("#page3").click(function(){
var page = $(this).html();
var pathname = window.location.pathname;
parent.location.href = pathname + "?page="+page+"&pageSize="+pageSize;
});

$("#page4").click(function(){
var page = $(this).html();
parent.location.href = pathname + "?page="+page+"&pageSize="+pageSize;
});

$("#page5").click(function(){
var page = $(this).html();
parent.location.href = pathname + "?page="+page+"&pageSize="+pageSize;
});

$("#next").click(function(){
if(currpage !== total){
var page = currpage + 1;
parent.location.href = pathname + "?page="+page+"&pageSize="+pageSize;
}
});

$("#search").click(function(){
var page = $("#searchpage").val();
// if(total === 1){
// page = 1;//当总页数只有一页的时候，输入的任何页码都会变为1
// }
if(total !== 1){
parent.location.href = pathname + "?page="+page+"&pageSize="+pageSize;
}
});
});
//------------------------------------分页结束--------------------------------------------------