建站动态

根据您的个性需求进行定制先人一步抢占小程序红利时代

使用jquery怎么实现一个分页显示功能

今天就跟大家聊聊有关使用jquery怎么实现一个分页显示功能，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

创新互联公司主营醴陵网站建设的网络公司,主营网站建设方案,重庆APP开发,醴陵h5微信小程序开发搭建,醴陵网站营销推广欢迎醴陵等地区企业咨询

html代码

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 = ' ' +
            '' +
            '' +
            '' +
            'ID标题类别作者修改日期操作 ' +
            '' +
            '' +
            '';
        for(var i=((page-1)*<{$newsPageNum}>);i<(page*<{$newsPageNum}>)&&i' +
              ''+(i+1)+'' +
              ''+data[i].title+''+
              ''+data[i].name+'' +
              ''+data[i].author+'' +
              ''+data[i].time+'' +
              '' +
              '' +
              '/newsUpdate?id='+data[i].id+'>" rel="external nofollow" class="am-btn am-btn-default am-btn-xs am-text-secondary"> 编辑 ' +
              '/newsDel?id='+data[i].id+'>" rel="external nofollow" class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"> 删除 ' +
              '' +
              '' +
              '';
        }
        content += '' +
            '' +
            '共 '+newsTotalNum+' 条记录 / '+pageNum+'页' +
            '' +
            '';
        //判断前面是否还有页面
        if(page == 1){
          content += '«';
        }else{
          content += '«';
        }
        for(var i=1;i<=pageNum;i++){
          if(i == page){
            content += ''+i+'';
          }else{
            content += ''+i+'';
          }
        }
        //判断后面是否还有页面
        if(page == pageNum){
          content += '»';
        }else{
          content += '»';
        }
        content += '' +
              '' +
              '' +
              '';
        $("#listTag").empty();
        $("#listTag").append(content);
      }
    });
  }