【js 分页】js 分页 方法一 【实用】

最新推荐文章于 2024-02-02 10:01:01 发布
最新推荐文章于 2024-02-02 10:01:01 发布
阅读量7.8k 收藏 52
点赞数 9
分类专栏： 前端 文章标签： js 分页 html 分页 ajax js 分页
本文为博主原创文章，未经博主允许请勿转载，切勿用于商业用途，若有引用请加原文链接。
本文链接：https://blog.csdn.net/xysxlgq/article/details/126428284
版权

  

完整code在后面。

一、ajax 获取数据  table中显示。（实际：传入size page 到api获取分页数据）

二、加载分页js css 

三、生成分页功能。

四、主要code：

1、下拉：

//选择条数：<!--下拉选择条数：默认：15 50 100 200-->
        document.getElementById("page_s").innerHTML = "<select id='select_t' class='page_select' onchange='pageselect()'>" +
            "<option value='15'>15</option><option value='50'>50</option><option value='100'>100</option>" +
            "<option value='200'>200</option></select>";
   //选择：
    function pageselect() {
        var select_ct = document.getElementById("select_t");
        var vinfo = select_ct.options[select_ct.selectedIndex].value;
        setpage(1, vinfo);
    }

2、生成数字：

 if (d > 6) {
            te = d;
            //当前页是否超显示数：
            for (var i = te; i <= (d + tt); i++) {
                //在总页数范围内。若超出，则不显示。
                if (i < total) {
                    p_num += "<li><a onclick=setpage(" + (i) + "," + page_size + ")>" + i + "</a></li>";
                }
            }
        } else {
            for (var i = 1; i <= tt; i++) {
                p_num += "<li><a onclick=setpage(" + (i) + "," + page_size + ")>" + i + "</a></li>";
            }
        }

3、跳转：

    function return_bt() {
        var select_ct = document.getElementById("select_t");
        var vinfo = select_ct.options[select_ct.selectedIndex].value;
        var inp = document.getElementById("inputs").value;
        if (inp == "" || inp == null) {
            alert("请输入正整数。");
            inp = 1;
        }
        setpage(inp, vinfo);
    }

