jQuery写的一个分页展示的demo（结合bootstrap）

最新推荐文章于 2021-01-05 10:18:29 发布
最新推荐文章于 2021-01-05 10:18:29 发布
阅读量528 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38892819/article/details/72783230
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入jq-->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!--引入bootstrap-->
    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
    <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        .main{
            width: 500px;
            margin:0 auto;
        }
        .main>ul>li{
            width: 500px;
            height: 80px;
            border-bottom: 1px solid #666;
            text-align: center;
            line-height: 80px;
        }
        .disabled{
            cursor: not-allowed;
        }

    </style>
</head>
<body>

<div class="main">
    <ul>
        <li>
            <p>这是1个</p>
        </li>
        <li>
            <p>这是2个</p>
        </li>
        <li>
            <p>这是3个</p>
        </li>
        <li>
            <p>这是4个</p>
        </li>
        <li>
            <p>这是5个</p>
        </li>
        <li>
            <p>这是6个</p>
        </li>
        <li>
            <p>这是7个</p>
        </li>
        <li>
            <p>这是8个</p>
        </li>
        <li>
            <p>这是9个</p>
        </li>
        <li>
            <p>这是10个</p>
        </li>
        <li>
            <p>这是11个</p>
        </li>
        <li>
            <p>这是12个</p>
        </li>
        <li>
            <p>这是13个</p>
        </li>
        <li>
            <p>这是14个</p>
        </li>
        <li>
            <p>这是15个</p>
        </li>
        <li>
            <p>这是16个</p>
        </li>
        <li>
            <p>这是17个</p>
        </li>
        <li>
            <p>这是18个</p>
        </li>
        <li>
            <p>这是19个</p>
        </li>
        <li>
            <p>这是20个</p>
        </li>
    </ul>
    <!--bootstrap 生成的分页-->
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li id="last">
                <a href="javascript:void(0);" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <!--伪代码-->
            <!--<li id="firstPage"><a href="#" >1</a></li>-->
            <!--&lt;!&ndash;<li><a href="#">2</a></li>&ndash;&gt;-->
            <!--<li><a href="#">3</a></li>-->
            <!--<li><a href="#">4</a></li>-->
            <!--<li><a href="#">5</a></li>-->
            <li id="next">
                <a href="javascript:void(0);" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</div>
</body>
<script>
    /***
     * 渲染页面
     * 动态创建底部分页的li
     * 给li绑定点击事件 点击到哪一页就展示哪一页的内容
     * 设置上翻一页 下翻一页
     */
    var ul=$(".main>ul");
    var lis=ul.children();
    var allColum=lis.length;//总数
    var onlyPage=8;//每一个的个数
    var pages=Math.ceil(allColum/onlyPage)//总页数
    var currentPage=1//当前页面

    //动态创建底部分页的li
    for(var i=pages-1;i>=0;i--){
      var li=  $("<li class='num'><a href='javascript:void(0)'>"+(i+1)+"</a></li>")
        $("#last").after(li)
    }
//   渲染页面

    render(lis,onlyPage,pages,currentPage)
function render(lis,onlyPage,pages,currentPage) {

        for(var j=1;j<=pages;j++){
            if(currentPage==j) {
                for (var i = 0; i < lis.length; i++) {
                    lis[i].style.display="block";
                  if(i<(currentPage-1)*onlyPage || i>currentPage*onlyPage-1){
                      lis[i].style.display="none";
                  }
                }
            }
        }
}
//给所有的a绑定点击事件
    var as=$(".num")
    for (var i = 0; i < as.length; i++) {
        as[i].index=i;
        as[i].onclick=function () {
            currentPage=this.index+1
          render(lis,onlyPage,pages,currentPage)
       }
    }
// 设置上翻一页 下翻一页
//上翻一页 最前一页禁用
    $("#last").click(function () {
        currentPage--;

        if(currentPage<=1){
            $(this).addClass("disabled")
        }
        render(lis,onlyPage,pages,currentPage)
    })
//    下翻一页 最后一页禁用
    $("#next").click(function () {
        currentPage++;
        if(currentPage>=pages){
            $(this).addClass("disabled")
        }
        render(lis,onlyPage,pages,currentPage)
    })
</script>
</html>

