如何用JavaScript实现数组分页？

ello，大家好！今天要和大家分享一个非常实用的小技巧——如何在业务场景中使用JavaScript对数组进行分页展示。无论你是前端萌新，还是正在努力提升自己技能的小伙伴，这篇文章都会对你有所帮助哦！

业务需求

想象一下，我们正在开发一个购物网站，需要展示大量的商品数据。如果一下子展示太多，用户体验肯定不好。这时候分页展示就显得尤为重要了！如何用JavaScript实现这一需求呢？别急，我们一步步来。

JavaScript数组分页的实现

其实，实现数组分页非常简单。我们可以借助JavaScript的slice方法来达到目的。下面是具体的代码示例：

const arr = Array(100).fill().map((_, i) => i); // 创建一个包含100个元素的数组
const paginate = (array, pageSize, pageNumber) => {
  return array.slice((pageNumber - 1) * pageSize, pageNumber * pageSize);
};

// 示例：分页展示
console.log(paginate(arr, 10, 1)); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(paginate(arr, 10, 2)); // [10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
console.log(paginate(arr, 10, 3)); // [20, 21, 22, 23, 24, 25, 26, 27, 28, 29]

代码讲解

创建数组：我们用Array(100).fill().map((_, i) => i)创建了一个包含100个元素的数组，每个元素的值等于它的索引。
定义分页函数：paginate函数接收三个参数：

array：需要分页的数组
pageSize：每页展示的元素数量
pageNumber：当前页码，从1开始计数

实现分页逻辑：通过slice方法，根据pageNumber和pageSize计算出要返回的数组片段。具体来说，第一个参数是(pageNumber - 1) * pageSize，第二个参数是pageNumber * pageSize。

应用示例

通过console.log输出结果，我们可以清楚地看到分页后的数组片段：

console.log(paginate(arr, 10, 1)); // 第一页：[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(paginate(arr, 10, 2)); // 第二页：[10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
console.log(paginate(arr, 10, 3)); // 第三页：[20, 21, 22, 23, 24, 25, 26, 27, 28, 29]

结束

看吧！实现分页是不是很简单？只要几行代码，就能轻松搞定数组的分页展示。希望这个小技巧能为你的项目带来帮助！如果你还有其他关于JavaScript的问题或想学习更多的编程知识，欢迎在评论区留言，我们一起讨论进步哦！

在Android应用程序中渲染HTML并实现分页，可以使用WebView组件。WebView是Android提供的用于显示Web内容的控件，可以加载HTML页面并进行渲染。下面是一个简单的示例代码，展示了如何在Android应用程序中使用WebView实现HTML渲染和分页功能：

在上述代码中，我们首先在布局文件（activity_main.xml）中添加一个WebView组件。然后，在MainActivity中，我们获取WebView实例，并对其进行一些设置，例如启用JavaScript和加载HTML页面。

HTML页面可以通过loadUrl方法加载。在示例中，我们加载的是file:///android_asset/page.html，它假设HTML文件存储在应用的assets目录中。

为了在WebView中实现分页功能，可以在HTML页面中使用CSS的分页属性。例如，在CSS中可以设置-webkit-column-count属性来指定列数，从而实现分页效果。具体的CSS设置可以根据实际需求进行调整。

通过以上代码，Android应用程序将加载并渲染HTML页面，并在WebView中显示。如果HTML页面包含分页属性，将会自动分页显示内容。

需要注意的是，为了能够加载本地的HTML文件，需要在AndroidManifest.xml文件中添加适当的权限，例如：

你可以根据自己的需求对WebView进行更多的定制和扩展，以实现更复杂的HTML渲染和分页功能。

项目开发过程中，分页是少不了的，之前封装了一个分页组件，样式是基于bootstrap的样式，当然也可以自己来修改；

别的不说，上图上代码；

bootstrap样式分页

以下是相关代码：

