Jquery分页条

最新推荐文章于 2021-06-03 02:55:31 发布

置顶「已注销」

最新推荐文章于 2021-06-03 02:55:31 发布

阅读量245

点赞数 1

分类专栏： Jquery 文章标签： Jquery分页条的使用

本文链接：https://blog.csdn.net/weixin_45754664/article/details/102589423

版权

Jquery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Jquery分页条

jQuery分页条下载地址：https://www.jb51.net/jiaoben/589208.html

1、在前台HTML页引入js以及css文件

<script src="~/js/jquery-3.3.1.js"></script>
<script src="~/js/jqPaginator.js"></script>
<link href="~/css/page.css" rel="stylesheet" />

2、在body中创建一个ul标签

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <div>
        <ul id="ul" class="pagination"></ul>
    </div>
</body>
</html>

3、编写javascript代码

<script>
    $(function () {
        $.jqPaginator('#ul', {
            totalPages: 100,//总页数
            pageSize:5,//每页条数
            currentPage: 1,//当前页
            first: '<li class="first"><a href="javascript:;">首页</a></li>',
            prev: '<li class="prev"><a href="javascript:;">上一页</a></li>',
            next: '<li class="next"><a href="javascript:;">下一页</a></li>',
            last: '<li class="last"><a href="javascript:;">尾页</a></li>',
            page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
            onPageChange: function (num, type) {
                
            }
        });
    }）
<script>

在这里插入图片描述
你学会了吗？

「已注销」

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery分页条

Jquery分页条jQuery分页条下载地址：https://www.jb51.net/jiaoben/589208.html1、在前台HTML页引入js以及css文件<script src="~/js/jquery-3.3.1.js"></script><script src="~/js/jqPaginator.js"></script>...
复制链接

扫一扫