web加加
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bootstrap-table 分页Demo
03-03
bootstrap-table后端分页的参数设置Demo。 bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用。Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、Card view视图、主从表显示、合并列、国际化处理等处理功能，而且该插件同时也提供了一些不错的扩展功能，如移动行、移动列位置等一些特殊的功能，插件可以用基于HTML5的data-*属性标识设置，也可以使用Javascript方式进行设置，非常方便。
jQuery分页Demo
02-26
jquery.pagination.js创建一个漂亮的分页条
Jquery分页Demo
weixin_30808253的博客
02-03 110
Jquery分页Demo Demo下载 转载于:https://www.cnblogs.com/smallsong/archive/2012/02/03/2337022.html
jquery 分页demo
07-11
jquery pagination plugin
demo jquery分页
07-24
demo jquery分页
bootstrap和jQuery做带分页跳转的表格实例
03-31
本实例主要展示了如何使用 Bootstrap 和 jQuery 创建一个带有分页跳转功能的表格，这在数据展示和管理中非常常见。我们将讨论以下几个关键知识点： 1. **Bootstrap**：Bootstrap 是一个流行的开源 CSS 框架，它提供...
jquery pagination插件动态分页实例(Bootstrap分页)
10-20
比如利用现代JavaScript框架（如Vue.js、React.js等）结合各种状态管理库（如Vuex、Redux等）来构建一个响应式的分页组件，这种方式不仅可以使代码结构更加清晰，而且还可以很方便地与其他前端组件进行交互。...
jQuery动态生成Bootstrap表格
10-21
总结来说，这个示例展示了如何使用jQuery和Bootstrap创建一个可扩展、交互式的表格，其中包含了基本的表格结构、样式以及动态生成内容的逻辑。你可以根据实际需求，如数据源的获取、事件处理等，对这个基础进行扩展...
bootstrap table分页例子.zip
09-20
这个"bootstrap table分页例子.zip"文件包含了一个展示如何在Bootstrap Table中实现分页功能的示例。Bootstrap Table提供了两种主要的分页方式：简单分页和智能分页。 **简单分页**： 1. **配置项**: 在初始化...
demo.zip_DEMO_bootstrap
09-23
"demo.zip_DEMO_bootstrap"这个压缩包显然是一个示例项目，展示了如何在Bootstrap表格中集成Bootstrap Multiselect插件来实现多选和刷新功能。 Bootstrap Multiselect是一款基于Bootstrap的jQuery插件，它扩展了...
jQuery分页demo实现
01-18
jQuery分页demo实现 完美实现自己的分页 你值得拥有
JqueryDataGridDemo分页
10-11
JqueryDataGridDemo分页演示 JSON
bootstrap-angular前台分页插件demo
08-30
angular前台分页，后台无需任何分页实现。简单，通用。完整的demo，可以直接嵌入项目中。
java springMVC bootstrap bootstrap-table 分页等实例
08-22
java springMVC架框下 JS( bootstrap bootstrap-table bootstrap-select bootstrap-timepicker) 的实例演练，分页实现
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
12-01
JQuery+Bootstrap 自定义全屏Loading插件 /** * 自定义Loading插件 * @param {Object} config * { * content[加载显示文本], * time[自动关闭等待时间(ms)] * } * @param {String} config * 加载显示文本 * @refer 依赖 JQuery-1.9.1及以上、Bootstrap-3.3.7及以上 * @return {KZ_Loading} 对象实例 */ function KZ_Loading(config) { if (this instanceof
jquery插件分页Demo
WiFi_Uncle的专栏
03-17 1186
jquery插件分页Demo
jquery mobile分页创建demo
一个菜鸟的学习之路
02-13 2966
DOCTYPE html> html lang="en"> head>     meta charset="utf-8">     meta name="viewport" content="width=device-width, initial-scale=1">     title>jQM Pagination Demo - 1title>     link rel="
bootstrap分页插件demo
niesiyuan000的博客
09-06 1013
引入JS  链接：https://pan.baidu.com/s/1NQtcBoJ9iXIHeXiEFjDAWg 密码：454a HTML :命名个容器用来装分页 &lt;ul id="pagination-demo" class="pagination m--margin-10"&gt;&lt;/ul&gt; JS： // 初始化分页 var $pagination = $('#pa...
使用Bootstrap-table实现ssm框架的分页Demo
yafengliang
01-05 4599
Bootstrap是一款很受欢迎的前端框架，在bootstrap的官网中提供了丰富的插件（http://www.bootcss.com/点击打开链接），根据bootstrap不同插件的API我们可以很方便的学习，今天我们来说一下Bootstrap-table（跟Bootstrap一样，对浏览器的要求稍微高点，IE8+、谷歌、Firefox。。。等浏览器）。 Bootstrap-table
用jQuery ajax 写一个分页器
最新发布
07-14
当然可以！以下是一个使用jQuery的Ajax分页器示例： HTML结构： ```html <div id="pagination"></div> <div id="results"></div> ``` JavaScript代码： ```javascript $(document).ready(function() { var currentPage = 1; // 初始化分页器 function initPagination(totalPages) { $('#pagination').twbsPagination({ totalPages: totalPages, visiblePages: 5, onPageClick: function(event, page) { currentPage = page; loadResults(); } }); } // 加载当前页的结果 function loadResults() { $.ajax({ url: '/your-api-endpoint', type: 'GET', data: { page: currentPage }, dataType: 'json', success: function(data) { // 清空结果容器 $('#results').empty(); // 迭代结果并将其添加到结果容器中 $.each(data.results, function(index, result) { $('#results').append('<div>' + result.title + '</div>'); }); }, error: function() { // 处理错误情况 } }); } // 获取总页数并初始化分页器 $.ajax({ url: '/your-api-endpoint', type: 'GET', dataType: 'json', success: function(data) { var totalPages = data.totalPages; // 初始化分页器 initPagination(totalPages); // 加载第一页的结果 loadResults(); }, error: function() { // 处理错误情况 } }); }); ``` 请注意，上述代码中的 `/your-api-endpoint` 是一个代表你的分页数据源的示例API端点。你需要将其替换为实际的API端点，并相应地处理请求和返回数据。 此示例使用了Bootstrap的分页插件twbsPagination，你可以根据需要自行选择其他分页插件或自定义分页样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值