Foundation 分页

简介

Foundation分页是一款基于HTML、CSS和JavaScript开发的JavaScript分页插件，可以帮助用户快速而方便地实现数据分页功能。该插件支持多种分页风格和配置选项，易于定制和使用。

特性

支持四种分页风格：传统、经典、简洁和微型。
支持多种页面元素：页码、上一页、下一页、首页、尾页、总页数、总记录数等。
支持自定义CSS样式和语言选项。
支持自定义每页记录数和总记录数。
支持自定义跨越页码数。

快速入门

引入Foundation分页的CSS和JavaScript文件：

<link rel="stylesheet" href="css/foundation.css">
<script src="js/foundation.min.js"></script>

创建一个空的<div>元素用作分页容器：

<div id="page"></div>

初始化Foundation分页：

$('#page').foundation({
    total: 100,                   // 总记录数
    perPage: 10,                  // 每页记录数
    currentPage: 1,              // 当前页码
    prevText: '上一页',          // 上一页文本
    nextText: '下一页',          // 下一页文本
    firstText: '首页',          // 首页文本
    lastText: '尾页',            // 尾页文本
    ellipseText: '...',          // 省略号文本
    prevShowAlways: true,        // 总是显示上一页
    nextShowAlways: true,        // 总是显示下一页
    firstShowAlways: true,       // 总是显示首页
    lastShowAlways: true,        // 总是显示尾页
    hoverLinger: 300,            // 鼠标悬停时间
    onPageClick: function(page) { // 翻页回调函数
        console.log('Page clicked: ' + page);
    }
});

配置选项

选项	类型	默认值	描述
total	Number	0	总记录数
perPage	Number	10	每页记录数
currentPage	Number	1	当前页码
prevText	String	‘上一页’	上一页文本
nextText	String	‘下一页’	下一页文本
firstText	String	‘首页’	首页文本
lastText	String	‘尾页’	尾页文本
ellipseText	String	‘…’	省略号文本
prevShowAlways	Boolean	true	是否总是显示上一页
nextShowAlways	Boolean	true	是否总是显示下一页
firstShowAlways	Boolean	true	是否总是显示首页
lastShowAlways	Boolean	true	是否总是显示尾页
hoverLinger	Number	300	鼠标悬停时间
onPageClick	Function	-	翻页回调函数

方法

方法	描述
prevPage()	跳转到上一页
nextPage()	跳转到下一页
goPage(page)	跳转到指定页码
refresh(options)	刷新分页，可传入新的配置选项

事件

事件	描述
page	翻页事件

示例

以下是一个完整的基于Foundation分页的数据分页示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Foundation 分页示例</title>
    <link rel="stylesheet" href="css/foundation.css">
</head>
<body>
    <div class="row">
        <div class="large-12 columns">
            <h1>Foundation 分页示例</h1>
            <table>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>张三</td>
                        <td>22</td>
                        <td>男</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>李四</td>
                        <td>28</td>
                        <td>女</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>王五</td>
                        <td>35</td>
                        <td>男</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>赵六</td>
                        <td>42</td>
                        <td>女</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>钱七</td>
                        <td>49</td>
                        <td>男</td>
                    </tr>
                    <!-- more data -->
                </tbody>
            </table>
            <div id="page"></div>
        </div>
    </div>
    <script src="js/foundation.min.js"></script>
    <script>
    $(document).foundation();

    $('#page').foundation({
        total: 50,
        perPage: 5,
        currentPage: 1,
        prevText: '上一页',
        nextText: '下一页',
        firstText: '首页',
        lastText: '尾页',
        onPageClick: function(page) {
            console.log('Page clicked: ' + page);
        }
    });

    $('#page').on('page', function(event, data) {
        console.log(data.page);
    });
    </script>
</body>
</html>

Foundation 侧边栏 Foundation 列表