如何在前端实现分页功能 - 前端分页功能封装

如何在前端实现分页功能 - 前端分页功能封装

功能封装

define(function(require, exports, module) {
    let pagenationByfe = {
        /**
         * [createBtns 生成点击按钮]
         * @param  {[NUMBER]} totalPage [分页的总页数]
         * @param  {[NUMBER]} current   [当前页]
         */
        createBtns:function ($dom , totalPage , current) {
            debugger
            var tempStr = "";
            if (current > 1) {
                tempStr += "<span class='btn first' href=\"#\"  data-page = '1'>首页</span>";
                tempStr += "<span class='btn prepage' href=\"#\" data-page = "+(current-1)+">上一页</span>"
            }
            for(var pageIndex= 1 ; pageIndex < totalPage+1; pageIndex++){
                if (pageIndex == current){
                    tempStr += "<a  class='btn pageAct page"+pageIndex+"' data-page = "+( pageIndex )+"><span>"+ pageIndex +"</span></a>";
                } else {
                    tempStr += "<a  class='btn page"+pageIndex+"'  data-page = "+( pageIndex )+"><span>"+ pageIndex +"</span></a>";
                }
            }
    
            if (current < totalPage) {
                tempStr += "<span class='btn nextpage' href=\"#\"  data-page = "+(current+1)+">下一页</span>";
                tempStr += "<span class='btn last' href=\"#\" data-page = "+ (totalPage) +">尾页</span>";
            }
            if (totalPage != 1){
                document.getElementById($dom).innerHTML = tempStr;
            }else {
                document.getElementById($dom).innerHTML="";
            }
        },
        bindClick:function(perPage ,pages ,  $tbodyDom , $btnDom){
            // 设置首页、末页、上一页、下一页的点击事件
            var buttonArr = ['.first','.last','.prepage','.nextpage'];
            for(var k in buttonArr){
                var $dom = buttonArr[k];
                $('body').delegate( $dom , 'click' , function () {
                    let data = $(this).data('page');//获取当前按钮跳转的页数
                    pagenationByfe.pagination(perPage , data ,$tbodyDom , $btnDom );//对页面进行分页
                    //对当前页码的样式做处理
                    $('.page'+data).css({background:'#16599f',color:'#fff'});
                })
            }
            
            // 设置数码的点击事件 totalImgPage是总页数，为全局变量，在分页时被赋值
            for (var k  = 1 ;k <= pages ; k++){
                var $singleDom  = '.page'+k;
                $('body').delegate( $singleDom , 'click' , function () {
                    let data = $(this).data('page');
                    pagenationByfe.pagination(perPage , data ,$tbodyDom , $btnDom);//对页面进行分页
                    //对当前页码的样式做处理
                    $('.page'+data).css({background:'#16599f',color:'#fff'});
                })
            }
        },
        /**
         * [pagination 对数据进行分页]
         * @param  {[NUMBER]} perPage [每一页显示的条数]
         * @param  {[NUMBER]} current [当前页数]
         */
        pagination:function(perPage , current , $dom , $btnDom){
            debugger
            var tableData = document.getElementById($dom);
            var rows = tableData.rows.length; //表格的总行数
            // 设置表格的总页数
            var totalPage = 0; //表格的总页数
            var pageSize = perPage;
            if (rows/pageSize > parseInt(rows/pageSize)){
                totalPage = parseInt(rows/pageSize)+1;
            }else{
                totalPage = parseInt(rows/pageSize);
            }
            // 对数据进行分页
            var currentPage = current;
            var startRow = (currentPage - 1)*pageSize+1;
            var endRow = (currentPage*pageSize > rows ? rows : currentPage*pageSize);
            for(var i = 1 ; i < (rows+1) ; i++){
                var realRow = tableData.rows[i-1];
                if (i>=startRow && i<=endRow) {
                    realRow.style.display='table-row';
                }else{
                    realRow.style.display='none';
                }
            }
            //位置2 生成当前的点击按钮
            this.createBtns( $btnDom ,totalPage , current);
        },
        init:function (options) {
            let perPage = options.perPage || 10,
                currentPage = options.currentPage || 1,
                $tbodyId = options.$tbodyId ,
                $barconId = options.$barconId,
                pages = options.pages;
            this.pagination(perPage , currentPage , $tbodyId , $barconId);
            this.bindClick(perPage , pages , $tbodyId , $barconId);
        }
     }
     return pagenationByfe;
})

情景使用

 pagenationByfe.init({
    perPage:10,
    currentPage:1,
    $tbodyId:"vulTable_data",
    $barconId:"barcon_vulInfo",
    pages:res.vulInfo.length/10 > parseInt(res.vulInfo.length/10)?parseInt(res.vulInfo.length/10)+1:parseInt(res.vulInfo.length/10)
})