bootstrap.paginator.min.js分页插件的使

欢迎访问个人博客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>&nbsp;&nbsp;&nbsp;<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>&nbsp;&nbsp;&nbsp;<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);//编辑模态框的下拉菜单
}