简单分页插件

1 功能要求

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

分页插件 UI 图

2 Dom:

3 tmpl

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

 
   
 
 
   
 



= o.meta.pagination.total_pages) { %}disabled{% } %}>


= o.meta.pagination.total_pages) { %}disabled{% } %}>

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);
        }
    });
});