整合營(yíng)銷(xiāo)服務(wù)商
          
				
          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
          
			
          
			
          				
				
          免費(fèi)咨詢(xún)熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          Django 數(shù)據(jù)分頁(yè)
          
        
           
          
	
	
          
		Django 數(shù)據(jù)分頁(yè)
          
                        
          列表顯示數(shù)據(jù)時(shí)，分頁(yè)顯示是必不可少的功能，活不多說(shuō)，直接干貨拿走，django提供了一個(gè)分頁(yè)器Paginator，下面的例子說(shuō)明如何使用它。

          1，寫(xiě)一個(gè)帶分頁(yè)功能的查詢(xún)方法
          編輯 myweb\web\views.py文件，加入如下代碼

          from models import Tasks
          from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger
          from django.views.decorators import csrf

          #任務(wù)列表
          def task_list(request):
           contact_list=Tasks.objects.all().order_by('-task_start_date')
           #每頁(yè)顯示25條
           paginator=Paginator(contact_list, 25) 
           page=request.GET.get('page')
           try:
           contacts=paginator.page(page)
           except PageNotAnInteger:
           contacts=paginator.page(1)
           except EmptyPage:
           contacts=paginator.page(paginator.num_pages)

           return render(request, 'taskList.html', {'contacts': contacts})

          這里是將數(shù)據(jù)返回到前端頁(yè)面 taskList.html頁(yè)面。


          2，前端頁(yè)面獲取并顯示數(shù)據(jù)
          在myweb\web\templates目錄新建一個(gè)taskList.html文件,內(nèi)容如下：
          {% extends 'base.html' %}
          {% block content %} 
          <table class="tableList">
          <thead>
          <tr>
          <th>任務(wù)名稱(chēng)</th>
          <th>操作者</th>
          <th>任務(wù)描述</th>
          <th>開(kāi)始日期</th>
          <th>結(jié)束日期</th>
          <th>任務(wù)評(píng)價(jià)</th>
          </tr>
          </thead>
          <tbody>
          {% if contacts.paginator.count > 0 %}
          {% for contact in contacts %}
          <tr>
          <td> {{ contact.task_name }} </td>
          <td> {{ contact.task_user }} </td>
          <td> {{ contact.task_describe }}</td>
          <td> {{ contact.task_start_date }} </td>
          <td> {{ contact.task_end_date }} </td>
          <td> {{ contact.task_result }}</td>
          </tr>
          {% endfor %}
          {% else %}
          <tr>
          <td colspan="10" align="center">沒(méi)有任務(wù)數(shù)據(jù)</td>
          </tr>
          {% endif %}
          </tbody>
          </table>


          {# 分頁(yè)HTML代碼 #}
          <div class="pagination">
           <span class="step-links">
           {% if contacts.has_previous %}
           <a href="?page={{ contacts.previous_page_number }}">上一頁(yè)</a>
           {% endif %}

           <span class="current">
           Page {{ contacts.number }} of {{ contacts.paginator.num_pages }}.
           </span>

           {% if contacts.has_next %}
           <a href="?page={{ contacts.next_page_number }}">下一頁(yè)</a>
           {% endif %}
           </span>
          </div>
          {% endblock %}

          3，URL映射
          編輯urls.py文件，加入：

          url(r'^tasklist/', views.task_list),
          JS代碼：
/*
* 分頁(yè)方法
* 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中的地址參數(shù)
if(page==null||page==""){
page=1;
}
var limit=12;//每頁(yè)限制條數(shù)
var page_all="";//總頁(yè)數(shù)
$(document).ready(function (){
page_list();
});
function page_list(){
var count=$("#page_count").html();//新聞總數(shù)
var remainder=count%limit;//判斷是否有余數(shù)，有余數(shù)的話，整除后，余數(shù)+1，就是總頁(yè)數(shù)；如果余數(shù)為0，即為整除，則整除后的的數(shù)即為總頁(yè)數(shù)
if(count<=limit){
//總數(shù)達(dá)不到每頁(yè)顯示的條數(shù)，則不顯示頁(yè)碼
}else{
//總數(shù)超過(guò)一頁(yè)，即總數(shù)超過(guò)limit規(guī)定的條數(shù)，顯示分頁(yè)
//先判斷余數(shù)為0的情況：如果余數(shù)為0，即為整除，則整除后的的數(shù)即為總頁(yè)數(shù)
if(remainder==0){
var page_number=count/limit;//總頁(yè)碼數(shù)
page_number=parseInt(page_number);//將頁(yè)碼數(shù)由字符串類(lèi)型轉(zhuǎn)換為整形
page_all=page_number;
//如果頁(yè)碼數(shù)不超過(guò)5，則顯示全部分頁(yè)總數(shù)
if(page_number<6){
page=parseInt(page);//將獲取到的頁(yè)碼數(shù)轉(zhuǎn)換成整數(shù)
var page_pre=page-1;
var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一頁(yè)
var url_index=IFRAME_SRC+'/p/'+1;//首頁(yè)
var url_last=IFRAME_SRC+'/p/'+page_number;//尾頁(yè)
if(page==1){
//如果頁(yè)碼page=1，則隱藏上一頁(yè)
//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一頁(yè)</a></li>");
}else{
//如果頁(yè)碼page不是1，則顯示首頁(yè)和上一頁(yè)
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首頁(yè)</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一頁(yè)</a></li>");
}
//對(duì)頁(yè)碼進(jìn)行賦值
for(var i=0; i<page_number; i++){
var j=i+1;
var url=IFRAME_SRC+'/p/'+j;
if(page==j){
//如果是當(dāng)前頁(yè)，則給當(dāng)前頁(yè)加上active
$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}else{
//如果不是當(dāng)前頁(yè)，則去掉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;//下一頁(yè)
if(page==page_number){
//如果是最后一頁(yè)，則隱藏下一頁(yè)功能
//$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一頁(yè)</a></li>");
}else{
//如果不是最后一頁(yè)，則顯示最后一頁(yè)和尾頁(yè)
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一頁(yè)</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾頁(yè)</a></li>");
}
}
//如果頁(yè)碼超過(guò)5，則分塊顯示:點(diǎn)擊第一頁(yè)，顯示：1/2/3/4/5/..page_number,點(diǎn)擊第二頁(yè)，顯示：1/2/3/4/5/..page_number,點(diǎn)擊第三頁(yè)，顯示：1/2/3/4/5/..page_number,點(diǎn)擊第四頁(yè)：顯示：1/2/3/4/5/..page_number,點(diǎn)擊第五頁(yè)，顯示：1...3/4/5/6/7/..page_number;點(diǎn)擊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);//將字符串轉(zhuǎn)換為整形
var page_pre=page-1;
var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一頁(yè)
var url_index=IFRAME_SRC+'/p/'+1;//首頁(yè)
var url_last=IFRAME_SRC+'/p/'+page_number;//最后一頁(yè)
if(page==1){
//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一頁(yè)</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首頁(yè)</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一頁(yè)</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>下一頁(yè)</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一頁(yè)</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾頁(yè)</a></li>");
}
}else if(page==page_number-3||page==page_number-2||page==page_number-1||page==page_number){
page=parseInt(page);//將字符串轉(zhuǎn)換為整形
var page_pre=page-1;
var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一頁(yè)
var url_index=IFRAME_SRC+'/p/'+1;//首頁(yè)
var url_last=IFRAME_SRC+'/p/'+page_number;//最后一頁(yè)
if(page==1){
//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一頁(yè)</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首頁(yè)</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一頁(yè)</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>下一頁(yè)</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一頁(yè)</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾頁(yè)</a></li>");
}
}else{
page=parseInt(page);//將字符串轉(zhuǎn)換為整形
var page_pre=page-1;
var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一頁(yè)
var url_index=IFRAME_SRC+'/p/'+1;//首頁(yè)
var url_last=IFRAME_SRC+'/p/'+page_number;//最后一頁(yè)
if(page==1){
//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一頁(yè)</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首頁(yè)</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一頁(yè)</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>下一頁(yè)</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一頁(yè)</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾頁(yè)</a></li>");
}
}
}
$("#page_list").append("<span id='goto-page'>到第</span><input id='selcet_page' value='"+page+"'/><span id='go-page'>頁(yè)</span>");
$("#page_list").append("<button type='button' id='change_page'>確定</button>");
}
//如果余數(shù)不為0，則將整除后的整數(shù)+1，即為總頁(yè)碼
else{
var page_number=count/limit;
page_number=parseInt(page_number);
page_number=page_number+1;
page_all=page_number;
//如果頁(yè)碼數(shù)不超過(guò)5，則顯示全部分頁(yè)總數(shù)
if(page_number<6){
page=parseInt(page);//將獲取到的頁(yè)碼數(shù)轉(zhuǎn)換成整數(shù)
var page_pre=page-1;
var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一頁(yè)
var url_index=IFRAME_SRC+'/p/'+1;//首頁(yè)
var url_last=IFRAME_SRC+'/p/'+page_number;//尾頁(yè)
if(page==1){
//如果頁(yè)碼page=1，則隱藏上一頁(yè)
 //$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一頁(yè)</a></li>");
}else{
//如果頁(yè)碼page不是1，則顯示首頁(yè)和上一頁(yè)
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首頁(yè)</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一頁(yè)</a></li>");
}
//對(duì)頁(yè)碼進(jìn)行賦值
for(var i=0; i<page_number; i++){
var j=i+1;
var url=IFRAME_SRC+'/p/'+j;
if(page==j){
//如果是當(dāng)前頁(yè)，則給當(dāng)前頁(yè)加上active
$("#page_list").append("<li class='paginate_button active' aria-controls='example' tabindex='0'><a href='"+url+"'>"+j+"</a></li>");
}else{
//如果不是當(dāng)前頁(yè)，則去掉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;//下一頁(yè)
if(page==page_number){
//如果是最后一頁(yè)，則隱藏下一頁(yè)功能
 //$("#page_list").append("<li class='paginate_button next disabled' aria-controls='example' tabindex='0' id='example_next'><a>下一頁(yè)</a></li>");
}else{
//如果不是最后一頁(yè)，則顯示最后一頁(yè)和尾頁(yè)
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一頁(yè)</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾頁(yè)</a></li>");
}
}
//如果頁(yè)碼超過(guò)5，則分塊顯示:點(diǎn)擊第一頁(yè)，顯示：1/2/3/4/5/..page_number,點(diǎn)擊第二頁(yè)，顯示：1/2/3/4/5/..page_number,點(diǎn)擊第三頁(yè)，顯示：1/2/3/4/5/..page_number,點(diǎn)擊第四頁(yè)：顯示：1/2/3/4/5/..page_number,點(diǎn)擊第五頁(yè)，顯示：1...3/4/5/6/7/..page_number;點(diǎn)擊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);//將字符串轉(zhuǎn)換為整形
var page_pre=page-1;
var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一頁(yè)
var url_index=IFRAME_SRC+'/p/'+1;//首頁(yè)
var url_last=IFRAME_SRC+'/p/'+page_number;//最后一頁(yè)
if(page==1){
//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一頁(yè)</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首頁(yè)</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一頁(yè)</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>下一頁(yè)</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一頁(yè)</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾頁(yè)</a></li>");
}
}else if(page==page_number-3||page==page_number-2||page==page_number-1||page==page_number){
page=parseInt(page);//將字符串轉(zhuǎn)換為整形
var page_pre=page-1;
var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一頁(yè)
var url_index=IFRAME_SRC+'/p/'+1;//首頁(yè)
var url_last=IFRAME_SRC+'/p/'+page_number;//最后一頁(yè)
if(page==1){
//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一頁(yè)</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首頁(yè)</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一頁(yè)</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>下一頁(yè)</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一頁(yè)</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾頁(yè)</a></li>");
}
}else{
page=parseInt(page);//將字符串轉(zhuǎn)換為整形
var page_pre=page-1;
var url_pre=IFRAME_SRC+'/p/'+page_pre;//上一頁(yè)
var url_index=IFRAME_SRC+'/p/'+1;//首頁(yè)
var url_last=IFRAME_SRC+'/p/'+page_number;//最后一頁(yè)
if(page==1){
//$("#page_list").append("<li class='paginate_button previous disabled' aria-controls='example' tabindex='0' id='example_previous'><a>上一頁(yè)</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_index+"'>首頁(yè)</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_previous'><a href='"+url_pre+"'>上一頁(yè)</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>下一頁(yè)</a></li>");
}else{
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_next+"'>下一頁(yè)</a></li>");
$("#page_list").append("<li class='paginate_button' aria-controls='example' tabindex='0' id='example_next'><a href='"+url_last+"'>尾頁(yè)</a></li>");
}
}
}
$("#page_list").append("<span id='goto-page'>到第</span><input id='selcet_page' value='"+page+"'/><span id='go-page'>頁(yè)</span>");
$("#page_list").append("<button type='button' id='change_page'>確定</button>");
}
}
}
//跳轉(zhuǎn)的到某一頁(yè)
$(document).on("click","#change_page",function(){
var page_num=$("#selcet_page").val();
page_num=parseInt(page_num);//將字符串轉(zhuǎn)換為整形
 //go_text=page_num;
 //alert(page_num);
if(page_num>page_all){
/*$('.success_message').show();
 $("#message_info").html('頁(yè)碼超出范圍，請(qǐng)輸入正確頁(yè)碼'); */
alert('頁(yè)碼超出范圍，請(qǐng)輸入正確頁(yè)碼');
return false;
}
if((/^(\+|-)?\d+$/.test( page_num ))&&page_num>0){ 
location.href=IFRAME_SRC+"/p/"+page_num;
}else{ 
/* $('.success_message').show();
 $("#message_info").html('非法頁(yè)碼，請(qǐng)輸入正確頁(yè)碼');*/
 /*alert('非法頁(yè)碼，請(qǐng)輸入正確頁(yè)碼');*/
layer.msg("非法頁(yè)碼，請(qǐng)重新輸入",{time: 2000});
return false;
}
//$("#selcet_page").html(go_text);
});
//獲取url參數(shù)
function GetRequest() {
var url=location.href; //獲取整個(gè)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;
}
//輸入框只能輸入數(shù)字
$(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}
          過(guò)本案例的學(xué)習(xí)，對(duì)于入門(mén)級(jí)的讀者來(lái)說(shuō)是個(gè)不錯(cuò)的學(xué)習(xí)體驗(yàn)，對(duì)于有基礎(chǔ)的讀者可以開(kāi)拓思路。案例效果如下：
          案例制作的思路是先將主頁(yè)面制作好，然后以另存為的方法制作其他3個(gè)分頁(yè)。其中，通過(guò)對(duì)類(lèi)（.white）的靜態(tài)傳遞，實(shí)現(xiàn)導(dǎo)航超鏈接背景色的改變。
          首頁(yè)index.html的代碼如下：
          <!DOCTYPE html>
          <html>
           <head>
           <meta charset="UTF-8">
           <title></title>
           <link rel="stylesheet" type="text/css" href="css/b5.css"/>
           </head>
           <body>
           <div class="nav">
           <ul>
           <li class="white"><a href="tab1.html">首頁(yè)</a></li>
           <li><a href="news.html">新聞</a></li>
           <li><a href="sport.html">體育</a></li>
           <li><a href="music.html">音樂(lè)</a></li>
           </ul>
           </div>
           <div class="nav-cont">
           <img src="images/pic1.jpg"/>
           </div>
           </body>
          </html>
          分頁(yè)news.html的代碼如下，其他分頁(yè)類(lèi)似。
          <!DOCTYPE html>
          <html>
           <head>
           <meta charset="UTF-8">
           <title></title>
           <link rel="stylesheet" type="text/css" href="css/b5.css"/>
           </head>
           <body>
           <div class="nav">
           <ul>
           <li><a href="tab1.html">首頁(yè)</a></li>
           <li class="white"><a href="news.html">新聞</a></li>
           <li><a href="sport.html">體育</a></li>
           <li><a href="music.html">音樂(lè)</a></li>
           </ul>
           </div>
           <div class="nav-cont">
           <img src="images/pic2.jpg"/>
           </div>
           </body>
          </html>
          外部樣式文件b5.css的代碼如下：
          @charset "utf-8";
          *{
          margin:0px;
          padding:0px;
          }
          body{
          font-size:14px;
          }
          ul{
          list-style-type:none;
          }
          .nav{
          width:800px;
          height:30px;
          margin: 30pxauto 0px auto;
          border-bottom:solid 1px #09f;
          }
          .nav ul li{
          float:left;
          width:70px;
          margin: 0px 5px 0px 0px;
          }
          .nav ul li a{
          display: block;
          height:30px;
          color:#333;
          text-decoration: none;
          border-top:solid 1px #09f;
          border-left:solid 1px #09f;
          border-right:solid 1px #09f;
          text-align: center;
          line-height:30px;
          background:#8cd4fd;
          }
          .nav .white a{
          background:#fff;
          }
          .nav-cont{
          width:768px;
          height:200px;
          margin: 0px auto;
          border-bottom:solid 1px #09f;
          border-left:solid 1px #09f;
          border-right:solid 1px #09f;
          padding:10px 15px;
          }
          至此，案例制作完成。
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
日韩精品一区二区亚洲AV观看|
视频一区二区在线观看|
中文字幕人妻无码一区二区三区|
国产日本亚洲一区二区三区|
无码丰满熟妇一区二区|
精品理论片一区二区三区|
好湿好大硬得深一点动态图91精品福利一区二区
|
亚洲日本一区二区三区|
精品少妇人妻AV一区二区三区|
日韩精品一区二区三区毛片|
在线精品亚洲一区二区小说|
亚洲熟女www一区二区三区|
亚洲av区一区二区三|
亚无码乱人伦一区二区|
国产精品免费一区二区三区四区
|
国产一区二区三区免费视频|
国产免费无码一区二区|
日韩一区二区精品观看|
亲子乱av一区区三区40岁|
精品一区二区三区东京热|
香蕉视频一区二区|
一区二区三区免费视频网站|
日本国产一区二区三区在线观看
|
狠狠色综合一区二区|
性色AV一区二区三区|
亚洲日韩激情无码一区|
国精产品一区一区三区免费视频|
国产在线精品一区在线观看|
日韩免费一区二区三区在线|
亚洲一区二区三区日本久久九|
国产在线观看一区精品|
又硬又粗又大一区二区三区视频|
无码人妻AⅤ一区二区三区水密桃
无码欧精品亚洲日韩一区夜夜嗨
无码毛片一区二区三区中文字幕
无码毛片一区二区三区视频免费播放
|
无码av免费一区二区三区|
色妞AV永久一区二区国产AV|
国产精品无码一区二区在线观一
|
亚洲爆乳精品无码一区二区三区
|
亚洲图片一区二区|
国产一区二区三区美女|
亚洲天堂一区二区三区四区|
国产91一区二区在线播放不卡|