分页插件制作

在企业级传统项目开发中，分页功能是列表页面的标配，而兼容低版本 IE 浏览器（尤其是 IE7+） 仍是许多老旧项目的硬性要求。市面上多数现代分页组件已放弃对 IE7 的支持，而 kkpager 作为轻量级原生 JS 分页插件，凭借出色的兼容性和易用性，成为这类场景的最优选择。本文将从需求分析、代码实现、核心原理到问题排查，全方位讲解如何基于 kkpager 实现兼容 IE7+、支持 URL 传参、AJAX 异步加载的分页功能，代码可直接落地生产环境。

一、需求拆解与技术选型

核心需求（精准匹配传统项目场景）

兼容性：核心兼容 IE7 及以上浏览器，同时适配 Chrome、Firefox 等现代浏览器；
数据加载：通过 AJAX 异步拉取 JSON 数据，避免页面整体刷新，提升交互体验；
分页交互 ：支持页码点击切换，URL 自动携带页码参数（如?pno=2），刷新页面保留当前页状态；
边界处理：自动计算总页数，对 "最后一页数据不足""无数据" 等场景做友好适配；
稳定性：代码具备容错能力，避免因数据异常、参数非法导致页面报错。

技术选型（兼顾兼容与实用）

技术 / 工具	选型理由	版本 / 注意事项
jQuery	兼容 IE7 的基础库，kkpager 依赖 jQuery	1.10.2（IE7 兼容的最后稳定版本，3.x 完全不支持 IE7）
kkpager	轻量（<10KB）、原生 JS 编写、兼容 IE6+、支持自定义样式	官方稳定版
数据来源	本地 JSON（演示）/ 后端接口（生产）	实际项目需替换为后端分页接口

二、完整实现方案（可直接复用）

1. 标准化项目结构（避免路径坑）

plaintext

复制代码

├── index.html                // 主页面（核心逻辑）
├── js/
│   ├── jquery-1.10.2.min.js  // jQuery核心（必须前置引入）
│   ├── kkpager.js            // 分页插件核心
│   ├── index.json            // 模拟分页数据
└── style/
    └── kkpager_orange.css    // 分页插件默认样式（可自定义）

2. 核心代码实现（带生产级注释）

html

预览

复制代码

<!DOCTYPE html>
<html>
<head>
<title>兼容IE7+的分页插件（kkpager实战）</title>
<!-- 【关键】引入顺序：先jQuery后kkpager，否则IE7下直接报错 -->
<script src="./js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/kkpager.js"></script>
<link rel="stylesheet" type="text/css" href="style/kkpager_orange.css" />
</head>
<body style="margin: 0px; ">
<!-- 列表容器：IE7下固定宽度避免样式错乱 -->
<div style="width:800px;margin:0 auto; height: 380px ;">
	<table style="width: 700px; margin: 20px auto; border-collapse: collapse; border: 1px solid #ccc; ">
		<thead style="background-color: #ccc;height: 50px;">
			<tr>
				<th width="100px">序号</th>
				<th width="200px">姓名</th>
				<th width="400px">创建时间</th>
			</tr>
		</thead>
      <tbody class="tbody">
      </tbody>
    </table>
</div>
<!-- 分页容器：必须保留id="kkpager"，插件核心挂载节点 -->
<div id="kkpager" style="text-align: center;width:800px;margin:0 auto;">
</div>

