ajax获取动态列表数据后的分页问题

这是我在写前台网站时遇到的一个分页问题,由于数据是通过ajax的方式来请求得到的,如果引入相应的js文件来做分页,假如只是静态的填放数据到列表各项内容中(列表条数固定),确实不会出现问题。但是要从ajax中获取数据后要动态添加<li>至<ul>并实现分页,js文件却达不到想要的分页效果。
 
(原因:这是由于js脚本文件会在ajax完成请求之前执行,那么分页用到的js会先执行,而ajax中的动态添加<li>过程实现后确无法执行到分页的代码)
 

操作过程

1.首先,需要引入用到的JS插件
   在这里只需要 引入jquery的插件,下载可以点击打开链接  (相关的CSS样式可自行添加)
<script src="js/jquery.min.js" type="text/javascript"></script>

2.接下来便是设置ajax取得数据列表放入对应<ul>的位置,以及分页所要用到的上下页及页码的代码
 <div>
<ul id="all"> </ul>
<div class="page">
<a id="down" href="#" onClick="change1(--pageno)">上一页</a>  
<span id="a3"></span><a id="up" href="#" onClick="change1(++pageno)">下一页</a>
<span class="ho">第<span id="a2"></span>/<span id="a1"></span>页</span></div></div>

3、利用ajax请求到数据,并写上需要用到的两个function,代码如下:

 <script>
$(document).ready(function(){
$.ajax({
type:"POST",
url:"##",
contentType:"application/json",
dataType:'json',
data:id,
async:true,
success:function(data){
for(var i=0;i<data.news.length;i++){
var d=data.news[i].releaseTime.split(" ");
var li=$("<li><div class='title'><h6><a href='announcementsArticle.html?newsId="+data.news[i].id+"'>"+data.news[i].themeName+"</a></h6><span class='date'>"+d[0]+"</span></div> </li>");
$("#all").append(li);
}
var a = document.getElementById("all").getElementsByTagName("li");
var zz =new Array(a.length);
for(var i=0;i <a.length;i++)
{ zz[i]=a[i].innerHTML } //div的字符串数组付给zz
var pageno=1; //当前页
var pagesize=10; //每页多少条信息
if(zz.length%pagesize==0)
{var pageall =zz.length/pagesize }
else
{var pageall =parseInt(zz.length/pagesize)+1} //一共多少页
$("#p").text(pageall); //将pageall的值存放到div中,便于下次使用
change(1,pageall,zz);
}
});
}) var k;
function change(e,all,zu){
zz=zu;
var pagesize=10;
pageall=all;
pageno=e;
if(e <1)//如果输入页<1页
{ e=1;pageno=1}//就等于第1页 , 当前页为1
if(e>pageall)//如果输入页大于最大页
{e=pageall;pageno=pageall}//输入页和当前页都=最大页
document.getElementById("all").innerHTML="";//全部清空
for(var i=0;i<pagesize;i++)
{
var div =document.createElement("li");//建立div对象
div.innerHTML=zz[(e-1)*pagesize+i];//建立显示元素
document.getElementById("all").appendChild(div);//加入all中
if(zz[(e-1)*pagesize+i+1]==null)//超出范围跳出
break
}
var ye="";
for(var j=1;j<=pageall;j++)
{
if(e==j)
{ye=ye+"<span><a href='#' onClick='change1("+j+")' style='color:#FF0000'>"+j+"</a></span> "}
else
{ye=ye+"<a href='#' onClick='change1("+j+")'>"+j+"</a> "}
}
document.getElementById("a1").innerHTML=pageall;
document.getElementById("a2").innerHTML=pageno;
document.getElementById("a3").innerHTML=ye; /*如果当前是第一页则:*/ if (pageno == 1)
{
$('#down').hide();//隐藏
}else {
$('#down').show();//显示
} /*如果是最后一页则:*/ if (pageno == pageall)
{
$('#up').hide();//隐藏
}else {
$('#up').show();//显示
}
k=zu; }
function change1(e){ zz=k; var pagesize=10;
pageall=$("#p").text();
pageno=e;
if(e <1)//如果输入页<1页
{ e=1;pageno=1}//就等于第1页 , 当前页为1
if(e>pageall)//如果输入页大于最大页
{e=pageall;pageno=pageall}//输入页和当前页都=最大页
document.getElementById("all").innerHTML="";//全部清空
for(var i=0;i<pagesize;i++)
{
var div =document.createElement("li");//建立div对象
div.innerHTML=zz[(e-1)*pagesize+i];//建立显示元素
document.getElementById("all").appendChild(div);//加入all中
if(zz[(e-1)*pagesize+i+1]==null)//超出范围跳出
break
}
var ye="";
for(var j=1;j<=pageall;j++)
{
if(e==j)
{ye=ye+"<span><a href='#' onClick='change1("+j+")' style='color:#FF0000'>"+j+"</a></span> "}
else
{ye=ye+"<a href='#' onClick='change1("+j+")'>"+j+"</a> "}
}
document.getElementById("a1").innerHTML=pageall;
document.getElementById("a2").innerHTML=pageno;
document.getElementById("a3").innerHTML=ye; /*如果当前是第一页则:*/ if (pageno == 1)
{
$('#down').hide();//隐藏
}else {
$('#down').show();//显示
} /*如果是最后一页则:*/ if (pageno == pageall)
{
$('#up').hide();//隐藏
}else {
$('#up').show();//显示
}
} </script>
 

