欢迎访问个人博客Aris-Blog
bootstrap-paginator.min.js是基于Bootstrap v2/v3的分页插件，但诸如AdminLTE3等采用最新Bootstrap4的前端框架，使用后根本不会出现样式。这里到处爬贴找到了解决方法：解决bootstrap4 使用 bootstrap-paginator不显示样式的问题
项目中的 /public/static/js/bootstrap-paginator.min.js是改进后的版本，适配Bootstrap v4；
插件基于Ajax的使用方法：Bootstrap-paginator + PageHelper 前后台分页对接
当然需要对接口进行设计
- 后端接口所需参数
/**
* 获取分页列表特定数据（title+url）
* @desc 根据类型筛选列表数据，支持分页，用于用户
* @return array items 列表数据
* @return int total 总数量
* @return int page 当前第几页
* @return int perpage 每页数量
*/
public function getList(){
$rs = array();
$domain = new DomainArticle();
$list = $domain->getList($this->type, $this->page, $this->perpage);
$rs['items'] = $list['items'];
$rs['total'] = $list['total'];
$rs['page'] = $this->page;
$rs['perpage'] = $this->perpage;
return $rs;
}
- 数据库分页查询算法
public function getList($type, $page, $perpage) {
$sql = 'SELECT a.*, t.name'.'
FROM wechat_article a ,article_type t
WHERE a.type = :types AND a.type = t.type
ORDER BY a.orders DESC
LIMIT :limit1, :limit2';
$params = array(':types' => $type, ':limit1' => ($page - 1) * $perpage, ':limit2' => $perpage);
return $this->getORM()->queryAll($sql, $params);
// 没有定义关联字段的方法，所以直接原生SQL。因为栏目是动态未知的，所以不能直接在JS中case更改样式
// return $this->getORM()
// ->select('*, article_type.name')
// ->where('type', $type)
// ->order('orders DESC')
// ->limit(($page - 1) * $perpage, $perpage)
// ->fetchAll();
}
- Ajax调用：
let perpage = 8; //每页数目
let json_data = {
"type": typeNum,
"page": 1,
"perpage": perpage,
};
json_data[token_key] = getCSRF();
function refresh(typeNum) {
renderSelect('#select1', typeNum);
renderSelect('#select3', typeNum);//添加模态框下拉菜单
$('#total').empty();
$('#table1').empty();
let perpage = 8;
$.ajax({
url: "/article/public/?s=Article/MainList",
type: "POST",
async: false,//关闭异步加载，因为后台的csrf_token有时效性
data: json_data,
success: function(res, status, xhr){
let data = res.data;
let items = data.items;
Article_items = items;
console.log(res);
if (!res.ret || res.ret != 200) {
console.log(res.msg);
$('#table1').append('<tr><td>出错了┗|｀O′|┛，请联系管理员！</tr></td>');
return;
}
$('#total').append(data.total);
let str = '';
if(data.total == 0){
$('#table1').append('<tr><td>本栏目还没有发表文章！该更新了(๑•̀ㅂ•́)و✧</td></tr>');
return;
}
for(let i = 0; i < items.length; i++){
str = '<tr><td>'+items[i].name+'</td><td>'+items[i].orders+'</td><td><a href="'+items[i].url+'" target="_blank">'+items[i].title+'</a></td><td>'+items[i].addtime+'</td><td class="text-center"><a id="edit" title="编辑"><i class="fa fa-edit text-primary"></i></a> <a id="delete" title="删除"><i class="fa fa-trash text-danger"></i></a></td></tr>';
$('#table1').append(str);
}
var options = {
bootstrapMajorVersion:3, //bootstrap的版本要求
currentPage:data.page,//当前页数
totalPages:Math.ceil(data.total/data.perpage),//总页数，向上取整
numberOfPages:data.perpage,//每页记录数
itemTexts: function(type, page, current){//设置分页样式
switch (type) {
case "first":
return "首页";
case "prev":
return "上一页";
case "next":
return "下一页";
case "last":
return "末页";
case "page":
return page;
}
},
onPageClicked: function(event, originalEvent, type, page){
$('#table1').empty();
let json_data = {
"type": typeNum,
"page": 1,
"perpage": perpage,
};
json_data[token_key] = getCSRF();
$.ajax({
url:"/article/public/?s=Article/mainList",
type:"POST",
async: false,
data: json_data,
success: function(res, status, xhr){
let data = res.data;
let items = data.items;
Article_items = items;
console.log(res);
if (!res.ret || res.ret != 200) {
console.log(res.msg);
$('#table1').append('<tr><td>出错了┗|｀O′|┛，请联系管理员！</tr></td>');
return;
}
let str = '';
if(data.total == 0){
$('#table1').append('<tr><td>本栏目还没有发表文章！该更新了(๑•̀ㅂ•́)و✧</td></tr>');
return;
}
for(let i = 0; i < items.length; i++){
str = '<tr><td>'+items[i].name+'</td><td>'+items[i].orders+'</td><td><a href="'+items[i].url+'" target="_blank">'+items[i].title+'</a></td><td>'+items[i].addtime+'</td><td class="text-center"><a id="edit" title="编辑"><i class="fa fa-edit text-primary"></i></a> <a id="delete" title="删除"><i class="fa fa-trash text-danger"></i></a></td></tr>';
$('#table1').append(str);
}
}
})
}
};
//初始化分页框
element.bootstrapPaginator(options);
},
error: function(error){
console.log(error);
alert("出错了┗|｀O′|┛，请联系管理员！");
}
});
renderSelect('#select2', typeNum);//编辑模态框的下拉菜单
}
