jquery实现html页面 div 假分页有原理有代码

首先，我们需要了解假分页的概念。假分页，即客户端分页，指的是将所有数据一次性加载完毕，将其存储在客户端，并根据当前页码和每页显示的数据数量，动态生成需要显示的内容。相比于传统的服务端分页，假分页不需要多次发起网络请求，能够大大加快页面加载速度，在数据量不是很大的情况下，使用假分页非常适合。

接下来我们来讲解如何使用jQuery实现假分页。

首先，我们需要一个包含所有数据的JSON对象，以下为示例数据：

var jsonData = [
  {id:1,name:'张三',age:20},
  {id:2,name:'李四',age:21},
  {id:3,name:'王五',age:22},
  {id:4,name:'赵六',age:23},
  {id:5,name:'秦七',age:24},
  {id:6,name:'韩八',age:25},
  {id:7,name:'武九',age:26},
  {id:8,name:'周十',age:27},
  {id:9,name:'杨十一',age:28},
  {id:10,name:'刘十二',age:29},
  {id:11,name:'陈十三',age:30},
  {id:12,name:'孙十四',age:31},
  {id:13,name:'吴十五',age:32},
  {id:14,name:'郑十六',age:33},
  {id:15,name:'蒋十七',age:34},
  {id:16,name:'魏十八',age:35},
  {id:17,name:'梁十九',age:36},
  {id:18,name:'冯二十',age:37},
  {id:19,name:'许二十一',age:38},
  {id:20,name:'何二十二',age:39}
];

接下来我们需要先定义每页显示的数量，和总页数。以每页显示5条数据为例：

var pageSize = 5; //每页显示的数据量
var pageCount = Math.ceil(jsonData.length / pageSize); //总页数

接着，我们来定义分页的结构，每页数据存放在一个div中，通过设置display:none样式来隐藏：

<div id="page1" class="page" style="display:none"></div>
<div id="page2" class="page" style="display:none"></div>
<div id="page3" class="page" style="display:none"></div>
<div id="page4" class="page" style="display:none"></div>
<div id="page5" class="page" style="display:none"></div>

我们需要定义一个方法，用于生成每页需要显示的数据，以及将其显示出来。以下是示例代码：

function setPageData(pageIndex){
  var start = (pageIndex - 1) * pageSize; //获取本页数据的起始下标
  var end = pageIndex * pageSize; //获取本页数据的结束下标
  end = end > jsonData.length ? jsonData.length : end; //判断是否超过总数据量，做出修正

  var pageData = jsonData.slice(start, end); //获取本页需要显示的数据

  var pageHtml = ''; //定义用于存放分页数据的HTML变量
  for(var i = 0;i < pageData.length; i++){
    var item = pageData[i];
    pageHtml += '<div>'+
                '<span>'+ item.id +'</span>'+
                '<span>'+ item.name +'</span>'+
                '<span>'+ item.age +'</span>'+
                '</div>';
  }

  var pageDom = $('#page'+pageIndex); //获取本页需要显示数据的div元素
  pageDom.html(pageHtml); //将生成的分页数据设置到页面中
  pageDom.show(); //将本页数据对应的div元素显示出来
}

接下来，我们需要定义一个方法，用于隐藏除当前页以外的所有分页数据。以下是示例代码：

function hideOtherPages(pageIndex){
  for(var i = 1;i <= pageCount;i++){
    if(i !== pageIndex){
      $('#page'+i).hide();
    }
  }
}

最后，我们需要实现点击页码时切换分页数据的功能，可以使用jQuery的click事件。以下是示例代码：

$('.pager').on('click','.page-num',function(){
  var pageIndex = parseInt($(this).text()); //获取点击的页码
  setPageData(pageIndex); //生成本页需要显示的数据，显示在页面中
  hideOtherPages(pageIndex); //隐藏除本页以外的所有分页数据
});

完整的代码如下：

