随身笔记
随身笔记

ajax分页wPaginate.js

<link rel="stylesheet" type="text/css" href="css/wPaginate.css">
<script type="text/javascript" src="js/wPaginate.js"></script>

配置:

$('#wPaginate8').wPaginate({
  theme : 'black', // theme for plugin to use
  first : '<<', // html for first page link (null for no link)
  prev : '<', // html for prev page link (null for no link)
  next : '>', // html for next page link (null for no link)
  last : '>>', // html for last page link (null for no link)
  spread : 5, // 左边显示6个可点击的页面 右边显示也显示6个可点击的页码 中间一个页面,显示的页面始终是奇数
 total : 400, // 一共400条数据
 index : 0, // current index (0, 20, 40, etc) //这里不是当前分页的意思
 limit : 20, // 每页显示20跳
  url: function(i) {  //i参数是当前分页
    alert(this.settings.limit) //获取之前设置的参数
    $.ajax({
     type:'post',
     url:"table1.html",
     data:{page:i},
     success: function(data){
      $("#table_list").empty().html(data);
     }
    });

 },
 ajax: true
 });

 

 

关闭ajax功能

$("#elem").wPaginate({
  theme: 'red',
  total: 123,
  index: 40,
  limit: 20,
  url: function(i){ return '/some/page=' + i ; },  //  url /some/page=3
  ajax:false
});

 

 

 

HTML:

 <div id="table_list">

    默认显示第一条数据

 </div>
 <div id="wPaginate8"></div>

https://github.com/websanova/wPaginate

http://pan.baidu.com/s/1pXqqy

随身笔记

ajax分页wPaginate.js
<link rel="stylesheet" type="text/css" href="css/wPaginate.css"> <script type="text/javascript" src="js/wPaginate.js"></script> 配置: $('#wPaginate8').w…
扫描二维码继续阅读
2015-05-26