分页(Pagination),是一种无序列表,wuguangnuo.cn/blog 像处理其他界面元素一样处理分页。


如图,这是我目前网站的分页基本样式,可选的组件还包括


我将这些功能整合到了 Page.class.php 中,在 control 层只需简单的引用即可:

$p = getpage($count, 20);
$data['pages'] = $p->show();
$this->ajaxReturn($data);

getpage是一个定义函数,我把它写在了common/function.php中。

function getpage($count, $pagesize = 8) {
    $p = new Think\Page($count, $pagesize);
    $p->setConfig('header', '<span class="pageRemark">共<strong>%TOTAL_PAGE%</strong>页<strong>%TOTAL_ROW%</strong>条数据</span>');
    $p->setConfig('prev', '上一页');
    $p->setConfig('next', '下一页');
    $p->setConfig('last', '尾页');
    $p->setConfig('first', '首页');
    $p->setConfig('theme', '%FIRST%%UP_PAGE%%ELLIPSIS_LEFT%%LINK_PAGE%%ELLIPSIS_RIGHT%%DOWN_PAGE%%END%%PAGE_TURN%%HEADER%');
    $p->lastSuffix = false; // 最后一页不显示为总页数
    return $p;
}

theme 就是主题,即要显示的部分。具体代指可查看Page.class.php最后部分。

接下来是前端部分,我将pages同数据打包,一起随AJAX返回到前端。而html初始化的只有<div class="pages"></div>

JS部分:

bindEvent = function(){
    $(".pages").on("click", "a" ,function(){
        loadTable(this.href);
        return false;
    });
    $(".pages").on("keydown", ".pageTurn input" ,function(e){
        if(e.keyCode == 13 || e.keyCode == 108){
            var url = this.getAttribute("data-url").replace(/%5BPAGE%5D/, this.value);
            loadTable(url);
        }
    });
},

因为分页是先执行绑定函数才展示分页的,所以要使用 JQ 的 on 函数绑定。否则不会被执行。第一个 click 事件是将按钮的<a>点击事件转换成异步加载的 loadTable() 并将跳转返回 false 阻止,这样就不会产生页面跳转。 第二个是 keydown 事件,检测到 ENTER 键被按下时,执行下面的 loadTable() 函数。因为有可能展示的数据是筛选之后的,所以我在 <input> 中储存了私有的自定义数据 data-url 来确定链接位置。并将链接的特定部分替换成用户指定的页面数字。

最后是loadTable,加载或重载表格内容

loadTable = function(url){
    var url = url?url:('__APP__/Blog/loadTable'+window.location.search);
    $.ajax({
        url: url,
        data: {},
        type: 'POST',
        cache: false,
        dataType: 'JSON',
        beforeSend: function(){
            ajaxLoading();
        },
        success: function(data){
            fillTable(data);
            swal.close();
        },
        error: function(){
            ajaxError();
        },
        complete: function(){}
    });
},

fillTable = function(data){
$("#blogTable").empty();
$("#keyword").html(data.keyword);
$(".pages").html(data.pages);
if(data.list.length == 0){
$("#blogTable").append("<h2>查询结果为空!</h2>");
} else {
$("#tpl_blogTable").tmpl(data.list).appendTo('#blogTable');
}
},

这样就实现了数据的分页。

为了美观,添加CSS样式:

/* 分页样式 */
.pages{
  -moz-user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none;
  -khtml-user-select:none;
  user-select:none
}
.pages a, .pages span{
  display:inline-block;
  list-style: none;
  text-decoration:none;
  color:#333
}
.pages a, .pages .current{
  min-width:28px;
  margin-right:4px;
  padding:2px 6px;
  height:28px;
  border:1px #ccc solid;
  border-radius:3px;
  font-size:12px;
  text-align:center;
  line-height:24px
}
.pages a:hover, .pages .pageTurn:hover {
  color:#18e;
  border:1px #18e solid
}
.pages .current{
  background-color:#49d;
  color:#fff;
  font-weight:700;
  border-color:#49d
}
.pages .pageEllipsis {
  font-family:"Courier New","Microsoft YaHei",SimSun;
  color:#666
}
.pages .pageRemark {
  color:#666
}
.pages .pageRemark strong {
  color:#e00
}
.pages .pageTurn{
  border:1px #ccc solid;
  border-radius:3px;
  padding-left:4px;
  padding-right:4px;
  height:26px;
  font-weight:500
}
.pages .pageTurn input{
  border:0px;
  background-color:#f5f5f5;
  max-width:32px;
  outline:none
}