bootstrap+JavaScript 自定义分页方法

最新推荐文章于 2023-10-21 17:50:18 发布
最新推荐文章于 2023-10-21 17:50:18 发布
阅读量295 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44366972/article/details/105469614
版权

bootstrap 分页

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 默认的分页</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<ul class="pagination" id="ddd">
	<li><a href="#">&laquo;</a></li>
	<li><a href="#">1</a></li>
	<li><a href="#">2</a></li>
	<li><a href="#">3</a></li>
	<li><a href="#">4</a></li>
	<li><a href="#">5</a></li>
	<li><a href="#">&raquo;</a></li>
</ul>

</body>
<script>
    $(document).ready(function(){
        setaction(4,8,1);
    });
    //size>1
    function setaction(totalPageSize,size,nowPage){
        var text="";
        var point=nowPage;
        var initPage=0;
        var finalPage=0;
        if(parseInt(size)==1){
           if(parseInt(totalPageSize)<=0){//不显示
              
            }else{
                text="<li><a href='javascript:setleftrightaction("+totalPageSize+","+size+","+point+","+1+");'>&laquo;</a></li>"+
                    "<li><a href='javascript:setaction("+totalPageSize+","+size+","+point+");' style='color:red;'>"+point+"</a></li>"+
                    "<li><a href='javascript:setleftrightaction("+totalPageSize+","+size+","+point+","+2+");'>&raquo;</a></li>";
                }
        }else if(parseInt(size)>1){
            var tp=parseInt(parseInt(size)/2);
            if(tp==0){//偶数
                initPage=parseInt(nowPage)-tp;
                finalPage=parseInt(nowPage)+tp;
            }else{//奇数
               initPage=((nowPage)+1)-tp;
               finalPage=nowPage+tp;
            }
            if(parseInt(totalPageSize)<=0){//没有记录

            }else if(parseInt(totalPageSize)<=parseInt(size)){
                text="<li><a href='javascript:setleftrightaction("+totalPageSize+","+size+","+point+","+1+");'>&laquo;</a></li>";
                for(var i=1;i<=parseInt(totalPageSize);i++){
                    if(i==point){
                       text+="<li><a href='javascript:setaction("+totalPageSize+","+size+","+i+");' style='color:red;'>"+i+"</a></li>";
                    }else text+="<li><a href='javascript:setaction("+totalPageSize+","+size+","+i+");'>"+i+"</a></li>";
                }
                text+="<li><a href='javascript:setleftrightaction("+totalPageSize+","+size+","+point+","+2+");'>&raquo;</a></li>";
            }else{//totalPageSize > size
                text="<li><a href='javascript:setleftrightaction("+totalPageSize+","+size+","+point+","+1+");'>&laquo;</a></li>";           
                if(parseInt(finalPage)>parseInt(totalPageSize)){//不变
                    for(var j=(parseInt(totalPageSize)-parseInt(size))+1;j<=parseInt(totalPageSize);j++){
                        if(j==point){
                           text+="<li><a href='javascript:setaction("+totalPageSize+","+size+","+j+");' style='color:red;'>"+j+"</a></li>";
                        }else text+="<li><a href='javascript:setaction("+totalPageSize+","+size+","+j+");'>"+j+"</a></li>";
                    }  
                }else if(parseInt(finalPage)>parseInt(size)){
                    for(var h=parseInt(initPage);h<=parseInt(finalPage);h++){
                        if(h==point){
                           text+="<li><a href='javascript:setaction("+totalPageSize+","+size+","+h+");' style='color:red;'>"+h+"</a></li>";
                        }else text+="<li><a href='javascript:setaction("+totalPageSize+","+size+","+h+");'>"+h+"</a></li>";
                    }
                }else{//不变
                    for(var k=1;k<=parseInt(size);k++){
                        if(k==point){
                           text+="<li><a href='javascript:setaction("+totalPageSize+","+size+","+k+");' style='color:red;'>"+k+"</a></li>";
                        }else text+="<li><a href='javascript:setaction("+totalPageSize+","+size+","+k+");'>"+k+"</a></li>";
                    }
                }
                text+="<li><a href='javascript:setleftrightaction("+totalPageSize+","+size+","+point+","+2+");'>&raquo;</a></li>";
            }
        }
        $("#ddd").html(text);
        //检索数据方法
        doQuery();
    }
    //flag 1左   2右
    function setleftrightaction(totalPageSize,size,nowPage,flag){
        var t=0;
        if(flag==1){
            t=parseInt(nowPage)-1;
            if(t>=1)setaction(totalPageSize,size,t);
        }else if(flag==2){
            t=parseInt(nowPage)+1;  
            if(t<=parseInt(totalPageSize))setaction(totalPageSize,size,t);
        }
    }
    function doQuery(){
    //检索数据
	}