完整：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>js page demo www.liuguiqing.com.cn</title>
    <style>
        table {
            border-collapse: collapse;
            text-align: center;
        }

        table tr td {
            width: 200px;
        }

        table td, table th {
            border: 1px solid #caf1c5;
            color: #666;
            height: 30px;
        }

        table thead th {
            background-color: #CCE8EB;
            width: 100px;
        }

        table tr:nth-child(odd) {
            background: #fff;
        }

        table tr:nth-child(even) {
            background: #f1f3fd;
        }

        .disno {
            display: none;
        }

        .btc {
            color: black;
            padding: 6px 10px;
            text-decoration: none;
            transition: background-color .3s;
            border: 1px solid #ddd;
            margin: 0 4px;
        }

        ul.pagination {
            display: inline-block;
            padding: 0;
            margin: 0;
        }

        ul.pagination li {
            display: inline;
        }

        ul.pagination li a {
            color: black;
            padding: 6px 10px;
            text-decoration: none;
            transition: background-color .3s;
            border: 1px solid #ddd;
            margin: 0 4px;
        }

        ul.pagination li a.active {
            background-color: #4CAF50;
            color: white;
            border: 1px solid #4CAF50;
        }

        ul.pagination li a:hover:not(.active), .btc:hover {
            background-color: #ddd;
        }

        .inputc {
            width: 61px;
            font-size: 18px;
        }

        .page_select {
            font-size: 17px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function () {
            initf();
            setpage(1, 15);
        }
    </script>
</head>
<body>

<script>
    //初始化标签：
    function initf() {
        //选择条数：<!--下拉选择条数：默认：15 50 100 200-->
        document.getElementById("page_s").innerHTML = "<select id='select_t' class='page_select' onchange='pageselect()'>" +
            "<option value='15'>15</option><option value='50'>50</option><option value='100'>100</option>" +
            "<option value='200'>200</option></select>";
        //跳转：
        var re_t = "";
        re_t += "到： <input class='inputc' id='inputs' type='text'/> 页 &emsp;";
        re_t += "<button  class='btc' onclick='return_bt()'>跳转</button>";
        document.getElementById("input_put").innerHTML = re_t;
    }

    //选择：
    function pageselect() {
        var select_ct = document.getElementById("select_t");
        var vinfo = select_ct.options[select_ct.selectedIndex].value;
        setpage(1, vinfo);
    }

    //跳转
    function return_bt() {
        var select_ct = document.getElementById("select_t");
        var vinfo = select_ct.options[select_ct.selectedIndex].value;
        var inp = document.getElementById("inputs").value;
        if (inp == "" || inp == null) {
            alert("请输入正整数。");
            inp = 1;
        }
        setpage(inp, vinfo);
    }

    function setpage(page, page_size) {

        //条数
        var table_row = document.getElementById("tableId");
        var info_num = table_row.rows.length;
        var total = 0;
        //单页条数
        var size = page_size;
        //总页数
        if (info_num / size > parseInt(info_num / size)) {
            total = parseInt(info_num / size) + 1;
        } else {
            total = parseInt(info_num / size);
        }
        //第N页
        var thispage = page;
        var first_row = (thispage - 1) * size + 1;
        var last_row = thispage * size;
        last_row = (last_row > info_num) ? info_num : last_row;
        //分页隐藏、显示：
        for (var i = 1; i < (info_num + 1); i++) {
            var row_bn = table_row.rows[i - 1];
            if (i >= first_row && i <= last_row) {
                row_bn.style.display = "block";
            } else {
                row_bn.style.display = "none";
            }
        }
        //条数
        document.getElementById("page_n").innerHTML = "第<strong>" + thispage + "</strong>页/共<strong>" + total + "</strong>页"
            + " &emsp;&emsp; 共<strong>" + info_num + "</strong>条 &emsp;";
        //首页 上一页：
        var p_num = "";
        if (thispage > 1) {
            p_num += "<button class='btc' onClick=setpage(" + (1) + "," + page_size + ")>首页</button>&emsp;&emsp;";
            p_num += "<button class='btc' onClick=setpage(" + (thispage - 1) + "," + page_size + ")>上一页</button>&emsp;&emsp;";
        } else {
            p_num += "<button class='btc'>首页</button>&emsp;&emsp;";
            p_num += "<button class='btc'>上一页</button>&emsp;&emsp;";
        }
        //生成数字显示：默认显示1 2 3 4 5 6
        var tt = 6;
        if (tt > total) {
            tt = total;
        }
        p_num += "<ul class='pagination'>";
        var te = 1;
        var d = thispage + 1;
        if (d > 6) {
            te = d;
            //当前页是否超显示数：
            for (var i = te; i <= (d + tt); i++) {
                //在总页数范围内。若超出，则不显示。
                if (i < total) {
                    p_num += "<li><a onclick=setpage(" + (i) + "," + page_size + ")>" + i + "</a></li>";
                }
            }
        } else {
            for (var i = 1; i <= tt; i++) {
                p_num += "<li><a onclick=setpage(" + (i) + "," + page_size + ")>" + i + "</a></li>";
            }
        }
        p_num += "</ul>&emsp;&emsp;";
        //尾页 下一页
        if (thispage < total) {
            p_num += "<button class='btc' onClick=setpage(" + (thispage + 1) + "," + page_size + ")>下一页</button>&emsp;&emsp;";
            p_num += "<button class='btc' onClick=setpage(" + (total) + "," + page_size + ")> 尾页 </button>";

        } else {
            p_num += "<button class='btc'>下一页</button>&emsp;&emsp;";
            p_num += "<button class='btc'> 尾页 </button>";
        }
        document.getElementById("page_t").innerHTML = p_num;
    }

</script>
<table>
    <tr>
        <td style="width: 200px">标题</td>
        <td style="width: 200px">项目名称</td>
        <td style="width: 200px">事件类型</td>
    </tr>
</table>
<table id="tableId">
    <tr>
        <td>信息1</td>
        <td>项目1</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息2</td>
        <td>项目2</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息3</td>
        <td>项目3</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息4</td>
        <td>项目4</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息5</td>
        <td>项目5</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息6</td>
        <td>项目6</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息7</td>
        <td>项目7</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息8</td>
        <td>项目8</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息9</td>
        <td>项目9</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息10</td>
        <td>项目10</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息11</td>
        <td>项目11</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息12</td>
        <td>项目12</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息13</td>
        <td>项目13</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息14</td>
        <td>项目14</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息15</td>
        <td>项目15</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息16</td>
        <td>项目16</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息17</td>
        <td>项目17</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息18</td>
        <td>项目18</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息19</td>
        <td>项目19</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息20</td>
        <td>项目20</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息21</td>
        <td>项目21</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息22</td>
        <td>项目22</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息23</td>
        <td>项目23</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息24</td>
        <td>项目24</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息25</td>
        <td>项目25</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息26</td>
        <td>项目26</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息27</td>
        <td>项目27</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息28</td>
        <td>项目28</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息29</td>
        <td>项目29</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息30</td>
        <td>项目30</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息31</td>
        <td>项目31</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息32</td>
        <td>项目32</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息33</td>
        <td>项目33</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息34</td>
        <td>项目34</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息35</td>
        <td>项目35</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息36</td>
        <td>项目36</td>
        <td>类型xx</td>
    </tr>
    <tr>
        <td>信息37</td>
        <td>项目37</td>
        <td>类型xx</td>
    </tr>
</table>
<div style="float: right">
    <!--条数说明： 第N页/共N页     -->
    <span id="page_n" name="page_n"></span>
    <!--下拉选择条数：默认：15 50 100 200-->
    <span>
        &emsp;<span>每页显示：</span>
        <span id="page_s" name="page_s"></span>条。&emsp;&emsp;
    </span>
    <!--上一步 1 2 3 4 5 6 下一步-->
    <span id="page_t" name="page_t"> </span>
    <!--跳转：-->
    &emsp;&emsp;
    <span>
        <span id="input_put"></span>&emsp;
        <span id="page_b" name="page_b"></span>
    </span>
</div>
</body>
</html>

刘贵庆
关注
  • 9
    点赞
  • 踩
  • 52
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基于js分页实现（简单）
01-10
使用javacript实现分页技术，简单明了。没有多以的步骤！
Asp.Net之JS生成分页条的方法
11-26
Default.aspx.cs中的代码 protected int pageIndex = 1; protected int pageSize = 10; protected int pageCount = 100; protected string name = string.Empty; protected void Page_Load(object sender, EventArgs e) { int.TryParse(Request.QueryString["pageIndex"],out pageIndex); name=Request.QueryString["name"]
js 分页功能实现
m0_72759446的博客
05-12 741
当表单数据过多时，查看起来比较不方便吗，这个时候就需要分页查看。
纯JS前端分页方法（JS分页）
最爱喝怡宝的博客
05-15 2167
如后台传回的数据条数非常多，达到几千条甚至上万条，但是后台又不方便分页传回数据，这个时候就只能前端先获取所有数据保存下来，然后前端本地进行分页并渲染显示。1、JS分页函数：开发过程中，分页功能一般是后台提供接口，前端只要传page（当前页码）和pageSize（每页最大显示条数）及对应的其他查询条件，就可以返回所需分页显示的数据。原创博客禁止抄袭，原文地址:https://www.cnblogs.com/xiao-pengyou/只需要传入对应参数就可以返回带有对应分页属性的对象，用于前端界面展示。
前端JS简单实现分页功能
最新发布
luweimo的博客
02-02 556
【代码】前端JS简单实现分页功能。
用WPS的JS宏实现，分页预览状态将同一页某列上内容相同的相邻单元格合并，跨页不合并。
weixin_47795310的博客
12-04 833
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
JS实现分页功能
大数据同盟会的博客
07-03 9964
JS实现分页功能
JavaScript经典实例之分页（简单易用）原生js封装分页（一次性数据）
编程界明世隐的博客
12-17 2362
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <style> *{ margin:5px; padding:0; } .table { word-break: br...
javascript 实现分页
weixin_35755188的博客
02-13 1929
JavaScript 实现分页可以使用以下步骤： 计算出需要分页的数据总量和每页显示的数据数量。 根据总数据量和每页数据量计算出需要的总页数。 根据当前页码计算出该页的数据在总数据中的起始位置和结束位置。 根据起始位置和结束位置截取出当前页的数据。 在界面上显示当前页的数据，并提供页码控制功能，使用户可以在不同的页码间切换。 以下是一个简单的 JavaScript 代码示例： ```...
使用js来实现分页功能
CQXXTXX的博客
10-24 3465
使用js实现分页功能
laypage.js分页插件使用方法详解
12-29
本文实例为大家分享了laypage.js分页插件的使用方法，供大家参考，具体内容如下 1、引用依赖 a.layui.js b.layui.css c.laypage.js 2、HTML代码部分 <div id=page-nav xss=removed></div> 3、js代码部分 [removed] $(function(){ //加载菜单列表数据 menuPageData(); }); function menuPageData() { //以下将以jquery.ajax为例，演示一个异步分页 $.getJSON('../
JavaScript分页功能的实现方法
10-24
主要介绍了JavaScript分页功能的实现方法,涉及javascript操作分页的相关技巧,需要的朋友可以参考下
javascript分页代码实例分享(js分页)
10-26
主要介绍了javascript分页实例，大家参考使用吧
【全民编程】《软件编程-讲课视频》【零基础入门到实战应用】
热门推荐
刘贵庆的博客
08-01 7万+
编程思路。系统学习路线。学习思路
《js遍历json、js创建table、隐藏id列、点击获取id值》
刘贵庆的博客
08-10 3万+
前述：终于抽出时间，整理了一些编程所需基础知识。 先看效果： 选择点击后： code： <body> <div id="tb"></div> <button onclick="submit()">提交</button> <script> var jsonstr = '[{"id":"01sdfae24lj0s34k4234kijwerm3", info0: "01", "info2": "梨子", "i..
《彻底卸载chrome及注册表清理》
刘贵庆的博客
08-11 2万+
第一步：先在卸载中卸载chrome. 第二步：把下部信息拷贝到txt文件中保存，改改名为：彻底清理chrome注册表.reg （注意后缀名为reg）双机执行即可。 第三步：一定重启电脑。（不是关机再开机）。 Windows Registry Editor Version 5.00 ;WARNING, this file will remove Google Chrome registry entries ;from your Windows Registry. Consider backi
《js读取本地json文件》及浏览器跨域设置、《js保存json到本地》
刘贵庆的博客
08-10 2万+
前述：终于抽出时间，整理了一些编程所需基础知识。 有些js在读取本地文件出现浏览器跨域问题，在此提供解决方法： 问题：同源策略禁止读取位于 c:/... 的远程资源。（原因：CORS 请求不是 http）解决方法：跨域设置: 1、打开火狐浏览器：输入"about:config" 2、点击”接受风险并继续” 3、搜索”security.fileuri.strict_origin_policy”,设置为：false 4、关闭浏览器再打开。 5、谷歌浏览器:我捣鼓了半天没辙，不折腾了。其他：若在应用程序中运行
《js基础-中国城市筛选》js读取json文件
刘贵庆的博客
08-10 1万+
前述：终于抽出时间，整理了一些编程所需基础知识。 请提前看： 1、《js基础-select选择标签》https://blog.csdn.net/xysxlgq/article/details/119580815 2、《js读取本地json文件》https://blog.csdn.net/xysxlgq/article/details/119568570 中国城市筛选： 先看效果： 1、先生成省份信息； 2、选择需要的省份后城市列中生成城市数据。 主要code： <!DOCT.
使用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）来实现分页功能。这些插件提供了丰富的选项和样式，可以根据需求自定义分页功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值