分页 -- 利用 Mricode.Pagination 的 js插件

利用 Mricode.Pagination 来实现分页 到 github 下载 js 插件 https://github.com/mricle/pagination


首先引入 必要文件




第二步 初始化分页


第三步 利用ajax 返回数据, uil 自行修改为自己的请求链接 data 自行修改对应的传值

//ajax wiki 获取数据
        $("#page").on("pageClicked", function (event, data) {

            $.ajax({
                  url:""+'/'+'',
                  type:"POST",
                  dataType:"json",
                  data:{offset:data.pageIndex},
                  success: function(data){         
                      var result = wikilists(data);
                      $('.am-list').children().remove();
                      $('.am-list').append(result);
                  }
                });
        });

        $("#page").on("jumpClicked", function (event, data) {

            $.ajax({
                  url:""+'/'+'',
                  type:"POST",
                  dataType:"json",
                  data:{offset:data.pageIndex},
                  success: function(data){         
                      var result = wikilists(data);
                      $('.am-list').children().remove(); // 找到要替换的列表下的子元素,remove掉
                      $('.am-list').append(result); // 将新的列表 追加到对应列表下
                  }
                });
        });

第四步 解析ajax成功返回的数据,生成 字符串

function wikilists(data){ 
  var jsonData = eval(data); 
  var num = jsonData.length;
  var str=''; 
  var baseurl = ' detail/wiki/' + '' +'/'; 
  var type = '';
  if(type == 'additive'){ 
    for(var i=0;i"+jsonData[i].add_name+""; 
    }
  }else{ 
     for(var i=0;i"+jsonData[i].title+""; 
     } 
  } 
  return str; 
}

控制器 返回的 数据

/* ajax 动态获取 wiki list */   
public function ajaxWikiList($category){
  $offset = $_POST['offset'];       
  $num = 10;        
  $offset = $offset * $num;             
  if($category == 'additive'){
     $order='_id desc';
  }else{            
     $order='id desc';      
  }     
  $table = $category;       
  $this->load->model('Wiki_model');     
  $info = $this->Wiki_model->ajaxList($table,$offset, $num, $order);        
  echo json_encode($info);  
}

示例效果图

分页 -- 利用 Mricode.Pagination 的 js插件_第1张图片
1.png

你可能感兴趣的:(分页 -- 利用 Mricode.Pagination 的 js插件)