/***=======================分页样式==================================***/  
/*分页样式*/  
.page{  
  display:inline-block;  
  width:100%;  
  text-align:center;  
  height:35px;  
  line-height:35px;  
  background-color:none;  
}  
.page  .pagination{  
  margin:0px  !important;  
}  
.page  .pagination  li  a{  
  /*修改按钮样式*/  
  border:none  !important;  
  background-color:transparent;  !important;  
  color:#555;  
  cursor:pointer;  
}  
.page  .pagination  li  a:hover,.page  .pagination  li  a:focus,.page  .pagination  li  a:active{  
  background-color:#ccc;  
}  
.page  .pagination  li.active  a,.page  .pagination  li.active  a:hover,.page  .pagination  li  a:active,.page  .pagination  li  a:focus{  
  color:#0099ff;  
  cursor:default;  
  background-color:none;  
}  
.pageinfo{
  display:none  !important;
}
/*隐藏分页信息*/  
.clickmore{  cursor:pointer;  }  
.pagination>.action>a:hover,.pagination>.action>a:focus{  color:#0099ff  !important;  cursor:default;  } 
 /****======================分页样式结束============================***/

上面是自己写的分页样式，可自行修改之，下面是分页组件代码：

/**  
   * bootstrap 对应的独立分析组件  
    * @demo 
    * pagination.init({  
    *   selector : '.page', //选择器，作为渲染目标,默认为 '.page.pagination',非必须  
    *   count : 120, //为总记录数，必须  
    *   isTransform : false,//是否转换为符合后台需要的参数begin /end  
    *   page : 1, //为当前页码，非必须  
    *   pagesize : 10, //为每页条数，默认10，非必须  
    *   increment : 10, //为页面存在的分页增量，比如只显示5个页码，非必须  
    *   pageArray : [], //可以进行生成下拉框，比如 10，20，50 ，选择不同的页码进行分页，非必须  
    *   previousTitle : '点击查看',//为上一页的title显示，未实现；  
    *   callback : function(pageObject){//为分页点击回调函数，必须  
    *     console.log(pageObject);//pageObject= {page : 1,pagesize:10};回调函数返回值，包括下一个页码和每页条数  
    *   }  
    * });  
    * @since 2016年2月15日 15:18:36  
    * @author lixun  
    * @version 1.0  
    * @edited by lixun ,增加多实例；一个页面多个分页 ；  
    * 处理思路：  
    * 1\. 对应的每个selector有一个pagination,然后在调用的时候根据selector进行查找  
    * 2\. 处理的内容：1）分页加载；2）事件绑定 3）回调函数 
    * 3\. 处理原则：平滑处理，原有的可继续使用；  
    */ 
var pagination = {
    _defaultSelector : '.page .pagination',    //默认选择器
    _defaultPagesize : 20,                    //默认分页条数
    _defaultIncrement : 10,                    //默认分的页码数
    _defaultPageArray : [10,20,50,100],        //默认的条码下拉框
    _map : {    //用户处理多实例增加的容器，不可覆盖
        //selector : {私有属性}
        //".page .column" : {}
    },
    //通用属性
    lastSelector : '',//上一个选择器，用于开发者不传递参数的时候，去查找上一个选择器用的。
    previousTitle : '上一页',
    nextTitle : '下一页',
    previousContent : '上一页',
    nextContent : '下一页',
    //获得分页实例
    _getPagination : function(selector){
        if(null != selector && selector != '' && $(selector).length > 0){
            return pagination._map[selector];
        }else{
            console.error('selector 传参错误或$('+selector+')不存在!');
        }
        return null;
    },
    //获得返回的字符串
    pageArrayStr : function(selector,ps){
        var pa = pagination._map[selector].pageArray;
        if(null != pa && pa.length > 0){
            var concatStr = '<select onchange="pagination.changePagesize(\''+(selector)+'\',event)" style="height:20px;line-height:20px;padding:0px;margin-top:-2px;">';
            var i=0,max=pa.length;
            for(;i<max;i++){
                var v = pa[i];
                concatStr += '<option value="'+v+'" '+(v == ps ? 'selected="true"' : '')+'>'+v+'</option>';
            }
            concatStr += '</select>';
            return concatStr;
        }
        return "";
    },

    //绑定事件
    bindEvent : function(selector){
        if(selector && selector != ''){
            var _tempPaginationInstance = pagination._map[selector] || {};
            var _bindE = _tempPaginationInstance.bindE == true ? true : false;
            if(_bindE == false){
                _tempPaginationInstance.bindE = true;
                pagination._map[selector] = _tempPaginationInstance;
                //跳转页面
                $(selector).delegate('li.unselect','click',pagination.clickpage);
                //绑定上一页事件
                $(selector).delegate('li.pageup','click',pagination.pageup);
                //绑定下一页事件
                $(selector).delegate('li.pagedown','click',pagination.pagedown);
                //绑定前面页面事件
                $(selector).delegate('a.previous','click',pagination.previouspage);
                //绑定后面页面事件
                $(selector).delegate('a.next','click',pagination.nextpage);
            }
        }
    },
    //分页初始化
    init : function(params){
        //处理传参数据
        params = params || {};
        params.count = params.count || 0;
        params.pagesize = params.pagesize || pagination._defaultPagesize;
        var paramSelector = pagination._defaultSelector;
        if(params.selector){
            paramSelector = params.selector;
        }
        //获得选择器后，进行实例处理
        var paginationInstance = pagination._getPagination(paramSelector);
        //传参获取最新配置
        var tempPaginationInstance = {
            selector : paramSelector,
            page : params.page ? params.page : (paginationInstance && paginationInstance.action == true ? (paginationInstance.page ? paginationInstance.page : 1) : 1),
            count : params.count || 0,
            action : false,
            bindE : false,//是否绑定事件
            pagesize : params.pagesize,
            callback : params.callback || $.noop,
            pagenumber : (parseInt((params.count || 0)/(params.pagesize||pagination._defaultPagesize),10)+((params.count||0)%(params.pagesize||pagination._defaultPagesize)==0 ? 0 : 1)),//根据总数和一页条数获得页码数量
            increment :  params.increment || pagination._defaultIncrement,
            pageArray : params.pageArray || pagination._defaultPageArray
        };
        if(paginationInstance && undefined != paginationInstance){
            //存在实例,进行更新。
            tempPaginationInstance.bindE = true;//如果存在的话，肯定绑定了
            pagination._map[paramSelector] = $.extend(paginationInstance,tempPaginationInstance);
        }else{
            pagination._map[paramSelector] = tempPaginationInstance;//重新赋值
            pagination.bindEvent(paramSelector);//绑定事件
        }
        pagination.loadPage(paramSelector);
        pagination.lastSelector = paramSelector;
    },
    //点击页面数直接跳转
    clickpage : function(){
        var $a = $(this).find('a');
        var selector = $a.attr('selector');
        var gonumber = parseInt($a.html(),10);
        $(selector+' li.active').addClass('unselect').removeClass('active');
        $(this).addClass('active').removeClass('unselect');
        pagination.gopage(selector,gonumber);
    },
    //向上翻页
    pageup :  function(){
        var $a = $(this).find('a');
        var selector = $a.attr('selector');
        var _tempInstance = pagination._map[selector];
        if(_tempInstance){
            //得到当前页面，然后翻页，如果在边界，那么就要进行触发一次翻页事件
            var  $actel = $(selector+' li.active a');
            var nownumber = parseInt($actel.html(),10);
            if(nownumber == 1){
                return false;
            }else{
                pagination.gopage(selector,nownumber-1);
            }
        }
    },
    //向下翻页
    pagedown : function(){
        var $a = $(this).find('a');
        var selector = $a.attr('selector');
        var _tempInstance = pagination._map[selector];
        if(_tempInstance){
            var pagenumber = _tempInstance.pagenumber;
            //获得该实例的分页码数
            var  $actel = $(selector+' li.active a');
            var nownumber = parseInt($actel.html(),10);
            if(nownumber == pagenumber){
                return false;
            }else{
                pagination.gopage(selector,nownumber+1);
            }
        }
    },
    //前面页面
    previouspage : function(){
        var selector = $(this).attr('selector');
        var _tempInstance =pagination._map[selector];
        if(_tempInstance){
            var increment = _tempInstance.increment,
            page = _tempInstance.page;
            //判断当前是第几个，比如16，那么就以10的倍数向前翻页
            var $nowobj = $(selector+' a.previous').parent();
            var nextnumber = parseInt($nowobj.next().children().html(),10);
            var end = (nextnumber-1)%increment > 0 ? parseInt((nextnumber/increment),10)*increment : parseInt((nextnumber/increment-1),10)*increment;
            pagination.gopage(selector, end+1);
        }
    },
    //后面页面
    nextpage : function(){
        //判断当前点击的哪些，比如：现在是5，点击生成6...
        var selector = $(this).attr('selector');
        var _tempInstance = pagination._map[selector];
        if(_tempInstance){
            var increment = _tempInstance.increment;
            var $nowobj = $(selector+' a.next').parent();
            var prenumber = parseInt($nowobj.prev().children().html(),10);
            if(parseInt(prenumber/5,10) ==1){//说明在第一页，要从5加载5个，直到结束
                pagination.addPage(selector,$nowobj,5);
            }else{
                //第二次 增加页面数量了，应该是从10开始了...
                pagination.addPage(selector,$nowobj,increment);
            }
        }
    },
    addPage : function(selector,domobj,size){
        var _tempInstance = pagination._map[selector];
        if(_tempInstance){
            var pagenumber = _tempInstance.pagenumber,
            increment  = _tempInstance.increment;
            var start  = parseInt(domobj.prev().children().html(),10);
            pagination.gopage(selector, start+1);
        }
    },
    loadPage : function(selector){
        //根据selector获得count,pagesize,page
        var _tempInstance = pagination._map[selector];
        if(!_tempInstance){
            console.log('error : _tempInstance is null now ,check pagination params please!');
            return null;
        }
        var count = _tempInstance.count,
            pagesize = _tempInstance.pagesize,
            page = _tempInstance.page,
            increment = _tempInstance.increment,
            pageArrayStr = pagination.pageArrayStr(selector,pagesize),
            pagenumber = _tempInstance.pagenumber;
        var $page = $(selector);
        //清空内容
        $page.html('');
        var pageno = pagenumber;
        page = page > pageno ? 1 : page;    //如果当前页码树大于总页码数则置为1，否则为当前页码数；

        //如果页数超过10，则增...,以5个数字递增，
        //显示到page页面的下一个5的倍数上。
        var endpage = (parseInt(page/increment,10))*increment > pageno ? pageno : (parseInt(page/increment,10)+(page%increment==0 ? 0 : 1))*increment;
        if(pageno<=increment){
            endpage = pageno;
        }
        var pageHtml = '';
        if(pageArrayStr== ''){
        }else if(pagination._map[selector].pageArray.length==1){
            pageHtml = '<li class="pageinfo">共'+count+'条 </li>';
        }else{
            pageHtml = '<li class="pageinfo">共'+count+'条 , 每页'+pageArrayStr+'条</li>';
        }
        $page.append(pageHtml);
        $page.append('<li class="prev pageup '+(page ==1 ? 'disabled' : '')+'"><a title="'+pagination.previousTitle+'" href="javascript：;" selector="'+(selector)+'">'+pagination.previousContent+'</a></li>');
        //判断第几页
        var start = 0;
        if(page > increment && page <= pageno){
            $page.append('<li><a class="previous" href="javascript：;" selector="'+(selector)+'">...</a></li>');
            //给一个自定义增长数量，比如5个，每次增长五个，当前页面6页面，增长5个为10个，start page为 6
            start = parseInt((page%increment==0 ? (page-1) : page)/increment,10)*increment;
            endpage = (start+increment ) > pageno ? pageno : (start+increment);//如果开始页面加上增加页面大于最大页码数，则等于最大页码数
            if(endpage-page <increment){
                start = endpage-increment;
            }
        }
        for(var i=start;i<(endpage == 0?1:endpage);i++){
            var listr = '<li class="unselect"><a href="javascript：;" selector="'+(selector)+'">'+(i+1)+'</a></li>';
            //在第page页面增加样式
            if((page-1) == i){
                listr = '<li class="active"><a selector="'+(selector)+'">'+(i+1)+'</a></li>';
            }
            $page.append(listr);
        }
        if(pageno > 5 && endpage != pageno){
            $page.append('<li><a class="next" href="javascript：;" selector="'+(selector)+'">...</a></li>');
        }
        $page.append('<li class="next pagedown '+(page == pageno ? 'disabled' : '')+'"><a title="'+pagination.nextTitle+'" href="javascript：;" selector="'+(selector)+'">'+pagination.nextContent+'</a></li>');
    },
    //跳转页面
    gopage : function(selector,page){
        var _tempInstance = pagination._map[selector];
        if(_tempInstance){
            _tempInstance.page = page;
            _tempInstance.action = true;
            _callback = _tempInstance.callback;
            _pagesize = _tempInstance.pagesize;
            pagination._map[selector] = _tempInstance;
            _callback(pagination.transform({
                page : page,
                rows : _pagesize
            }));
        }
    },
    /*返回现在的页面*/
    getNowPage : function(selector){
        selector = selector || (pagination.lastSelector || pagination._defaultSelector);//获取上一个选择器
        var _tempInstance = pagination._map[selector];
        if(_tempInstance){
            _tempInstance.action = true;
            var _page = _tempInstance.page,
                _pagesize = _tempInstance.pagesize;
            pagination._map[selector] = _tempInstance;
            return pagination.transform({
                page : _page,
                rows : _pagesize
            });
        }
        return null;
    },
    transform : function(paginationParams){
        if(pagination.isTransform && pagination.isTransform == true){
            var p = paginationParams.page || 1;
            var rows = paginationParams.pagesize || 10;
            return {
                begin : (p-1)*rows+1,
                end : p*rows
            };
        }
        return paginationParams;
    },
    //返回分页参数，以供列表页面加载数据使用
    getParams :function(selector){
        selector = selector || (pagination.lastSelector || pagination._defaultSelector);//获取上一个选择器
        var _tempInstance = pagination._map[selector];
        if(_tempInstance){
            var _pagesize = _tempInstance.pagesize;
            return pagination.transform({
                //第几页，一页有多少条记录
                page:1,
                rows : _pagesize
            });
        }
        return null;
    },
    changePagesize : function(selector,ev){
        var t = ev.currentTarget || ev.target || ev.srcElement,
            $t = $(t),
            v=$t.find('option:selected').val();
//            selector = $t.attr('selector');
        var _tempInstance = pagination._map[selector];
        if(_tempInstance){
            _tempInstance.pagesize = v;
            var _callback = _tempInstance.callback;
            pagination._map[selector] = _tempInstance;
            //重新调用callback方法
            _callback(pagination.transform({
                page : 1,
                rows : v
            }));
        }
    }
};

文章首发于 BUG集散地 ,https://chrunlee.cn/article/pagination-web-javascript.html

在线咨询

上一篇：10个对web开发人员有用的HTML文件上传技巧
下一篇：Java web项目实现打印机功能

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。