HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>分页</title>
<script src="../jquery-1.10.2.js"></script>
</head>
<body>
<div class="main">
<table border>
<tbody class="tbody">
</tbody>
</table>
<div class="box2" id="box2"></div>前往多少页，输入页码，按回车键
<br><br>
<button class="jumpBtn">跳到第一页</button>
<br><br>
<p>搜索关键字可以搜索到很多条数据</p>
<input type="text" id="searchIpt">
<button id="searchBtn">搜索</button>
</div>
<script src="./MyPaging.js"></script>//在压缩文件“产品分页”中
</body>
</html>
page.js:
// 模拟后台接口
function getData(params) {
var data = [{
"a": "/uploads/200529/1-200529110J4T1.jpg",
"b": "颈肩腰腿痛冷敷贴"
}, {
"a": "/uploads/200529/1-20052911192W27.jpg",
"b": "王氏秘贴 冷敷贴"
}, {
"a": "/uploads/200529/1-200529105625Q5.jpg",
"b": "医用冷敷贴"
}, {
"a": "/uploads/200525/1-200525115540H0.jpg",
"b": "抑菌乳膏--肤专克"
}, {
"a": "/uploads/200529/1-200529111331O3.jpg",
"b": "活络抑菌膏-消必康"
}, {
"a": "/uploads/200529/1-200529110030G9.jpg",
"b": "濞琰喷剂"
}, {
"a": "/uploads/200529/1-200529110112605.jpg",
"b": "口腔喷剂"
}, {
"a": "/uploads/200529/1-200529111F3A2.jpg",
"b": " 葛根木瓜片"
}, {
"a": "/uploads/200529/1-20052911031W33.jpg",
"b": "医用退热贴"
}, {
"a": "/uploads/200529/1-200529110511W3.jpg",
"b": "医用退热贴2"
}, {
"a": "/uploads/200529/1-2005291109561C.jpg",
"b": "日日舒妇科凝胶"
}, {
"a": "/uploads/200529/1-200529111144E8.jpg",
"b": " 日日舒妇科抑菌膏"
}, {
"a": "/uploads/200529/1-200529111515429.jpg",
"b": " 肾宝片"
}, {
"a": "/uploads/200525/1-200525115601H1.jpg",
"b": "抑菌乳膏--喜来乐"
}, {
"a": "/uploads/200525/1-200525115431232.jpg",
"b": "宝宝抑菌乳膏--喜来乐"
}]
//上述data数据可以直接使用，如果是从后台获取的，要转换，如下：
//这里是将dede后台的数据全部显示在前端之后，再封装成json格式的数据
// var tota = $(".proAll .pro-item").length; //数据总条数
// var JsonData = { //定义对象
// a: "",
// b: "",
// c: ""
// }
// var aa = []; //定义数组
// for(var i = 0; i < tota; i++) {
// var JsonData = new Object();
// JsonData.a = $(".proImg").eq(i).attr("src");
// JsonData.b = $(".proTitle").eq(i).html();
// JsonData.c = $(".url").eq(i).attr("href");
// aa.push(JsonData);
// }
// var json = JSON.stringify(aa);//json格式数据
// data = $.parseJSON(json);//转换
for(var js2 in data) {
console.log(data[js2]);
}
//下面全部一样，最后添加到HTML页面的值不要忘记换，第228行
//关键字搜索
var res = [];
for(var i = 0; i < data.length; i++) {
if(data[i].b.indexOf(params.search) != -1) {
res.push(data[i]);
}
}
return {
total: res.length,
list: res.splice((params.current - 1) * params.size, params.size)
}
}
var oPage = {
search: '', // 搜索条件
current: 1, // 当前页
size: 4, // 每页显示多少条
paging: null, // 分页对象
init: function() {
this.setPaging(); // 初始化分页对象并调用loadData方法
this.initEvent(); // 绑定事件
},
// 初始化事件
initEvent: function() {
var _this = this;
// 跳到第一页点击
$('.jumpBtn').on('click', function() {
_this.paging.setCurrent(1);
})
// 搜索按钮点击
$('#searchBtn').on('click', function() {
_this.search = $('#searchIpt').val();
_this.paging.setCurrent(1); // 设置当前页，会触发jump方法
})
},
// 发送ajax获取数据
loadData: function() {
var _this = this;
var params = {
search: this.search,
current: this.current,
size: this.size
}
// 模拟ajax获取数据
setTimeout(function() {
var res = getData(params);
// 设置tbody的html
_this.setTbody(res.list);
// 必须调用 设置分页对象总页数 -----------------------
_this.paging.setTotal(res.total);
}, 100);
},
// 创建分页对象
setPaging: function() {
var _this = this;
this.paging = new MyPaging('#box2', {
size: this.size,
sizes: [1, 2, 4, 10, 20, 100], // 选择每页条数
total: 0,
current: this.current,
prevHtml: '上一页',
nextHtml: '下一页',
layout: 'total, totalPage, sizes, prev, pager, next, jumper',
jump: function() {
// 这儿的this指向paging对象
_this.current = this.current; // 设置当前页
_this.size = this.size; // 设置当前每页多少条
// 点击页数按钮都会调用
_this.loadData();
}
});
},
// 设置tbody的html
setTbody: function(arr) {
var html = '';
for(var i = 0; i < arr.length; i++) {
var item = arr[i];
html += '<tr><td>' + item.a + '</td><td>' + item.b + '</td></tr>';
//a：产品图片路径，b：产品图片标题，c：产品详情网址
//html += '<div class="pro-item"><div class="media-img"><a href="' + item.c + '"><img src="' + item.a + '"/></a></div><h3 class="text-center"><a href="' + item.c + '">' + item.b + '</a></h3></div>';
}
$('.tbody').html(html);
}
}
// 页面加载完成
$(function() {
oPage.init();
})
源码下载文件：产品分页点击页码不刷新页面