html加css
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.page-text {display: inline-block;margin-right: 25px;}
.page-text1 {display: inline-block;margin-left: 10px;}
.page-text2 {display: inline-block;margin-right: 10px;}
.page-num-input {width: 45px;margin: 0 5px 0 5px;}
.page-hover {cursor: pointer;}
input[type="date"] {height: 26px;}
</style>
</head>
<body>
<!--分页-->
<div id="pageBox"></div>
</body>
</html>
js:
/*引用jquery*/<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
/**
* 分页
* @param {string} id -- 分页要插入的位置
* @param {object} data -- 分页的数据:总条数、当前页码、每页条数
* @param {funtion} fun -- 回调函数
*
* @email 3204836547@qq.com
*
*/
jQuery.setPage = function(id,data,fun){
var thisCurrent,thisTotalData;
/*先进行数据判断,总条数,页码,每页条数这三个参数缺一不可*/
if((data.totalData || data.totalData == 0) &&data.current && data.showData) {
/*先清空页码,再渲染,以防止重复显示*/
$('#'+id).html('');
thisCurrent = data.current;
thisTotalData = data.totalData;
/*总页数*/
var totalNum = Math.ceil(thisTotalData/data.showData);
if(thisTotalData == 0) {
totalNum = 1;
}
var pageElement = '<div class="">'+
'<span class="" id="">总记录数:</span>'+
'<span class="page-text" id="totalNum">'+thisTotalData+'</span>'+
'<span class="page-hover page-text" id="indexBtn">首页</span>'+
'<span class="page-hover" id="prevBtn">上一页</span>'+
'<span class="page-text1" id="pageThisNum">'+data.current+'</span>'+
'<span class="" id="">/</span>'+
'<span class="page-text2" id="pageTotalNum">'+totalNum+'</span>'+
'<span class="page-hover page-text" id="nextBtn">下一页</span>'+
'<span class="page-hover page-text" id="lastBtn">尾页</span>'+
'<span class="page-hover" id="goPageBtn">go</span>'+
'<input type="number" class="page-num-input" min="1" max="'+totalNum+'" id="goPageNum" />页'+
'</div>';
$('#'+id).append(pageElement);
/*首页*/
$("#indexBtn").click(function() {
if(thisCurrent == 1) {
return;
}else {
thisCurrent = 1;
fun(thisCurrent);
}
});
/*上一页*/
$("#prevBtn").click(function() {
if(thisCurrent <= 1) {
return;
}else {
thisCurrent--;
fun(thisCurrent);
}
});
/*下一页*/
$("#nextBtn").click(function() {
if(thisCurrent == totalNum) {
return;
}else {
thisCurrent++;
fun(thisCurrent);
}
});
/*尾页*/
$("#lastBtn").click(function() {
if(thisCurrent == totalNum) {
return;
}else {
thisCurrent = totalNum;
fun(thisCurrent);
}
});
/*跳转页*/
$("#goPageBtn").click(function() {
if(thisCurrent == $('#goPageNum').val()) {
return;
}else {
thisCurrent = $('#goPageNum').val();
fun(thisCurrent);
}
});
/*输入页码不能大于最大页码数,也不能小于1*/
$('#goPageNum').blur(function() {
if($(this).val() > totalNum) {
$(this).val(totalNum);
}
if($(this).val() < 1) {
$(this).val(1) ;
}
})
}
}
/*分页参数*/
var pageData = {
totalData: 100,
showData: 10,
current: 1
};
$(function(){
showData();
})
/*获取列表方法*/
function showData(){
/*分页调用*/
$.setPage('pageBox',pageData,function(index){
pageData.current = index;
data.pageNo = index;
showData();
});
}
/*运行结果*/