简单分页插件

1 功能要求

包含首页、末页、上一页、下一页及页码输入框(风格基于semantic，功能不依赖于框架)；

分页插件 UI 图

2 Dom:

<div class="ui center aligned basic segment" id="pagination">
</div>

3 tmpl

说明：根据API数据判断，若当前页码小于等于1，首页与上一页按钮disabled；当前页码大于等于总页数（即最后一页页码），末页与下一页按钮disabled，分页改变后 api重新请求，current_page会变化；

<div class="ui pagination menu">
  <button class="ui basic button item paginationBtn" data-action="first" {% if(o.meta.pagination.current_page<=1){ %} disabled{% } %}>
    <i class="angle double left icon"></i>
  </button>
  <button class="ui basic button item paginationBtn" data-action="prev" {% if(o.meta.pagination.current_page<=1){ %} disabled{% } %}>
    <i class="angle left icon"></i>
  </button>
<a class="item ui input " data-action="input">
<input type="text" class="pageInput" value="{%=o.meta.pagination.current_page%}">
</a>
<button class="ui basic button item paginationBtn" data-action="next" {% if(o.meta.pagination.current_page>= o.meta.pagination.total_pages) { %}disabled{% } %}>
<i class="angle right icon"></i>
</button>
<button class="ui basic button item paginationBtn" data-action="last" {% if(o.meta.pagination.current_page>= o.meta.pagination.total_pages) { %}disabled{% } %}>
<i class="angle double right icon"></i>
</button>
</div>

4 JS

init时，当前页设为1，获取总页数（即最后一页页码）
点击按钮时，通过data-action获取操作，不同操作pageInd值相应改变，代码如下图

分页功能JS 部分

优化

为避免误操作，应当在页面输入框数值修改后再进行blur事件操作；即：
$(document).on('change', '.pageInput', function(e) {
    $(document).on('blur', '.pageInput', function(e) {
        e.preventDefault();
        var theVal = $(this).val();
        if((theVal<1)||(theVal>totalPage)){
            $(this).val(pageInd);
        }else{
            pageInd = theVal;
            initList(pageInd);
        }
    });
});