jquery實現的分頁顯示功能示例

2019-11-19 10:59:33

字體：大中小

來源：轉載

供稿：網友

本文實例講述了jquery實現的分頁顯示功能。分享給大家供大家參考，具體如下：

我們在顯示文章列表的時候，通常需要分頁顯示。

一種方式是通過SQL查詢的limit進行分頁，即只查詢該頁面的數據。

另外一種方式是查詢出所有的數據，傳遞給前段，然后用jquery控制只顯示我們想看到的分頁。

html代碼

<div class="am-g">  <div class="am-u-sm-12" id="listTag">  </div></div>

js代碼

$(function(){    showPage(1);  });  function showPage(page){    $.ajax({      type:"GET",      url:"<{$urlParent}>/newsManageList?cid=all",      dataType:"json",      success:function(data){        var newsTotalNum = data.length; //新聞記錄的總條數        var pageNum = Math.ceil(newsTotalNum/<{$newsPageNum}>); //分頁的總頁數        var content = ' <form class="am-form" id="listContainer">' +            '<table class="am-table am-table-striped am-table-hover table-main" id="newsList">' +            '<thead>' +            '<tr>' +            '<th class="table-id">ID</th><th class="table-title">標題</th><th class="table-type">類別</th><th class="table-author am-hide-sm-only">作者</th><th class="table-date am-hide-sm-only">修改日期</th><th class="table-set">操作</th> ' +            '</tr>' +            '</thead>' +            '<tbody>';        for(var i=((page-1)*<{$newsPageNum}>);i<(page*<{$newsPageNum}>)&&i<newsTotalNum;i++){          content += '<tr>' +              '<td>'+(i+1)+'</td>' +              '<td><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >'+data[i].title+'</a></td>'+              '<td>'+data[i].name+'</td>' +              '<td class="am-hide-sm-only">'+data[i].author+'</td>' +              '<td class="am-hide-sm-only">'+data[i].time+'</td>' +              '<td>' +              '<div class="am-btn-toolbar"><div class="am-btn-group am-btn-group-xs">' +              '<a href="<{$urlParent}>/newsUpdate?id='+data[i].id+'>" rel="external nofollow" class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 編輯</a> ' +              '<a href="<{$urlParent}>/newsDel?id='+data[i].id+'>" rel="external nofollow" class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 刪除</a> ' +              '</div></div>' +              '</td>' +              '</tr>';        }        content += '</tbody></table>' +            '<div class="am-cf">' +            '共 '+newsTotalNum+' 條記錄 / '+pageNum+'頁' +            '<div class="am-fr">' +            '<ul class="am-pagination" id="page">';        //判斷前面是否還有頁面        if(page == 1){          content += '<li class="am-disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >«</a></li>';        }else{          content += '<li><a href="javascript:showPage('+(page-1)+')" rel="external nofollow" >«</a></li>';        }        for(var i=1;i<=pageNum;i++){          if(i == page){            content += '<li class="am-active"><a href="javascript:showPage('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';          }else{            content += '<li><a href="javascript:showPage('+i+')" rel="external nofollow" rel="external nofollow" >'+i+'</a></li>';          }        }        //判斷后面是否還有頁面        if(page == pageNum){          content += '<li class="am-disabled"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >»</a></li>';        }else{          content += '<li><a href="javascript:showPage('+(page+1)+')" rel="external nofollow" >»</a></li>';        }        content += '</ul>' +              '</div>' +              '</div><hr>' +              '</form>';        $("#listTag").empty();        $("#listTag").append(content);      }    });  }

顯示效果：