<script type="text/javascript">
	// 【配置项】每页显示条数（可根据业务调整）
	var pageSize = 3; 
	// 全局变量：存储完整数据列表（IE7不支持let，统一用var）
	var list = [];
	// 全局变量：总数据条数
	var totalDataCount = 0;

	/**
	 * 渲染表格数据（核心渲染函数）
	 * @param {Number} pageNum 当前页码
	 * @desc 1. 计算当前页数据索引范围 2. 拼接DOM字符串 3. 渲染到页面 4. 容错处理
	 */
	function renderTable(pageNum) {
		// 计算当前页数据起始/结束索引（数组下标从0开始，需注意偏移）
		var startNum = (pageNum - 1) * pageSize; 
		var endNum = pageNum * pageSize; 
		// 边界处理：最后一页数据不足时，结束索引取总数据条数
		if (endNum > totalDataCount) {
			endNum = totalDataCount;
		}
		
		var str = ""; 
		// 循环拼接表格行（IE7下for循环兼容性最优）
		for (var i = startNum; i < endNum; i++) {
			// 【容错】防止数据缺失导致页面报错
			var item = list[i] || {};
			str += '<tr>' +
					'<td style="border: 1px solid #ccc; text-align: center; height:50px;">' + (item.id || '') + '</td>' +
					'<td style="border: 1px solid #ccc; text-align: center; height:50px;">' + (item.name || '') + '</td>' +
					'<td style="border: 1px solid #ccc; text-align: center; height:50px;">' + (item.create_time || '') + '</td>' +
				  '</tr>';
		}
		// 渲染到页面（jQuery html()方法兼容IE7）
		$('.tbody').html(str);
		
		// 【体验优化】无数据时显示提示
		if (totalDataCount === 0) {
			$('.tbody').html('<tr><td colspan="3" style="text-align:center; height:50px;">暂无数据</td></tr>');
		}
	}

	/**
	 * 计算总页数（兼容无数据场景）
	 * @returns {Number} 总页数
	 */
	function getTotalPage() {
		// 无数据时默认返回1页（避免分页控件不显示）
		if (totalDataCount === 0) return 1; 
		var tota = Math.floor(totalDataCount / pageSize); 
		var remainder = totalDataCount % pageSize; 
		// 有余数则总页数+1
		if (remainder > 0) {
			tota += 1;
		}
		return tota;
	}

	/**
	 * 解析URL参数（兼容IE7的URL参数获取）
	 * @param {String} name 参数名
	 * @returns {String|null} 参数值
	 */
	function getParameter(name) { 
		var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); 
		var r = window.location.search.substr(1).match(reg); 
		if (r!=null) return unescape(r[2]); 
		return null;
	}

	/**
	 * 获取合法的当前页码（容错核心）
	 * @returns {Number} 确保页码为正整数，默认返回1
	 */
	function getCurrentPageNo() {
		var pageNo = getParameter('pno');
		// 校验逻辑：非数字/小于1 → 默认1
		return pageNo && !isNaN(pageNo) && pageNo > 0 ? parseInt(pageNo) : 1;
	}

	/**
	 * 初始化分页控件（插件核心调用）
	 */
	function initPager() {
		var totalPage = getTotalPage();
		var totalRecords = totalDataCount;
		var pageNo = getCurrentPageNo();
		
		// 先渲染当前页数据
		renderTable(pageNo);
		
		// 【核心】初始化kkpager
		kkpager.generPageHtml({
			pno : pageNo,          // 当前页码
			total : totalPage,     // 总页数
			totalRecords : totalRecords, // 总数据条数
			mode : 'click',        // 点击模式（非链接跳转，IE7兼容）
			click : function(n){   // 页码点击事件
				this.selectPage(n); // 插件内置：标记当前选中页
				renderTable(n);     // 重新渲染数据
				return false;       // 阻止默认链接跳转（关键）
			}
		});
		
		// 【优化】无数据时隐藏分页控件
		if (totalDataCount === 0) {
			$('#kkpager').hide();
		}
	};

	// 页面加载完成后执行（jQuery ready兼容IE7）
	$(function () {
		// 【体验优化】显示加载提示
		$('.tbody').html('<tr><td colspan="3" style="text-align:center; height:50px;">加载中...</td></tr>');
		
		// AJAX请求数据（生产环境替换为后端接口）
		$.ajax({
			url: './js/index.json', 
			method: 'GET',
			dataType: 'json',
			timeout: 5000, // 5秒超时保护（避免请求挂起）
			success: function (res) {
				// 【容错】确保数据格式正确
				list = Array.isArray(res.data) ? res.data : [];
				totalDataCount = list.length;
				console.log('数据请求成功，总条数：', totalDataCount);
				initPager(); // 【关键】数据加载完成后再初始化分页
			},
			error: function (xhr, status, error) {
				console.error('数据请求失败：', status, error);
				$('.tbody').html('<tr><td colspan="3" style="text-align:center; height:50px;">数据加载失败，请刷新重试</td></tr>');
			}
		});
	});
</script>
</body>
</html>

3. 模拟 JSON 数据（index.json）

json

复制代码

{
  "code": 200,
  "msg": "success",
  "data": [
    {"id": 1, "create_time": "2026-01-01", "name": "张三"},
    {"id": 2, "create_time": "2026-01-02", "name": "李四"},
    {"id": 3, "create_time": "2026-01-03", "name": "王五"},
    {"id": 4, "create_time": "2026-01-04", "name": "赵六"},
    {"id": 5, "create_time": "2026-01-05", "name": "钱七"},
    {"id": 6, "create_time": "2026-01-06", "name": "孙八"},
    {"id": 7, "create_time": "2026-01-07", "name": "周九"}
  ]
}

三、核心原理与兼容要点（深度解析）

1. 插件引入顺序（IE7 下的致命坑）

kkpager 内部依赖 jQuery 的$对象，若先引入 kkpager 再引入 jQuery，IE7 下会直接抛出kkpager is undefined或$ is not a function错误。正确顺序：先 jQuery，后 kkpager.js。

