使用jquery怎么實現(xiàn)一個分頁顯示功能

今天就跟大家聊聊有關(guān)使用jquery怎么實現(xiàn)一個分頁顯示功能，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

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; //新聞記錄的總條數(shù)
        var pageNum = Math.ceil(newsTotalNum/<{$newsPageNum}>); //分頁的總頁數(shù)
        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">標(biāo)題</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" >&laquo;</a></li>';
        }else{
          content += '<li><a href="javascript:showPage('+(page-1)+')" rel="external nofollow" >&laquo;</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" >&raquo;</a></li>';
        }else{
          content += '<li><a href="javascript:showPage('+(page+1)+')" rel="external nofollow" >&raquo;</a></li>';
        }
        content += '</ul>' +
              '</div>' +
              '</div><hr>' +
              '</form>';
        $("#listTag").empty();
        $("#listTag").append(content);
      }
    });
  }

看完上述內(nèi)容，你們對使用jquery怎么實現(xiàn)一個分頁顯示功能有進(jìn)一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。