Xml javascript分页
更新时间：2024-01-03前言
在当今Web前端技术中，数据的分页显示是一个非常常见且必要的功能。因为当大量数据需要在页面中显示的时候，直接把数据全部展示出来会对用户体验产生非常不好的影响，因此我们需要对数据进行分页展示。而XML是一种非常常见的数据格式，而JavaScript是前端开发必须的语言，因此在本篇文章中，我们将介绍如何用JavaScript实现XML数据的分页展示。
第一部分：准备工作
在开始之前，我们需要准备好一些必要的工作。首先我们需要准备一个XML文件，这个文件中包含我们需要展示的数据。假设我们已经准备好了名为"data.xml"的XML文件，内容如下：
<?xml version="1.0" encoding="UTF-8"?>
<data>
<record>
<name>张三</name>
<age>20</age>
<sex>男</sex>
</record>
<record>
<name>李四</name>
<age>22</age>
<sex>男</sex>
</record>
...
<record>
<name>赵六</name>
<age>21</age>
<sex>女</sex>
</record>
</data>
然后我们需要编写HTML/CSS结构，以及JavaScript代码用来动态加载数据并进行分页。以下为我们预先编写好的HTML/CSS代码：
<!-- HTML结构 -->
<div class="content">
<ul class="data_list">
</ul>
<div class="page_list">
<ul>
</ul>
</div>
</div>
/* CSS样式 */
.data_list{
margin: 0;
padding: 0;
list-style: none;
}
.data_list li{
padding: 10px;
border-bottom: 1px solid #ccc;
}
.page_list{
margin-top: 10px;
text-align: center;
}
.page_list li{
display: inline-block;
padding: 5px 10px;
margin-right: 5px;
border: 1px solid #ccc;
cursor: pointer;
}
.page_list li.active{
background-color: #333;
color: #fff;
border-color: #333;
}
第二部分：编写JavaScript代码
当我们准备好了XML文件以及HTML/CSS结构之后，我们需要编写JavaScript代码来动态加载XML数据并进行分页。首先我们需要编写一个函数用来加载XML数据：
function loadXMLDoc(filename){
if (window.XMLHttpRequest){
xhttp=new XMLHttpRequest();
}
else{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
上述代码中，我们使用XMLHttpRequest对象来实现XML数据的异步加载并返回数据。然后我们需要编写一个函数用来初始化页面以及分页的数据：
var xmlData = loadXMLDoc("data.xml");
var dataNodes = xmlData.getElementsByTagName("record");
var dataPageSize = 5;
var pageCount = Math.ceil(dataNodes.length/dataPageSize);
var curPageIndex = 1;
var pageList = document.querySelector('.page_list ul');
var dataList = document.querySelector('.data_list');
function initPageList(){
for(var i = 1; i <= pageCount; i++){
var liNode = document.createElement('li');
liNode.innerHTML = i;
if(i === curPageIndex) {
liNode.classList.add('active');
}
pageList.appendChild(liNode);
}
}
function bindEvent(){
pageList.addEventListener('click', function(e){
var target = e.target;
if(target.tagName.toLocaleLowerCase() === 'li') {
var pageIndex = parseInt(target.innerHTML);
curPageIndex = pageIndex;
renderData();
}
});
}
function renderData(){
var start = (curPageIndex - 1) * dataPageSize;
var end = Math.min(start + dataPageSize, dataNodes.length);
var html = '';
for(var i = start; i < end; i++) {
var record = dataNodes[i];
var name = record.getElementsByTagName('name')[0].childNodes[0].nodeValue;
var age = record.getElementsByTagName('age')[0].childNodes[0].nodeValue;
var sex = record.getElementsByTagName('sex')[0].childNodes[0].nodeValue;
html += '<li><span>姓名：' + name + '</span><span>年龄：' + age + '</span><span>性别：' + sex + '</span></li>';
}
dataList.innerHTML = html;
var pageItems = pageList.querySelectorAll('li');
for(var i = 0; i < pageItems.length; i++) {
if(i === curPageIndex - 1) {
pageItems[i].classList.add('active');
} else {
pageItems[i].classList.remove('active');
}
}
}
initPageList();
bindEvent();
renderData();
上述JavaScript代码中，我们定义了一个分页大小(dataPageSize)，用于计算当前页面提取数据的起始和结束位置。我们还定义了当前页码(curPageIndex)、总页码(pageCount)，以及数据节点(dataNodes)等变量。
第三部分：加载数据并进行分页
当我们完成了JavaScript代码编写之后，我们需要将HTML/CSS文件与JavaScript文件整合到一起，并在浏览器中运行展示效果。以下是最终的完整代码：
<!-- HTML结构 -->
<div class="content">
<ul class="data_list">
</ul>
<div class="page_list">
<ul>
</ul>
</div>
</div>
/* CSS样式 */
.data_list{
margin: 0;
padding: 0;
list-style: none;
}
.data_list li{
padding: 10px;
border-bottom: 1px solid #ccc;
}
.page_list{
margin-top: 10px;
text-align: center;
}
.page_list li{
display: inline-block;
padding: 5px 10px;
margin-right: 5px;
border: 1px solid #ccc;
cursor: pointer;
}
.page_list li.active{
background-color: #333;
color: #fff;
border-color: #333;
}
<!-- JavaScript实现 -->
<script>
function loadXMLDoc(filename){
if (window.XMLHttpRequest){
xhttp=new XMLHttpRequest();
}
else{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
var xmlData = loadXMLDoc("data.xml");
var dataNodes = xmlData.getElementsByTagName("record");
var dataPageSize = 5;
var pageCount = Math.ceil(dataNodes.length/dataPageSize);
var curPageIndex = 1;
var pageList = document.querySelector('.page_list ul');
var dataList = document.querySelector('.data_list');
function initPageList(){
for(var i = 1; i <= pageCount; i++){
var liNode = document.createElement('li');
liNode.innerHTML = i;
if(i === curPageIndex) {
liNode.classList.add('active');
}
pageList.appendChild(liNode);
}
}
function bindEvent(){
pageList.addEventListener('click', function(e){
var target = e.target;
if(target.tagName.toLocaleLowerCase() === 'li') {
var pageIndex = parseInt(target.innerHTML);
curPageIndex = pageIndex;
renderData();
}
});
}
function renderData(){
var start = (curPageIndex - 1) * dataPageSize;
var end = Math.min(start + dataPageSize, dataNodes.length);
var html = '';
for(var i = start; i < end; i++) {
var record = dataNodes[i];
var name = record.getElementsByTagName('name')[0].childNodes[0].nodeValue;
var age = record.getElementsByTagName('age')[0].childNodes[0].nodeValue;
var sex = record.getElementsByTagName('sex')[0].childNodes[0].nodeValue;
html += '<li><span>姓名：' + name + '</span><span>年龄：' + age + '</span><span>性别：' + sex + '</span></li>';
}
dataList.innerHTML = html;
var pageItems = pageList.querySelectorAll('li');
for(var i = 0; i < pageItems.length; i++) {
if(i === curPageIndex - 1) {
pageItems[i].classList.add('active');
} else {
pageItems[i].classList.remove('active');
}
}
}
initPageList();
bindEvent();
renderData();
</script>
第四部分：总结
在本篇文章中，我们介绍了如何用JavaScript实现XML数据的分页展示。我们使用了XMLHttpRequest对象来实现XML数据的异步加载，并通过DOM解析XML数据，并将数据分页展示在页面中。此外，我们还介绍了如何在页面中动态生成分页器，并通过事件委托绑定事件，实现了分页器的分页功能。通过以上实现，我们可以在前端页面中展示超大量的数据，并实现方便快捷的数据分页展示功能。这样既可以充分利用页面空间，同时又保证了良好的用户体验。