2. 分页初始化时机（数据驱动核心）

分页控件的初始化必须在 AJAX 请求成功后执行（initPager()放在success回调中）：

错误做法：页面加载时直接初始化 → list为空 → 总页数为 0 → 分页控件不显示；
正确做法：数据加载完成后，基于真实数据计算总页数，再初始化分页。

3. URL 参数处理（状态保留核心）

getParameter函数：解析 URL 中的pno参数，实现 "刷新页面保留当前页"；
getCurrentPageNo函数：对参数做合法性校验，避免因pno=0/pno=abc等非法参数导致渲染报错，是代码稳定性的关键。

4. IE7 兼容专项优化

兼容点	优化方案
语法兼容	放弃 ES6 + 语法（`let`→`var`、箭头函数→普通函数），IE7 不支持 ES6 特性
CSS 兼容	表格添加固定宽度、使用`border-collapse`替代`flex`布局、避免 CSS3 属性
交互兼容	分页模式选择`mode: 'click'`，而非`link`（IE7 下 link 跳转易出问题）
数据容错	渲染时添加 `item = list [i]	{}`，防止数据缺失导致`item.id` 报错

5. 边界场景处理（用户体验核心）

无数据：显示 "暂无数据" 提示，隐藏分页控件；
最后一页数据不足：endNum = totalDataCount，避免循环超出数组长度；
请求失败：显示友好提示，而非空白表格；
请求中：显示 "加载中"，提升用户感知。

四、生产级扩展与优化（落地必备）

1. 对接后端分页接口

演示中使用前端分页（拉取全部数据后拆分），生产环境建议改为后端分页：

javascript

运行

复制代码

// AJAX请求替换为带分页参数的接口
$.ajax({
	url: '/api/user/list', 
	method: 'GET',
	data: {
		pageNum: getCurrentPageNo(),
		pageSize: pageSize
	},
	success: function (res) {
		list = res.data.list; // 当前页数据
		totalDataCount = res.data.total; // 后端返回的总条数
		initPager();
	}
});

2. 页码缓存优化

结合localStorage缓存最后访问的页码，再次进入页面时自动定位：

javascript

运行

复制代码

function getCurrentPageNo() {
	// 优先取URL参数，无则取缓存，最后默认1
	var pageNo = getParameter('pno') || localStorage.getItem('lastPageNo');
	return pageNo && !isNaN(pageNo) && pageNo > 0 ? parseInt(pageNo) : 1;
}

// 页码点击时缓存
click : function(n){
	this.selectPage(n);
	renderTable(n);
	localStorage.setItem('lastPageNo', n); // 缓存页码
	return false;
}

3. 样式自定义

修改kkpager_orange.css中的颜色、间距、字体等，适配项目 UI 风格：

css

复制代码

/* 示例：修改分页选中页样式 */
.kkpager .curr {
	background-color: #165DFF; /* 项目主色 */
	color: #fff;
	border-color: #165DFF;
}

4. 性能优化

减少 DOM 操作：渲染表格时拼接字符串后一次性html()，而非逐行append()；
防抖处理：若添加 "页码输入跳转" 功能，需做防抖，避免频繁请求。

五、常见问题排查（排障手册）

1. 分页控件不显示

排查点 1：totalPage是否为 0（数据未加载成功）；
排查点 2：#kkpager容器是否存在 / 被隐藏；
排查点 3：控制台是否有 JS 报错（如文件路径错误、语法错误）；
排查点 4：IE7 下是否引入了正确版本的 jQuery。

2. 点击页码无反应

排查点 1：是否配置mode: 'click'（默认link会跳转）；
排查点 2：click回调是否返回false（阻止默认跳转）；
排查点 3：renderTable(n)中的n是否为合法数字。

3. IE7 下表格样式错乱

排查点 1：是否给表格 / 单元格添加固定宽度；
排查点 2：是否使用了border-collapse: collapse；
排查点 3：是否使用了 IE7 不支持的 CSS 属性（如box-shadow）。

4. 刷新页面页码丢失

排查点 1：URL 中是否有pno参数；
排查点 2：getParameter函数是否正确解析参数；
排查点 3：getCurrentPageNo是否做了容错处理。

总结

基于 kkpager 实现 IE7 + 兼容的分页功能，核心是把握引入顺序、初始化时机、参数容错三大关键点，缺一不可；
低版本 IE 兼容需放弃 ES6 + 语法、使用 jQuery 1.10.2、避免现代 CSS 属性，同时做好边界场景处理；
生产环境需对接后端分页接口，添加加载状态、缓存、样式自定义等优化，兼顾功能与体验。