自定义JavaScript分页组件实现与HTML/CSS样式

本文档分享了一个作者自定义的简单JavaScript分页组件，该组件的核心逻辑和样式设计都包含在JavaScript代码中，而HTML页面仅需引入这个分页组件。分页组件的主要功能通过JavaScript实现，具体步骤如下： 1. **HTML结构**: - 在HTML中，创建一个`<ul>`元素，类名为`pagination`，并赋予一个唯一的id`pageDIV`。这个`<ul>`将作为容器用来显示生成的分页导航。类名`pagination`定义了分页的基本样式，如间距、块级布局和边框圆角。 2. **CSS样式**: - `.pagination`类设置了一些基本样式，包括上、下外边距、内联块级布局、无左内边距以及边框半径。 - 对`.pagination > li`的样式规定了列表项的展示方式，使其水平排列。 - 对`.pagination > li > a`（链接）设置了外观，包括内填充、外边距、颜色、文本装饰、背景色、边框和鼠标悬停效果。同时，`.pagination > li > a.navcur`定义了当前选中的页码的样式，背景色为浅灰色，文字颜色为白色。 3. **JavaScript实现**: - 定义了一个名为`PageList`的函数，接收五个参数：`pageContentID`表示存放分页导航的DOM元素，`curPage`是当前页码，`totalCount`是总数据量，`pageRows`是每页显示的数量，以及`callback`是一个回调函数，用于处理实际的数据加载。 - `PageList`函数首先获取到指定的`pageContentID`元素，然后初始化`curPage`值。接下来，它可以根据传入的参数动态计算总页数，生成分页链接，并将它们添加到`pageContentID`的`<ul>`中。当用户点击分页链接时，可以通过调用回调函数`callback`来更新当前页码并显示对应的数据。 通过这个简单的分页组件，开发者可以快速地在项目中集成分页功能，无需依赖外部库，适合于对性能和控制性有较高要求的应用场景。不过，如果项目规模较大或需要更复杂的交互和动态功能，可能需要考虑使用成熟的前端分页插件或者结合服务器端进行优化。