获取全部数据后通过js纯前端实现分页效果

js纯前端实现分页

之前一直使用前后端配合的方式实现分页效果，即在后台将数据进行分页处理，前端向后端发送页数参数，单独的请求某一页的数据。目前在数据量不是很大的基础上要实现js纯前端分页，找了几个插件没有很好的解决方案，最后参照网络博客使用js实现。

说明：在调研过程中参考了一位大神的博客，但是忘记了博客链接，部分代码直接来自于该博客。

实现思路

具体实现

1. 通过js将数据渲染为表格

<!--html元素准备-->
<table id='idData'></table>
<div id="barcon" name="barcon"></div>

//获取数据，渲染表格
function requestData(  ) {
  $.ajax( {
    url: './get-data'
    type: 'GET',
    dataType: 'JSON'
  } ).then( function( res ) {
    if( res.resNo > 0 ) {
       var html = '';
        //i表示行数 col表示列数；
       for (var i = 0 ; i < res.list.length/4 ; i++){
          html += '<tr>'
          for (var col = 0 ; col < 4 ; col++ ){
            if (res.list[i*4+col]) {
               html+='<td><img src='+res.list[(i*4+col)]+'></td>'
            }else {
               html+='<td></td>'
            }
          }
         html += '</tr>'
       }
       $("#idData").html(html);
		//位置1  对数据进行分页
		pagination（4,1）;
		//位置3  绑定点击事件
		bindClick();
    }
  } )
}

因业务需求，通过字符串拼接的方式来渲染数据，如果数据量较多，列数据较多，可使用react组件渲染。

2. 对数据进行分页显示

/**
 * [pagination 对数据进行分页]
 * @param  {[NUMBER]} perPage [每一页显示的条数]
 * @param  {[NUMBER]} current [当前页数]
 */
function pagination(perPage , current){
    var tableData = document.getElementById("idData");
    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.dispaly='table-row';
        }else{
            realRow.style.dispaly='none';
        }
    }
     //位置2 生成当前的点击按钮
	 createBtns(totalPage , current)；		
}

3. 生成点击按钮

/**
 * [createBtns 生成点击按钮]
 * @param  {[NUMBER]} totalPage [分页的总页数]
 * @param  {[NUMBER]} current   [当前页]
 */
function createBtns(totalPage , current){
    var temStr = "";
    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++){
        tempStr += "<a  class='btn page"+pageIndex+"'  data-page = "+( pageIndex )+"><span>"+ pageIndex +"</span></a>";
     }

     if (current < totalPage) {
         tempStr += "<span class='btn nextpage' href=\"#\"  data-page = "+(currentPage+1)+">下一页</span>";
        tempStr += "<span class='btn last' href=\"#\" data-page = "+ (totalPage) +">尾页</span>";
     }
    document.getElementById("barcon").innerHTML = tempStr;
}

4. 绑定按钮点击事件

function bindClick(){
    // 设置首页、末页、上一页、下一页的点击事件
    var buttonArr = ['first','last','prepage','nextpage'];
    for(var k in buttonArr){
        var $dom = buttonArr[k];
        $('body').delegate( $dom , 'click' , function () {
           var data = $(this).data('page');//获取当前按钮跳转的页数
           pagination('4' , data);//对页面进行分页
           //对当前页码的样式做处理
           $('.page'+data).css({background:'#36c6d3',color:'#fff'}).siblings().css({background:'#fff',color:'#36c6d3'}); 
        })
    }

    // 设置数码的点击事件 totalImgPage是总页数，为全局变量，在分页时被赋值
    for (var k  = 1 ;k <= totolImgPage ; k++){
        var $singleDom  = '.page'+k;
        $('body').delegate( $singleDom , 'click' , function () {
           var data = $(this).data('page');
           pagination('4' , data);//对页面进行分页
           //对当前页码的样式做处理
           $('.page'+data).css({background:'#36c6d3',color:'#fff'}).siblings().css({background:'#fff',color:'#36c6d3'});
        })
     }
}

5. 根据页面设置按钮及表格的样式

调用顺序

思考误区

1. 在具体实现前，想通过请求的方式去控制，而不是通过隐藏显示的方式去控制

知识点：获取表格的行数：document.getElementById(‘tableData’).rows;
获取表格的某一行的样式：document.getElementById(‘tableData’).rows[index].style.xxx

2. 点击按钮的点击事件

通过onclick绑定的事件无法触发，可能因为是未来元素的原因（尚不清楚）。通过on/delegate 方式手动绑定