4、<div style="display" id="p"></div> //用来存放总页数,放置在body中

*注意看上面的代码中success回调函数中我先调用了一次change(1,all,zz)  这是进行了第一页的分页操作,并且我定义了一个全局变量k,当ajax请求完成时change(1,all,zz)这个函数将zz这个数据赋值给了k,这样当进行其他函数执行的时候,由于执行顺序的缘故,k已经变成了数组可以任意调用。(解决了zz这个数据作用的局限性)
 
5.在得到了数组(k)与页数(div的值)的情况下只需要让生成的页码以及上下页中的onclick都触发第二个函数即可。

ajax获取动态列表数据后的分页问题的更多相关文章

  1. Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx

    Atitit  项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx 1. 场景:应用在项目列表查询场景下1 1.1. 预计初步掌握vue ...

  2. T-SQL Recipes之生成动态列表数据

    Problem 首先什么是动态列表?举个示例,假设你想输出以逗号分隔的IDs,如: 1,45,67,199,298 Solution 生成动态列表数据在我们生活场景中很常见,比如在 Dynamic P ...

  3. MVC——应用Ajax获取不到数据问题解答

    当我们使用控制器利用Ajax获取表单数据时,调试为null,这时看看你接受表单时定义的参数名字是否为action 其实不能起这个名字的,这个名字和控制器关键字冲突了 随便换个其它名字就好了,比如我起个 ...

  4. vc/mfc获取rgb图像数据后动态显示及保存图片的方法

    vc/mfc获取rgb图像数据后动态显示及保存图片的方法 该情况可用于视频通信中获取的位图数据回放显示或显示摄像头捕获的本地图像 第一种方法 #include<vfw.h> 加载 vfw3 ...

  5. 【比特币】通过dns seeds获取节点列表数据

    通过dns seeds获取节点列表数据 dns seed是什么 返回比特币网络上完整节点IP地址的DNS服务器,用于协助发现节点. 哪里可以查看到 我们在bitcoinj库中,params文件夹内为网 ...

  6. jquery autocomplete ajax获取动态数据,兼容各浏览器,支持中文

    jquery.autocomplete.js经过改动,支持各种浏览器.支持中文输入! 1.效果图例如以下 2.HTML和ajax代码 <!DOCTYPE html> <html xm ...

  7. 通过Jquery中Ajax获取json文件数据

    1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...

  8. qt qml ajax 获取 json 天气数据示例

    依赖ajax.js类库,以下代码很简单的实现了获取天气json数据并展示的任务 [TestAjax.qml] import QtQuick 2.0 import "ajax.js" ...

  9. $.ajax获取不到数据问题解决

    $("#updateflow").click(function () { $.ajaxSetup({ contentType: "application/json;cha ...

随机推荐

  1. Oracle 缓存命中率问题一则(里面有个问题咨询大佬们)

    近日,核心数据库频繁抱出数据库缓存命中率过低,于是开始进行排查. 1.监控软件告警信息 2.抓取告警时间段内的awr报告进行分析 3.execute与parse命中率过低,说明分析(硬解析与软解析)的 ...

  2. iOS:文件操作相关(18-03-23更)

    0.iOS文件系统 1.工程内文件 2.文件夹管理 3.文件操作 4.NSCache 附录: 1.沙盒文件夹.文件大小 2.清除沙盒 Library / Cache 下所有数据 3.测试plist 0 ...

  3. Paths with -a does not make sense.

    最近开始使用为windows的系统,进行git操作的时候出现了一个小问题. 使用命令: E:\IdeaProjects\mmall>git commit -am 'first commit in ...

  4. 设计四个线程,其中两个线程每次对j增加1,另外两个线程对j每次减1,写出程序

    /* * 设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1.写出程序. */ public class ThreadTest { private int j; public sta ...

  5. 判断FreeMarker是否为空

    转自:https://blog.csdn.net/lwt976647637/article/details/73135933 (1)判断Map数据是否为空 <#ifmaster??&&a ...

  6. HTML学习日记之元信息meta标记

    所谓meta标记就是用来描述一个HTML网页文档的属性,也称为元信息,这些信息并不会显示在浏览器的页面中,例如作者.日期和时间.网页描述.页面刷新等. 基本语法: <meta name = &q ...

  7. 支付宝支付示例-python

    项目演示: 1.输入金额 ​ 2.扫码支付: ​ 3.支付完成: ​ ​ 具体操作步骤: 第一步:注册账号 https://openhome.alipay.com/platform/appDaily. ...

  8. day 10 函数的进阶

    动态传参 (重点)  *    ** 形参  * args在形参位置, *表示不定参数--接受的是位置参数   接受到的位置参数的动态传参:  都是元组 形参的顺序: 位置  *args 默认值  * ...

  9. Spark RDD API详解之:Map和Reduce

    RDD是什么? RDD是Spark中的抽象数据结构类型,任何数据在Spark中都被表示为RDD.从编程的角度来看, RDD可以简单看成是一个数组.和普通数组的区别是,RDD中的数据是分区存储的,这样不 ...

  10. s3c2440串口详解

    一.UART原理说明 通用异步收发器简称UART(Universal Asynchronous Receiver/Transmitter),它用来传输串行数据:发送数据时,CPU将并行数据写入UART ...