var jsonData = [
  {id:1,name:'张三',age:20},
  {id:2,name:'李四',age:21},
  {id:3,name:'王五',age:22},
  {id:4,name:'赵六',age:23},
  {id:5,name:'秦七',age:24},
  {id:6,name:'韩八',age:25},
  {id:7,name:'武九',age:26},
  {id:8,name:'周十',age:27},
  {id:9,name:'杨十一',age:28},
  {id:10,name:'刘十二',age:29},
  {id:11,name:'陈十三',age:30},
  {id:12,name:'孙十四',age:31},
  {id:13,name:'吴十五',age:32},
  {id:14,name:'郑十六',age:33},
  {id:15,name:'蒋十七',age:34},
  {id:16,name:'魏十八',age:35},
  {id:17,name:'梁十九',age:36},
  {id:18,name:'冯二十',age:37},
  {id:19,name:'许二十一',age:38},
  {id:20,name:'何二十二',age:39}
];

var pageSize = 5;
var pageCount = Math.ceil(jsonData.length / pageSize);

for(var i = 1;i <= pageCount;i++){
  $('#page'+i).addClass('page');
}

function setPageData(pageIndex){
  var start = (pageIndex - 1) * pageSize;
  var end = pageIndex * pageSize;
  end = end > jsonData.length ? jsonData.length : end;

  var pageData = jsonData.slice(start, end);

  var pageHtml = '';
  for(var i = 0;i < pageData.length; i++){
    var item = pageData[i];
    pageHtml += '<div>'+
                '<span>'+ item.id +'</span>'+
                '<span>'+ item.name +'</span>'+
                '<span>'+ item.age +'</span>'+
                '</div>';
  }

  var pageDom = $('#page'+pageIndex);
  pageDom.html(pageHtml);
  pageDom.show();
}

function hideOtherPages(pageIndex){
  for(var i = 1;i <= pageCount;i++){
    if(i !== pageIndex){
      $('#page'+i).hide();
    }
  }
}

$('.pager').on('click','.page-num',function(){
  var pageIndex = parseInt($(this).text());
  setPageData(pageIndex);
  hideOtherPages(pageIndex);
});

以上代码中，我们通过生成每页需要显示的数据，再通过隐藏除本页以外的所有分页数据，来实现了假分页的效果。其中，通过设置className为"page"来定义每页数据所在的容器，通过为页码添加className为"page-num"来实现点击页码时触发事件。

示例1：

假设我们有一个包含100条数据的列表需要进行分页，每页显示10条数据，可以使用以下代码实现：

var jsonData = [ /*省略100条数据的定义*/ ];
var pageSize = 10;
var pageCount = Math.ceil(jsonData.length / pageSize);

for(var i = 1;i <= pageCount;i++){
  $('#page'+i).addClass('page');
}

function setPageData(pageIndex){
  /*省略生成每页数据的代码*/
}

function hideOtherPages(pageIndex){
  /*省略隐藏除本页以外的所有分页数据的代码*/
}

$('.pager').on('click','.page-num',function(){
  var pageIndex = parseInt($(this).text());
  setPageData(pageIndex);
  hideOtherPages(pageIndex);
});

示例2：

假设我们有一个动态加载数据的列表，在获取到数据后需要进行分页显示，可以使用以下代码实现：

//假设我们已经获取到数据并暂存为jsonData，每页需要显示10条数据
var jsonData = [ /*省略获取到的数据的定义*/ ];
var pageSize = 10;
var pageCount = Math.ceil(jsonData.length / pageSize);

for(var i = 1;i <= pageCount;i++){
  $('#page'+i).addClass('page');
}

function setPageData(pageIndex){
  /*省略生成每页数据的代码*/
}

function hideOtherPages(pageIndex){
  /*省略隐藏除本页以外的所有分页数据的代码*/
}

//动态加载数据
function loadData(){
  /*省略加载数据的代码*/
  jsonData = /*获取到数据后更新JSON数据*/
  pageCount = Math.ceil(jsonData.length / pageSize);
  /*更新总页数*/

  /*根据当前页码重新生成数据*/
  var currentPageIndex = parseInt($('.pager').find('.active').text());
  setPageData(currentPageIndex);
  hideOtherPages(currentPageIndex);

  /*更新页码*/
  /*省略更新页码的代码*/
}

$('.pager').on('click','.page-num',function(){
  var pageIndex = parseInt($(this).text());
  setPageData(pageIndex);
  hideOtherPages(pageIndex);
});

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery实现html页面 div 假分页有原理有代码 - Python技术站

jquery实现html页面 div 假分页有原理有代码

相关文章