jquery插件pagination使用

最新推荐文章于 2021-05-28 16:30:29 发布

weixin_43509051

最新推荐文章于 2021-05-28 16:30:29 发布

阅读量134

点赞数

分类专栏：前端基础知识

本文链接：https://blog.csdn.net/weixin_43509051/article/details/94452846

版权

前端基础知识专栏收录该内容

17 篇文章 2 订阅

订阅专栏

在项目中需要有一个翻页的插件，来操作一些<li>标签分页，所以经过查找比对使用了这个基于jquery的插件。github:https://github.com/superRaytin/paginationjs

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./pagination.css">
    <script src="../jquery-3.4.1.min.js"></script>
    <script src="./pagination.js"></script>
</head>

<body>
    <div id="demo">
        <div class="data-container">
            <!-- 存放生成的ul li -->
        </div>
        <div class="page-container">
        </div>
    </div>
    <script>
        var data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
        $('.page-container').pagination({
            dataSource: data,
            className: 'paginationjs-theme-blue paginationjs-small',
            callback: function(data, pagination){
                var html = simpleTemplating(data);
                $('.data-container').html(html)
            }
        })

        function simpleTemplating(data) {
            var html = '<ul>';
            $.each(data, function (index, item) {
                html += '<li>' + item + '</li>';
            });
            html += '</ul>';
            return html;
        }
    </script>
</body>

</html>

实现效果如图：
在这里插入图片描述

weixin_43509051

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery插件pagination使用

在项目中需要有一个翻页的插件，来操作一些<li>标签分页，所以经过查找比对使用了这个基于jquery的插件。github:https://github.com/superRaytin/paginationjs<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&g...
复制链接

扫一扫

专栏目录