</script>
</html>

效果图

1.setaction(4,8,1);
在这里插入图片描述

  1. setaction(20,8,1);

在这里插入图片描述

拟枫
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
基于bootstrap+jQuery的前端分页
07-01
这是一款bootstrap+jQuery的前端分页展示，通过获取后台的数据，来展示不同的分页效果，易理解，可改造
BootStrap 和JQuery 实现分页效果
vengu733的博客
07-22 1470
BootStrap 和JQuery 实现分页效果 基于Ajax 实现前后端分离 ，分别在两个服务器进行数据交互 ，前端框架BootStrap ,简端脚本框架JQuery 。 后端用servlet简单获取数据库数据 ，利用filter过滤器实现跨域请求。主要功能有 分页、多选框选择 新增 批量删除 更新 单个删除 分页： 多选：当前页面选择编号 为全选，下面选框都会打钩，取消全选，下面选框全不选，下面选框选满满多选会自动勾选，反之不选。 更新 ：点击更新显示用户基本信息，编号无法改变。 后端sevl
bootstrap实现分页（实例）
热门推荐
红岸基地
03-20 10万+
写前端都会面临的一个问题就是分页，如果是纯js分页也是可以的，只是可能代码量比较大，所以今天写一个关于用bootstrap框架分页的例子，希望以后可以帮助到一些对这方面比较头疼的码农。首先需要明确的一点是，哪些数据是需要分页的，单从数据显示上其实是没有必要分页的，因为页面是可以显示的出来的，但是作为一个相对比较合格的前端，你首先要考虑的不仅仅是这个功能是不是可以实现，而是要考虑用户体验是不是好的，...
bootstrap table分页（前后端两种方式实现）
西卡卡的博客
03-16 2278
bootstrap table分页的两种方式： 前端分页：一次性从数据库查询所有的数据，在前端进行分页（数据量小的时候或者逻辑处理不复杂的话可以使用前端分页） 服务器分页：每次只查询当前页面加载所需要的那几条数据 bootstrap 下载地址：bootstrap下载 bootstrap-table 下载地址：bootstrap-table下载 jquery下载地址：jquery下载 页面引入需要的js、css <!-- 引入的css文件 --> <link href="b
bootstrap 分页功能 bootstrap-paginator.js
baodaotui4761的博客
06-21 485
1.首先要引入jquery，bootstap.js, bootstrap-paginator.js 三个js bootstrap-paginator.js 下载地址 链接：https://pan.baidu.com/s/1ObU1OX-pkXgJjQlkHJLTfQ 提取码：wcqb 　 2.html <div class="row"&gt...
angularjs+bootstrap实现自定义分页的实例代码
10-19
在本文中，我们将深入探讨如何使用AngularJS和Bootstrap来实现自定义分页功能。AngularJS是一个强大的JavaScript框架，用于构建动态Web应用，而Bootstrap则是一个流行的前端开发框架，提供了丰富的UI组件，包括分页...
PHP+Ajax+bootstrap+dataTables无刷新分页表格插件
11-11
在具体实现过程中，前端页面会包含一个用Bootstrap风格的表格结构，以及dataTables初始化的JavaScript代码。当页面加载或Ajax请求返回数据时，dataTables会自动填充表格内容并根据配置实现分页功能。同时，...
JavaScript自定义分页样式.docx
01-18
JavaScript自定义分页样式是网页开发中常见的需求，特别是在数据量较大时，为了提供良好的用户体验，需要将数据分页展示。本示例中，我们通过JavaScript实现了一个简单的自定义分页功能，它允许用户根据需求调整每页...
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
09-01
在本项目中，我们利用SpringMVC作为后端框架，Bootstrap作为前端UI库，以及DataTables插件来实现一个功能完善的表格展示系统，包括服务端分页和模糊查询功能。以下将详细介绍这些技术的整合与应用。 1. SpringMVC：...
bootstrap-table客户端分页实例
08-06
5. **分页配置**：Bootstrap Table允许自定义分页参数，如每页显示的记录数、页码显示方式、是否有快速跳转等。开发者可以通过设置这些参数来调整分页功能以满足不同需求。 6. **API与事件**：Bootstrap Table提供...
使用BootStrap原生分页按钮 动态加载JS代码
01-23
如果你是自己想写分页，或者用bootStrap的分页按钮。这段代码应该有帮助的。
利用Bootstrap的分页组件实现分页效果
最新发布
昊虹AI笔记
10-21 3636
利用Bootstrap的分页组件实现分页效果
html，JS实现分页，仅使用bootstrap前端和django后端
weixin_46597360的博客
04-30 1312
前端仅使用JS实现分页，后端框架django，前端框架bootstrap
BootStrap笔记-分页
IT1995的博客
01-17 976
程序运行截图： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CN_TEST1</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!--
关于Bootstrap中的分页实现
伱糸淂忄
05-19 1486
Bootstrap 框架实现分页功能有两种方式：静态分页 和 动态分页； 所谓静态分页，是通过Bootstrap实例来实现的、框架默认的分页实现方式； 所谓动态分页，是通过基于Bootstrap通过jquery_pagination插件来实现分页的； 静态分页： <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 默认的分页</title> <link href="h.
js自定义分页
dengsilinming的专栏
09-29 1058
在做项目时不时地会需要自己编写分页，现在我把自己用到的分页粘贴出来供大家参考，欢迎大家给出意见或者建议。 在js文件中 var intPageSize; $(function() { if($("#pageIndex")){ intPageSize = $("#pageSize").val(); var indexPage = $("#pageIndex").val(); var
Bootstrap分页插件--Bootstrap Paginator
白强
10-18 432
Bootstrap分页插件--Bootstrap Paginator 发表于 2013-05-26 17:05 ,已有3391次阅读 ，共0个评论 Bootstrap Paginator是一款基于Bootstrap的js分页插件，功能很丰富，个人觉得这款插件已经无可挑剔了。它提供了一系列的参数用来支持用户的定制，提供了公共的方法可随时获得插件状态的改变，以及事件来监听用户的动作。目...
【js组件】自定义分页
KatyLight的博客
02-08 477
js自定义翻页，页数变化时候触发回调方法
JS 自己写的分页，比较简单
scanner_new的博客
10-19 4405
前段的分页现在有很多的插件，自己也一直在用，懒得自己写代码实现，这次不让用插件，只能自己实现了，记录一下 效果： HTML代码： &lt;!-- --------------分页-------------- --&gt; &lt;div class="go_page" id="pagination" style='display: none;'&gt; &lt;ul class="pag...
使用JavaScript实现分页多种方法
06-06
使用JavaScript实现分页的方法有很多种，以下是其中的几种： 1.基于DOM的分页：将要分页的内容放在一个长的元素中，通过JavaScript计算每一页的高度，然后将内容分割成多个元素，每个元素表示一页。可以使用“display: none;”样式隐藏不需要显示的页码，使用“display: block;”样式显示当前页码。 2.基于Ajax的分页：使用Ajax技术向服务器请求数据，并根据返回的数据生成分页。可以使用jQuery等JavaScript库来简化Ajax操作。用户可以通过点击“下一页”按钮来获取不同的数据。 3.基于模板引擎的分页：使用模板引擎（如Handlebars或Mustache）来生成HTML代码。可以将要分页的数据存储在一个JavaScript对象中，然后将对象传递给模板引擎，生成分页。用户可以通过点击“下一页”按钮来获取不同的数据。 4.基于插件的分页：使用已经存在的分页插件（如jQuery Pagination或Bootstrap Pagination）来实现分页功能。这些插件提供了丰富的选项和样式，可以根据需求自定义分页功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值