分页 -- 利用 Mricode.Pagination 的 js

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

---

首先引入 必要文件

<link href="mricode.pagination.css" rel="stylesheet" />
<script src="jquery-2.1.4.min.js"></script>
<script src="mricode.pagination.js"></script>

第二步 初始化分页

<script> $("#page").pagination({ pageIndex: pageIndex.value, pageSize: pageSize.value, total: total.value, debug: true, showInfo: true, showJump: true, showPageSizes: true, pageElementSort: ['$page', '$size', '$jump', '$info'] });</script>

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

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

            $.ajax({
                  url:"<?=base_url('lists/ajaxWikiList');?>"+'/'+'<?=$category?>',
                  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:"<?=base_url('lists/ajaxWikiList');?>"+'/'+'<?=$category?>',
                  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 = '<?=base_url()?> detail/wiki/' + '<?=$category?>' +'/'; 
  var type = '<?=$category?>';
  if(type == 'additive'){ 
    for(var i=0;i<num;i++){
       str += "<li><a href='http://crabshell.applinzi.com/?/"+ baseurl+jsonData[i]._id +"'>"+jsonData[i].add_name+"</a></li>"; 
    }
  }else{ 
     for(var i=0;i<num;i++){ 
        str += "<li><a href='http://crabshell.applinzi.com/?/"+ baseurl+jsonData[i].id +"'>"+jsonData[i].title+"</a></li>"; 
     } 
  } 
  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);  
}

示例效果图

1.png