js给动态的ul li 添加分页

首先放一个div容器当分页

<ul id="tbl"></ul>    //这里的ul是动态的，js赋值

<div class="content" id="page" style="margin-top:500px;"></div> // 分页容器

 

然后页面JS（分为三部分）

<script type="text/javascript">

//第一部分，公共参数
var pageno = 1; //当前页
var pagesize = 2; //每页多少条信息
var zz = "";

//第二部分，获取ul里面的值
function getzz() {
var a = $("ul#tbYQJYlist li");
var zz = new Array(a.length);
for (var i = 0; i < a.length; i++) {
zz[i] = a[i].innerHTML;
} //div的字符串数组付给zz
return zz;
}

//第三部，点击事件（点击上一页，下一页触发）
function change(e) {
pageno = 1; //当前页
pagesize = 2; //每页多少条信息
if (zz.length % pagesize == 0) {
var pageall = zz.length / pagesize;
} else {
var pageall = parseInt(zz.length / pagesize) + 1;
} //一共多少页
pageno = e;
if (e < 1) {
e = 1; pageno = 1;//就等于第1页 ， 当前页为1
}
if (e > pageall) { //如果输入页大于最大页
e = pageall; pageno = pageall; //输入页和当前页都=最大页
}
$("#tbYQJYlist").html("");//全部清空
var html = "";
for (var i = 0; i < pagesize; i++) {
html += '<li>' + zz[(e - 1) * pagesize + i] + '</li>';//创建一页的li列表
if (zz[(e - 1) * pagesize + i + 1] == null) break;//超出最后的范围跳出
}
$("ul#tbYQJYlist").html(html);//给ul列表写入html
var ye = "";
for (var j = 1; j <= pageall; j++) {
if (e == j) {
ye = ye + "<span><a href='#' onClick='change(" + j + ")' style='color:#FF0000'>" + j + "</a></span> "
} else {
ye = ye + "<a href='#' onClick='change(" + j + ")'>" + j + "</a> "
}
}
var pageContent = "";
pageContent += '第<span id=\"a2\">' + pageno + '</span>/';
pageContent += '<span id="a1">' + pageall + '</span>页';
pageContent += '<span id="a3">' + ye + '</span>';
pageContent += '<a href="#" onClick="change(--pageno)">上一页</a>';
pageContent += '<a href="#" onClick="change(++pageno)">下一页</a>';
$("#page").html(pageContent);
}

</script>

<script type="text/javascript">

//这个js就是给ul动态赋值的，页面加载后执行
$(function () {
GetYQList(GetQueryString("DH"));
});

function GetYQList(ids) {

 $.ajax({

....//这里我用的ajax给ul赋值的，就不列举了，下面是complete执行完成后事件

complete: function (x) {

zz = getzz();//完成后给全局参数ZZ赋值，获取ul里面的列

change(1);//加载点击事件
}
});

}

</script>