效果展示
html寫div
<div id="barcon" name="barcon" class="page"></div>
html中引入css
<head>
<link rel="stylesheet" type="text/css" href="operationPortal/css/toPage.css" />
</head>
引入並使用js
<script src="operationPortal/js/toPage.js"></script>
<script>
var totalPage = ${pageInfo.totalPage};
var totalCount = ${pageInfo.totalCount};
var pageSize = ${pageInfo.pageSize};
var currentPage=1;
var pageDate={
obj_box:'.page',//翻頁容器
total_item:totalCount,//條目總數
per_num:pageSize,//每頁條目數
current_page:currentPage//當前頁
};
page_ctrl(pageDate);</script>
toPage.js 代碼
注意其中點擊觸發的搜索方法名是 search()，所以主頁面中搜索方法也要寫成search()，以便匹配。
function page_ctrl(data_obj) {
var obj_box=(data_obj.obj_box!== undefined)?data_obj.obj_box:function () {
return;
};// 翻頁容器dom對象,必要參數
var total_item=(data_obj.total_item!== undefined)?parseInt(data_obj.total_item):0;// 數據條目總數,默認爲0,組件將不加載
var per_num=(data_obj.per_num!== undefined)?parseInt(data_obj.per_num):10;// 每頁顯示條數,默認爲10條
var current_page=(data_obj.current_page!== undefined)?parseInt(data_obj.current_page):1;// 當前頁,默認爲1
var total_page=Math.ceil(total_item/per_num);// 計算總頁數,不足2頁,不加載組件
if(total_page<2){
return;
}
// 在指定容器內加載分頁數據
$(obj_box).append('<div class="page_content"></div>');
// 在指定容器內加載分頁插件
$(obj_box).append('<div class="page_ctrl"></div>');
function page_even() {
/* 加載數據 */
function change_content() {
/* 此處根據項目實際自行編寫頁面顯示內容的方法,舉例說明: */
var page_content='<ul style="width: 300px;margin: 10px auto;">';// 當前頁內容
for(var i=0;i<per_num;i++){
page_content+='<li>'+((current_page-1)*per_num+i+1)+',分頁條目</li>';
}
page_content+='</ul>';
$(obj_box).children('.page_content').html(page_content);
}
/* change_content(); */
var inp_val=(current_page==total_page)?1:current_page+1;// 跳轉頁數,input默認顯示值
var append_html='<button class="prev_page">上一頁</button>';
for(var i=0;i<total_page-1;i++){
if(total_page>8&¤t_page>6&&i<current_page-3){
if(i<2){
append_html+='<button class="page_num">'+(i+1)+'</button>';
}
else if(i==2){
append_html+='<span class="page_dot">•••</span>';
}
}
else if(total_page>8&¤t_page<total_page-3&&i>current_page+1){
if(current_page>6&&i==current_page+2){
append_html+='<span class="page_dot">•••</span>';
}else if(current_page<7){
if(i<8){
append_html+='<button class="page_num">'+(i+1)+'</button>';
}else if(i==8){
append_html+='<span class="page_dot">•••</span>';
}
}
// append_html+='<span class="page_dot">•••</span>';
}
else{
if(i==current_page-1){
append_html+='<button class="page_num current_page">'+(i+1)+'</button>';
}
else{
append_html+='<button class="page_num">'+(i+1)+'</button>';
}
}
}
if(current_page==total_page){
append_html+='<button class="page_num current_page">'+(i+1)+'</button>';
}else{
append_html+='<button class="page_num">'+(i+1)+'</button>';
}
append_html+='<button class="next_page">下一頁</button><span class="page_total">共 '+total_page+' 頁 共'+total_item+'條, 到第</span><input class="input_page_num" type="text" value="'+inp_val+'"><span class="page_text">頁</span><button class="to_page_num">確定</button>';
$(obj_box).children('.page_ctrl').append(append_html);
if(current_page==1){
$(obj_box+' .page_ctrl .prev_page').attr('disabled','disabled').addClass('btn_dis');
}else{
$(obj_box+' .page_ctrl .prev_page').removeAttr('disabled').removeClass('btn_dis');
}
if(current_page==total_page){
$(obj_box+' .page_ctrl .next_page').attr('disabled','disabled').addClass('btn_dis');
}else{
$(obj_box+' .page_ctrl .next_page').removeAttr('disabled').removeClass('btn_dis');
}
}
page_even();
$(obj_box+' .page_ctrl').on('click','button',function () {
var that=$(this);
if(that.hasClass('prev_page')){
if(current_page!=1){
current_page--;
that.parent('.page_ctrl').html('');
search(current_page);
}
}
else if(that.hasClass('next_page')){
if(current_page!=total_page){
current_page++;
that.parent('.page_ctrl').html('');
search(current_page);
}
}
else if(that.hasClass('page_num')&&!that.hasClass('current_page')){
current_page=parseInt(that.html());
that.parent('.page_ctrl').html('');
search(current_page);
}
else if(that.hasClass('to_page_num')){
current_page=parseInt(that.siblings('.input_page_num').val());
that.parent('.page_ctrl').html('');
search(current_page);
}
});
}
toPage.css 代碼
.page_ctrl{
text-align: center;
margin: 10px auto;
box-sizing: border-box;
}
.page_ctrl *{
line-height: 26px;
}
.page_ctrl button{
margin:0 3px;
min-width:30px;
background: #ffffff;
border: 1px solid #e5e5e5;
color: #5e5e5e;
cursor: pointer;
outline: none;
text-align: center;
}
.page_ctrl button:hover{
background: #586EFA;
color: #ffffff;
}
.page_ctrl .btn_dis{
cursor: default;
opacity: .7;
background: #eeeeee;
color: #5e5e5e;
}
.page_ctrl .btn_dis:hover{
background: #eeeeee;
color: #5e5e5e;
}
.page_ctrl .current_page{
background: #586EFA; /*原來是#0eb0d2*/
color: #ffffff;
}
.page_ctrl .input_page_num{
width:30px;
height: 26px;
margin:0 3px;
padding: 0;
text-align: center;
background: #ffffff;
border: 1px solid #e5e5e5;
color: #5e5e5e;
outline: none;
}
.page_ctrl .page_total,.page_ctrl .page_text{
color: #AFC8FA;
font-size: 13px;
}