整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
項目開發過程中，分頁是少不了的，之前封裝了一個分頁組件，樣式是基于bootstrap的樣式，當然也可以自己來修改；
別的不說，上圖上代碼；
bootstrap樣式分頁
以下是相關代碼：
/***=======================分頁樣式==================================***/
/*分頁樣式*/
.page{
display:inline-block;
width:100%;
text-align:center;
height:35px;
line-height:35px;
background-color:none;
}
.page .pagination{
margin:0px !important;
}
.page .pagination li a{
/*修改按鈕樣式*/
border:none !important;
background-color:transparent; !important;
color:#555;
cursor:pointer;
}
.page .pagination li a:hover,.page .pagination li a:focus,.page .pagination li a:active{
background-color:#ccc;
}
.page .pagination li.active a,.page .pagination li.active a:hover,.page .pagination li a:active,.page .pagination li a:focus{
color:#0099ff;
cursor:default;
background-color:none;
}
.pageinfo{
display:none !important;
}
/*隱藏分頁信息*/
.clickmore{ cursor:pointer; }
.pagination>.action>a:hover,.pagination>.action>a:focus{ color:#0099ff !important; cursor:default; }
/****======================分頁樣式結束============================***/上面是自己寫的分頁樣式，可自行修改之，下面是分頁組件代碼：
/**
* bootstrap 對應的獨立分析組件
* @demo
* pagination.init({
* selector : '.page', //選擇器，作為渲染目標,默認為 '.page.pagination',非必須
* count : 120, //為總記錄數，必須
* isTransform : false,//是否轉換為符合后臺需要的參數begin /end
* page : 1, //為當前頁碼，非必須
* pagesize : 10, //為每頁條數，默認10，非必須
* increment : 10, //為頁面存在的分頁增量，比如只顯示5個頁碼，非必須
* pageArray : [], //可以進行生成下拉框，比如 10，20，50 ，選擇不同的頁碼進行分頁，非必須
* previousTitle : '點擊查看',//為上一頁的title顯示，未實現；
* callback : function(pageObject){//為分頁點擊回調函數，必須
* console.log(pageObject);//pageObject= {page : 1,pagesize:10};回調函數返回值，包括下一個頁碼和每頁條數
* }
* });
* @since 2016年2月15日 15:18:36
* @author lixun
* @version 1.0
* @edited by lixun ,增加多實例；一個頁面多個分頁 ；
* 處理思路：
* 1\. 對應的每個selector有一個pagination,然后在調用的時候根據selector進行查找
* 2\. 處理的內容：1）分頁加載；2）事件綁定 3）回調函數
* 3\. 處理原則：平滑處理，原有的可繼續使用；
*/
var pagination = {
_defaultSelector : '.page .pagination', //默認選擇器
_defaultPagesize : 20, //默認分頁條數
_defaultIncrement : 10, //默認分的頁碼數
_defaultPageArray : [10,20,50,100], //默認的條碼下拉框
_map : { //用戶處理多實例增加的容器，不可覆蓋
//selector : {私有屬性}
//".page .column" : {}
},
//通用屬性
lastSelector : '',//上一個選擇器，用于開發者不傳遞參數的時候，去查找上一個選擇器用的。
previousTitle : '上一頁',
nextTitle : '下一頁',
previousContent : '上一頁',
nextContent : '下一頁',
//獲得分頁實例
_getPagination : function(selector){
if(null != selector && selector != '' && $(selector).length > 0){
return pagination._map[selector];
}else{
console.error('selector 傳參錯誤或$('+selector+')不存在!');
}
return null;
},
//獲得返回的字符串
pageArrayStr : function(selector,ps){
var pa = pagination._map[selector].pageArray;
if(null != pa && pa.length > 0){
var concatStr = '<select onchange="pagination.changePagesize(\''+(selector)+'\',event)" style="height:20px;line-height:20px;padding:0px;margin-top:-2px;">';
var i=0,max=pa.length;
for(;i<max;i++){
var v = pa[i];
concatStr += '<option value="'+v+'" '+(v == ps ? 'selected="true"' : '')+'>'+v+'</option>';
}
concatStr += '</select>';
return concatStr;
}
return "";
},
//綁定事件
bindEvent : function(selector){
if(selector && selector != ''){
var _tempPaginationInstance = pagination._map[selector] || {};
var _bindE = _tempPaginationInstance.bindE == true ? true : false;
if(_bindE == false){
_tempPaginationInstance.bindE = true;
pagination._map[selector] = _tempPaginationInstance;
//跳轉頁面
$(selector).delegate('li.unselect','click',pagination.clickpage);
//綁定上一頁事件
$(selector).delegate('li.pageup','click',pagination.pageup);
//綁定下一頁事件
$(selector).delegate('li.pagedown','click',pagination.pagedown);
//綁定前面頁面事件
$(selector).delegate('a.previous','click',pagination.previouspage);
//綁定后面頁面事件
$(selector).delegate('a.next','click',pagination.nextpage);
}
}
},
//分頁初始化
init : function(params){
//處理傳參數據
params = params || {};
params.count = params.count || 0;
params.pagesize = params.pagesize || pagination._defaultPagesize;
var paramSelector = pagination._defaultSelector;
if(params.selector){
paramSelector = params.selector;
}
//獲得選擇器后，進行實例處理
var paginationInstance = pagination._getPagination(paramSelector);
//傳參獲取最新配置
var tempPaginationInstance = {
selector : paramSelector,
page : params.page ? params.page : (paginationInstance && paginationInstance.action == true ? (paginationInstance.page ? paginationInstance.page : 1) : 1),
count : params.count || 0,
action : false,
bindE : false,//是否綁定事件
pagesize : params.pagesize,
callback : params.callback || $.noop,
pagenumber : (parseInt((params.count || 0)/(params.pagesize||pagination._defaultPagesize),10)+((params.count||0)%(params.pagesize||pagination._defaultPagesize)==0 ? 0 : 1)),//根據總數和一頁條數獲得頁碼數量
increment : params.increment || pagination._defaultIncrement,
pageArray : params.pageArray || pagination._defaultPageArray
};
if(paginationInstance && undefined != paginationInstance){
//存在實例,進行更新。
tempPaginationInstance.bindE = true;//如果存在的話，肯定綁定了
pagination._map[paramSelector] = $.extend(paginationInstance,tempPaginationInstance);
}else{
pagination._map[paramSelector] = tempPaginationInstance;//重新賦值
pagination.bindEvent(paramSelector);//綁定事件
}
pagination.loadPage(paramSelector);
pagination.lastSelector = paramSelector;
},
//點擊頁面數直接跳轉
clickpage : function(){
var $a = $(this).find('a');
var selector = $a.attr('selector');
var gonumber = parseInt($a.html(),10);
$(selector+' li.active').addClass('unselect').removeClass('active');
$(this).addClass('active').removeClass('unselect');
pagination.gopage(selector,gonumber);
},
//向上翻頁
pageup : function(){
var $a = $(this).find('a');
var selector = $a.attr('selector');
var _tempInstance = pagination._map[selector];
if(_tempInstance){
//得到當前頁面，然后翻頁，如果在邊界，那么就要進行觸發一次翻頁事件
var $actel = $(selector+' li.active a');
var nownumber = parseInt($actel.html(),10);
if(nownumber == 1){
return false;
}else{
pagination.gopage(selector,nownumber-1);
}
}
},
//向下翻頁
pagedown : function(){
var $a = $(this).find('a');
var selector = $a.attr('selector');
var _tempInstance = pagination._map[selector];
if(_tempInstance){
var pagenumber = _tempInstance.pagenumber;
//獲得該實例的分頁碼數
var $actel = $(selector+' li.active a');
var nownumber = parseInt($actel.html(),10);
if(nownumber == pagenumber){
return false;
}else{
pagination.gopage(selector,nownumber+1);
}
}
},
//前面頁面
previouspage : function(){
var selector = $(this).attr('selector');
var _tempInstance =pagination._map[selector];
if(_tempInstance){
var increment = _tempInstance.increment,
page = _tempInstance.page;
//判斷當前是第幾個，比如16，那么就以10的倍數向前翻頁
var $nowobj = $(selector+' a.previous').parent();
var nextnumber = parseInt($nowobj.next().children().html(),10);
var end = (nextnumber-1)%increment > 0 ? parseInt((nextnumber/increment),10)*increment : parseInt((nextnumber/increment-1),10)*increment;
pagination.gopage(selector, end+1);
}
},
//后面頁面
nextpage : function(){
//判斷當前點擊的哪些，比如：現在是5，點擊生成6...
var selector = $(this).attr('selector');
var _tempInstance = pagination._map[selector];
if(_tempInstance){
var increment = _tempInstance.increment;
var $nowobj = $(selector+' a.next').parent();
var prenumber = parseInt($nowobj.prev().children().html(),10);
if(parseInt(prenumber/5,10) ==1){//說明在第一頁，要從5加載5個，直到結束
pagination.addPage(selector,$nowobj,5);
}else{
//第二次 增加頁面數量了，應該是從10開始了...
pagination.addPage(selector,$nowobj,increment);
}
}
},
addPage : function(selector,domobj,size){
var _tempInstance = pagination._map[selector];
if(_tempInstance){
var pagenumber = _tempInstance.pagenumber,
increment = _tempInstance.increment;
var start = parseInt(domobj.prev().children().html(),10);
pagination.gopage(selector, start+1);
}
},
loadPage : function(selector){
//根據selector獲得count,pagesize,page
var _tempInstance = pagination._map[selector];
if(!_tempInstance){
console.log('error : _tempInstance is null now ,check pagination params please!');
return null;
}
var count = _tempInstance.count,
pagesize = _tempInstance.pagesize,
page = _tempInstance.page,
increment = _tempInstance.increment,
pageArrayStr = pagination.pageArrayStr(selector,pagesize),
pagenumber = _tempInstance.pagenumber;
var $page = $(selector);
//清空內容
$page.html('');
var pageno = pagenumber;
page = page > pageno ? 1 : page; //如果當前頁碼樹大于總頁碼數則置為1，否則為當前頁碼數；
//如果頁數超過10，則增...,以5個數字遞增，
//顯示到page頁面的下一個5的倍數上。
var endpage = (parseInt(page/increment,10))*increment > pageno ? pageno : (parseInt(page/increment,10)+(page%increment==0 ? 0 : 1))*increment;
if(pageno<=increment){
endpage = pageno;
}
var pageHtml = '';
if(pageArrayStr== ''){
}else if(pagination._map[selector].pageArray.length==1){
pageHtml = '<li class="pageinfo">共'+count+'條 </li>';
}else{
pageHtml = '<li class="pageinfo">共'+count+'條 , 每頁'+pageArrayStr+'條</li>';
}
$page.append(pageHtml);
$page.append('<li class="prev pageup '+(page ==1 ? 'disabled' : '')+'"><a title="'+pagination.previousTitle+'" href="javascript：;" selector="'+(selector)+'">'+pagination.previousContent+'</a></li>');
//判斷第幾頁
var start = 0;
if(page > increment && page <= pageno){
$page.append('<li><a class="previous" href="javascript：;" selector="'+(selector)+'">...</a></li>');
//給一個自定義增長數量，比如5個，每次增長五個，當前頁面6頁面，增長5個為10個，start page為 6
start = parseInt((page%increment==0 ? (page-1) : page)/increment,10)*increment;
endpage = (start+increment ) > pageno ? pageno : (start+increment);//如果開始頁面加上增加頁面大于最大頁碼數，則等于最大頁碼數
if(endpage-page <increment){
start = endpage-increment;
}
}
for(var i=start;i<(endpage == 0?1:endpage);i++){
var listr = '<li class="unselect"><a href="javascript：;" selector="'+(selector)+'">'+(i+1)+'</a></li>';
//在第page頁面增加樣式
if((page-1) == i){
listr = '<li class="active"><a selector="'+(selector)+'">'+(i+1)+'</a></li>';
}
$page.append(listr);
}
if(pageno > 5 && endpage != pageno){
$page.append('<li><a class="next" href="javascript：;" selector="'+(selector)+'">...</a></li>');
}
$page.append('<li class="next pagedown '+(page == pageno ? 'disabled' : '')+'"><a title="'+pagination.nextTitle+'" href="javascript：;" selector="'+(selector)+'">'+pagination.nextContent+'</a></li>');
},
//跳轉頁面
gopage : function(selector,page){
var _tempInstance = pagination._map[selector];
if(_tempInstance){
_tempInstance.page = page;
_tempInstance.action = true;
_callback = _tempInstance.callback;
_pagesize = _tempInstance.pagesize;
pagination._map[selector] = _tempInstance;
_callback(pagination.transform({
page : page,
rows : _pagesize
}));
}
},
/*返回現在的頁面*/
getNowPage : function(selector){
selector = selector || (pagination.lastSelector || pagination._defaultSelector);//獲取上一個選擇器
var _tempInstance = pagination._map[selector];
if(_tempInstance){
_tempInstance.action = true;
var _page = _tempInstance.page,
_pagesize = _tempInstance.pagesize;
pagination._map[selector] = _tempInstance;
return pagination.transform({
page : _page,
rows : _pagesize
});
}
return null;
},
transform : function(paginationParams){
if(pagination.isTransform && pagination.isTransform == true){
var p = paginationParams.page || 1;
var rows = paginationParams.pagesize || 10;
return {
begin : (p-1)*rows+1,
end : p*rows
};
}
return paginationParams;
},
//返回分頁參數，以供列表頁面加載數據使用
getParams :function(selector){
selector = selector || (pagination.lastSelector || pagination._defaultSelector);//獲取上一個選擇器
var _tempInstance = pagination._map[selector];
if(_tempInstance){
var _pagesize = _tempInstance.pagesize;
return pagination.transform({
//第幾頁，一頁有多少條記錄
page:1,
rows : _pagesize
});
}
return null;
},
changePagesize : function(selector,ev){
var t = ev.currentTarget || ev.target || ev.srcElement,
$t = $(t),
v=$t.find('option:selected').val();
// selector = $t.attr('selector');
var _tempInstance = pagination._map[selector];
if(_tempInstance){
_tempInstance.pagesize = v;
var _callback = _tempInstance.callback;
pagination._map[selector] = _tempInstance;
//重新調用callback方法
_callback(pagination.transform({
page : 1,
rows : v
}));
}
}
};文章首發于 BUG集散地 ,https://chrunlee.cn/article/pagination-web-javascript.html
在Android應用程序中渲染HTML并實現分頁，可以使用WebView組件。WebView是Android提供的用于顯示Web內容的控件，可以加載HTML頁面并進行渲染。下面是一個簡單的示例代碼，展示了如何在Android應用程序中使用WebView實現HTML渲染和分頁功能：
在上述代碼中，我們首先在布局文件（activity_main.xml）中添加一個WebView組件。然后，在MainActivity中，我們獲取WebView實例，并對其進行一些設置，例如啟用JavaScript和加載HTML頁面。
HTML頁面可以通過loadUrl方法加載。在示例中，我們加載的是file:///android_asset/page.html，它假設HTML文件存儲在應用的assets目錄中。
為了在WebView中實現分頁功能，可以在HTML頁面中使用CSS的分頁屬性。例如，在CSS中可以設置-webkit-column-count屬性來指定列數，從而實現分頁效果。具體的CSS設置可以根據實際需求進行調整。
通過以上代碼，Android應用程序將加載并渲染HTML頁面，并在WebView中顯示。如果HTML頁面包含分頁屬性，將會自動分頁顯示內容。
需要注意的是，為了能夠加載本地的HTML文件，需要在AndroidManifest.xml文件中添加適當的權限，例如：
你可以根據自己的需求對WebView進行更多的定制和擴展，以實現更復雜的HTML渲染和分頁功能。
JS代碼：
/*
* 分頁方法
* author:Mr.X
* time:2017/12/27
*/
Request = GetRequest();
var searchType = $("#search_type").val();
var key= Request[searchType];
var keyIndex = key.lastIndexOf('.');
if(keyIndex != -1){
key = key.substring(0, keyIndex)
}
var IFRAME_SRC="http://"+window.location.host+"/search/"+searchType+"/"+key;//初始url
var page=Request['p'];//獲取url中的地址參數
if(page==null||page==""){
page=1;
}
var limit=12;//每頁限制條數
var page_all="";//總頁數
$(document).ready(function (){
page_list();
});
function page_list(){
var count=$("#page_count").html();//新聞總數
var remainder=count%limit;//判斷是否有余數，有余數的話，整除后，余數+1，就是總頁數；如果余數為0，即為整除，則整除后的的數即為總頁數
if(count<=limit){
//總數達不到每頁顯示的條數，則不顯示頁碼
}else{
//總數超過一頁，即總數超過limit規定的條數，顯示分頁
//先判斷余數為0的情況：如果余數為0，即為整除，則整除后的的數即為總頁數
if(remainder==0){
var page_number=count/limit;//總頁碼數
page_number=parseInt(page_number);//將頁碼數由字符串類型轉換為整形
page_all=page_number;
//如果頁碼數不超過5，則顯示全部分頁總數
if(page_number<6){
page=parseInt(page);//將獲取到的頁碼數轉換成整數
var page_pre=page-1;
var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一頁
var url_index=IFRAME_SRC+'/p/'+1;//首頁
var url_last=IFRAME_SRC+'/p/'+page_number;//尾頁
if(page==1){
//如果頁碼page=1，則隱藏上一頁
//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一頁</a></li>");
}else{
//如果頁碼page不是1，則顯示首頁和上一頁
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首頁</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一頁</a></li>");
}
//對頁碼進行賦值
for(var i=0; i<page_number; i++){
var j=i+1;
var url=IFRAME_SRC+'/p/'+j;
if(page==j){
//如果是當前頁，則給當前頁加上active
$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}else{
//如果不是當前頁，則去掉active
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}
}
//page=parseInt(page);
var page_next=page+1;
var url_next=IFRAME_SRC+'/p/'+page_next;//下一頁
if(page==page_number){
//如果是最后一頁，則隱藏下一頁功能
//$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一頁</a></li>");
}else{
//如果不是最后一頁，則顯示最后一頁和尾頁
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一頁</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾頁</a></li>");
}
}
//如果頁碼超過5，則分塊顯示:點擊第一頁，顯示：1/2/3/4/5/..page_number,點擊第二頁，顯示：1/2/3/4/5/..page_number,點擊第三頁，顯示：1/2/3/4/5/..page_number,點擊第四頁：顯示：1/2/3/4/5/..page_number,點擊第五頁，顯示：1...3/4/5/6/7/..page_number;點擊page_number,顯示:1../page_number-4/page_number-3/page_number-2/page_number-1/page_number
else{
if(page==1||page==2||page==3||page==4){
page=parseInt(page);//將字符串轉換為整形
var page_pre=page-1;
var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一頁
var url_index=IFRAME_SRC+'/p/'+1;//首頁
var url_last=IFRAME_SRC+'/p/'+page_number;//最后一頁
if(page==1){
//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一頁</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首頁</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一頁</a></li>");
}
for(var i=0; i<page_number; i++){
if(i>4){
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>..."+page_number+"</a></li>");
break;
}
var j=i+1;
var url=IFRAME_SRC+'/p/'+j;
//$(window.parent.document).find("#tab_13 iframe").attr("src",url);
//url=$(window.parent.document).find("#tab_13 iframe").attr("src");
if(page==j){
$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}
}
page=parseInt(page);
var page_next=page+1;
var url_next=IFRAME_SRC+'/p/'+page_next;
if(page==page_number){
//$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一頁</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一頁</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾頁</a></li>");
}
}else if(page==page_number-3||page==page_number-2||page==page_number-1||page==page_number){
page=parseInt(page);//將字符串轉換為整形
var page_pre=page-1;
var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一頁
var url_index=IFRAME_SRC+'/p/'+1;//首頁
var url_last=IFRAME_SRC+'/p/'+page_number;//最后一頁
if(page==1){
//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一頁</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首頁</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一頁</a></li>");
}
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_index+"'>"+1+"...</a></li>");
for(var i=page_number-4; i<page_number+1; i++){
var j=i;
var url=IFRAME_SRC+'/p/'+j;
if(page==j){
$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}
}
page=parseInt(page);
var page_next=page+1;
var url_next=IFRAME_SRC+'/p/'+page_next;
if(page==page_number){
//$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一頁</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一頁</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾頁</a></li>");
}
}else{
page=parseInt(page);//將字符串轉換為整形
var page_pre=page-1;
var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一頁
var url_index=IFRAME_SRC+'/p/'+1;//首頁
var url_last=IFRAME_SRC+'/p/'+page_number;//最后一頁
if(page==1){
//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一頁</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首頁</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一頁</a></li>");
}
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_index+"'>"+1+"...</a></li>");
for(var i=page-3; i<page+2; i++){
var j=i+1;
var url=IFRAME_SRC+'/p/'+j;
if(page==j){
$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}
}
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>..."+page_number+"</a></li>");
page=parseInt(page);
var page_next=page+1;
var url_next=IFRAME_SRC+'/p/'+page_next;
if(page==page_number){
//$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一頁</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一頁</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾頁</a></li>");
}
}
}
$("#page_list").append("<span id='goto-page'>到第</span><input id='selcet_page' value='"+page+"'/><span id='go-page'>頁</span>");
$("#page_list").append("<button type='button' id='change_page'>確定</button>");
}
//如果余數不為0，則將整除后的整數+1，即為總頁碼
else{
var page_number=count/limit;
page_number=parseInt(page_number);
page_number=page_number+1;
page_all=page_number;
//如果頁碼數不超過5，則顯示全部分頁總數
if(page_number<6){
page=parseInt(page);//將獲取到的頁碼數轉換成整數
var page_pre=page-1;
var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一頁
var url_index=IFRAME_SRC+'/p/'+1;//首頁
var url_last=IFRAME_SRC+'/p/'+page_number;//尾頁
if(page==1){
//如果頁碼page=1，則隱藏上一頁
//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一頁</a></li>");
}else{
//如果頁碼page不是1，則顯示首頁和上一頁
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首頁</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一頁</a></li>");
}
//對頁碼進行賦值
for(var i=0; i<page_number; i++){
var j=i+1;
var url=IFRAME_SRC+'/p/'+j;
if(page==j){
//如果是當前頁，則給當前頁加上active
$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}else{
//如果不是當前頁，則去掉active
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}
}
//page=parseInt(page);
var page_next=page+1;
var url_next=IFRAME_SRC+'/p/'+page_next;//下一頁
if(page==page_number){
//如果是最后一頁，則隱藏下一頁功能
//$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一頁</a></li>");
}else{
//如果不是最后一頁，則顯示最后一頁和尾頁
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一頁</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾頁</a></li>");
}
}
//如果頁碼超過5，則分塊顯示:點擊第一頁，顯示：1/2/3/4/5/..page_number,點擊第二頁，顯示：1/2/3/4/5/..page_number,點擊第三頁，顯示：1/2/3/4/5/..page_number,點擊第四頁：顯示：1/2/3/4/5/..page_number,點擊第五頁，顯示：1...3/4/5/6/7/..page_number;點擊page_number,顯示:1../page_number-4/page_number-3/page_number-2/page_number-1/page_number
else{
if(page==1||page==2||page==3||page==4){
page=parseInt(page);//將字符串轉換為整形
var page_pre=page-1;
var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一頁
var url_index=IFRAME_SRC+'/p/'+1;//首頁
var url_last=IFRAME_SRC+'/p/'+page_number;//最后一頁
if(page==1){
//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一頁</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首頁</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一頁</a></li>");
}
for(var i=0; i<page_number; i++){
if(i>4){
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>..."+page_number+"</a></li>");
break;
}
var j=i+1;
var url=IFRAME_SRC+'/p/'+j;
if(page==j){
$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}
}
page=parseInt(page);
var page_next=page+1;
var url_next=IFRAME_SRC+'/p/'+page_next;
if(page==page_number){
//$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一頁</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一頁</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾頁</a></li>");
}
}else if(page==page_number-3||page==page_number-2||page==page_number-1||page==page_number){
page=parseInt(page);//將字符串轉換為整形
var page_pre=page-1;
var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一頁
var url_index=IFRAME_SRC+'/p/'+1;//首頁
var url_last=IFRAME_SRC+'/p/'+page_number;//最后一頁
if(page==1){
//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一頁</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首頁</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一頁</a></li>");
}
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_index+"'>"+1+"...</a></li>");
for(var i=page_number-4; i<page_number+1; i++){
var j=i;
var url=IFRAME_SRC+'/p/'+j;
if(page==j){
$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}
}
page=parseInt(page);
var page_next=page+1;
var url_next=IFRAME_SRC+'/p/'+page_next;
if(page==page_number){
//$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一頁</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一頁</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾頁</a></li>");
}
}else{
page=parseInt(page);//將字符串轉換為整形
var page_pre=page-1;
var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一頁
var url_index=IFRAME_SRC+'/p/'+1;//首頁
var url_last=IFRAME_SRC+'/p/'+page_number;//最后一頁
if(page==1){
//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一頁</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首頁</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一頁</a></li>");
}
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_index+"'>"+1+"...</a></li>");
for(var i=page-3; i<page+2; i++){
var j=i+1;
var url=IFRAME_SRC+'/p/'+j;
if(page==j){
$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}
}
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>..."+page_number+"</a></li>");
page=parseInt(page);
var page_next=page+1;
var url_next=IFRAME_SRC+'/p/'+page_next;
if(page==page_number){
//$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一頁</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一頁</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾頁</a></li>");
}
}
}
$("#page_list").append("<span id='goto-page'>到第</span><input id='selcet_page' value='"+page+"'/><span id='go-page'>頁</span>");
$("#page_list").append("<button type='button' id='change_page'>確定</button>");
}
}
}
//跳轉的到某一頁
$(document).on("click","#change_page",function(){
var page_num=$("#selcet_page").val();
page_num=parseInt(page_num);//將字符串轉換為整形
//go_text=page_num;
//alert(page_num);
if(page_num>page_all){
/*$('.success_message').show();
$("#message_info").html('頁碼超出范圍，請輸入正確頁碼'); */
alert('頁碼超出范圍，請輸入正確頁碼');
return false;
}
if((/^(\+|-)?\d+$/.test( page_num ))&&page_num>0){
location.href=IFRAME_SRC+"/p/"+page_num;
}else{
/* $('.success_message').show();
$("#message_info").html('非法頁碼，請輸入正確頁碼');*/
/*alert('非法頁碼，請輸入正確頁碼');*/
layer.msg("非法頁碼，請重新輸入",{time: 2000});
return false;
}
//$("#selcet_page").html(go_text);
});
//獲取url參數
function GetRequest() {
var url = location.href; //獲取整個url
var theRequest = new Object();
if (url.indexOf("/") != -1) {
var str = url.substr(7);
strs = str.split("/");
for(var i = 0; i < strs.length; i ++) {
if(i==0){
}else{
theRequest[strs[i]]=decodeURIComponent(strs[i+1]);
i=i+1;
}
}
}
return theRequest;
}
//輸入框只能輸入數字
$(function(){
var bind_name = 'input';
if (navigator.userAgent.indexOf("MSIE") != -1) {
//ie情況下特殊處理
bind_name = 'propertychange';
}
$('#selcet_page').bind(bind_name,function(){
var value = $("#selcet_page").val();
if((/^(\+|-)?\d+$/.test( value ))&&value>0&&value<(page_all+1))
{
}
else{
$("#selcet_page").val("");
return false;
}
});
})HTML代碼：<section class="page mt30 mb30">{php}if(isset($count)){{/php}<div id="page_count" style="display:none;">{$count}</div> <div class="dataTables_paginate paging_simple_numbers col-xs-12 marbtm10" id="example_paginate"> <ul class="pagination" id="page_list"> </ul> </div>{php}}{/php}</section>CSS代碼：#example_paginate{display: inline-block}.pagination>li{ display: inline-block;margin-right: 10px;padding: 5px 10px;cursor: pointer}.pagination>li>a{color: #fff}.pagination>li.active,.pagination>li:hover,#example_next:hover,#example_previous:hover{ background: #fdc74a;}#change_page:hover{background-color:#f26c1d;cursor: pointer}#selcet_page{ background: #fff;padding: 4px 10px;width: 4em;text-align: center;}#example_next,#example_previous{background: #fff}#example_next>a,#example_previous>a{color: #ff9530}#example_next:hover>a,#change_page:hover>a{color: #fff}#change_page{ background-color: #fdc74a;padding: 4px 10px;color: #fff;height: 29px;display: inline-block;margin-left: 10px;}#goto-page{padding-right: 5px;color: #fff;}#go-page{padding-left: 5px;color: #fff;}.shownum{color: #fff;margin-right: 20px;}.shownum>a{padding: 4px 10px;margin-right: 5px} *請認真填寫需求信息，我們會在24小時內與您取得聯系。
