jquery.pagination.js安装使用
- 下载 jquery.pagination.js
- 学习网站:文档
- 百度云: 链接:https://pan.baidu.com/s/1sCFqeUw4WDDOIrLEYTNTLw 密码:dfdl
- HTML插入
<script src="plugins/jquery.min.js" type="text/javascript"></script>
<script src="plugins/jquery.pagination.js" type="text/javascript"></script>
- 需要一个div
第一个参数 total 必填
第二个 调用函数
$("#Pagination").pagination(total, {
num_edge_entries: 1,
num_display_entries: 4,
callback: pageselectCallback,
items_per_page: 4,
prev_text: "前一页",
next_text: "后一页"
});
function pageselectCallback(page,jq){
getDate(page+1,4);
}
- 如果使用ajax获取total 则代码为( 注:使用ajax一定要填写async: false,//不是异步加载, 让ajax为同步执行 )
$(function() {
getDate(1,4);
var total;
$("#Pagination").pagination(total, {
num_edge_entries: 1,
num_display_entries: 4,
callback: pageselectCallback,
items_per_page: 4,
prev_text: "前一页",
next_text: "后一页"
});
function pageselectCallback(page,jq){
getDate(page+1,4);
}
function getDate(page,rows){
$.ajax({
type: "get",
url: "/sales/queryPromotionByPage?page="+page+"&rows="+rows,
async: false,
dataType: "json",
success: function(data) {
$("#promotionresult").empty();
total = data.totalCount;
$.each(data.pageData, function(i, item) {
var str = '<div class="result col-md-3">';
str += '<div class="thumbnail"></div>';
});
}
});
}
});
- 效果
祝你幸福
送你一首歌:张三的歌 蔡琴
附图:江苏宿迁三台山衲田花海