JQuery实现前端分页

最新推荐文章于 2024-02-04 10:11:32 发布
最新推荐文章于 2024-02-04 10:11:32 发布
阅读量1.2k 收藏 8
点赞数 1
分类专栏： 笔记 文章标签： jquery
原文链接：https://blog.csdn.net/qq_43682438/article/details/84034154
版权 
<!doctype html>
<html>

<head>
    <meta charset='utf-8'>
    <style type="text/css">
        a {
            text-decoration: none;
        }

        .table2 {
            border: #C8C8C8 solid;
            border-width: 1px 0px 0px 1px;
            background: #F3F0F0;
            margin-top: 25px;
        }

        .td0 {
            border: #C8C8C8 solid;
            border-width: 0 0 1px 0;
        }

        .td2 {
            border: #C8C8C8 solid;
            border-width: 0 1px 1px 0;
        }

        .barcon {
            width: 1000px;
            margin: 0 auto;
            text-align: center;
        }

        .barcon1 {
            font-size: 17px;
            float: left;
            margin-top: 20px;
        }

        .barcon2 {
            float: right;
        }

        .barcon2 ul {
            margin: 20px 0;
            padding-left: 0;
            list-style: none;
            text-align: center;
        }

        .barcon2 li {
            display: inline;
        }

        .barcon2 a {
            font-size: 16px;
            font-weight: normal;
            display: inline-block;
            padding: 5px;
            padding-top: 0;
            color: black;
            border: 1px solid #ddd;
            background-color: #fff;
        }

        .barcon2 a:hover {
            background-color: #eee;
        }

        .ban {
            opacity: .4;
        }
    </style>
</head>

<body>
    <table width="950" cellpadding="0" cellspacing="0" class="table2" align="center">
        <thead>
            <tr>
                <td colspan="3" height="33" class="td0"> </td>
                <td align="center" class="td2"><a href="###">添加用户</a></td>
            </tr>
            <tr align="center">
                <th width="150" height="33" class="td2">序号</th>
                <th width="300" class="td2">用户名</th>
                <th width="250" class="td2">权限</th>
                <th width="250" class="td2">操作</th>
            </tr>
        </thead>
        <tbody id="adminTbody">
            <tr align="center">
                <td class="td2" height="33" width="150">1</td>
                <td class="td2">admin</td>
                <td class="td2">管理员</td>
                <td class="td2"><a href="###">修改</a></td>
            </tr>
        </tbody>
    </table>
    <div id="barcon" class="barcon">
        <div id="barcon1" class="barcon1"></div>
        <div id="barcon2" class="barcon2">
            <ul>
                <li><a href="###" id="firstPage">首页</a></li>
                <li><a href="###" id="prePage">上一页</a></li>
                <li><a href="###" id="nextPage">下一页</a></li>
                <li><a href="###" id="lastPage">尾页</a></li>
                <li><select id="jumpWhere"> </select></li>
                <li><a href="###" id="jumpPage" onclick="jumpPage()">跳转</a></li>
            </ul>
        </div>
    </div>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        /*动态生成用户函数 num为生成的用户数量*/
        function dynamicAddUser(num) {
            for (var i = 1; i <= num; i++) {
                var trNode = document.createElement("tr");
                $(trNode).attr("align",
                    "center"); //序号   
                var tdNodeNum = document.createElement("td");
                $(tdNodeNum).html(i + 1);
                tdNodeNum.style.width = "150px";
                tdNodeNum.style.height = "33px";
                tdNodeNum.className = "td2";
                //用户名   
                var tdNodeName = document.createElement("td");
                $(tdNodeName).html("lzj" + i);
                tdNodeName.style.width = "300px";
                tdNodeName.className = "td2";
                //权限      
                var tdNodePri = document.createElement("td");
                tdNodePri.style.width = "250px";
                tdNodePri.className = "td2";
                var priText = document.createElement("span");
                $(priText).css({
                    "display": "inline-block",
                    "text-align": "center"
                });
                $(priText).text("普通用户");
                tdNodePri.appendChild(priText);
                //操作   
                var tdNodeOper = document.createElement("td");
                tdNodeOper.style.width = "170px";
                tdNodeOper.className = "td2";
                var editA = document.createElement("a");
                $(editA).attr("href", "###").text("编辑");
                $(editA).css({
                    display: "inline-block"
                });
                tdNodeOper.appendChild(editA);
                trNode.appendChild(tdNodeNum);
                trNode.appendChild(tdNodeName);
                trNode.appendChild(tdNodePri);
                trNode.appendChild(tdNodeOper);
                $("#adminTbody")[0].appendChild(trNode);
            }
        }
        $(function () {
            dynamicAddUser(80);
            goPage(1, 10);
            var tempOption = "";
            for (var i = 1; i <= totalPage; i++) {
                tempOption += '<option value=' + i + '>' + i + '</option>'
            }
            $("#jumpWhere").html(tempOption);
        })
        /**
         * 分页函数 
         * pno--页数
         * psize--每页显示记录数 
         * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数 
         * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
         **/
        var pageSize = 0;
        //每页显示行数
        var currentPage_ = 1;
        //当前页全局变量，用于跳转时判断是否在相同页，在就不跳，否则跳转。
        var totalPage;
        //总页数
        function goPage(pno, psize) {
            var itable = document.getElementById("adminTbody");
            var num = itable.rows.length;
            //表格所有行数(所有记录数)   
            pageSize = psize;
            //每页显示行数    
            //总共分几页     
            if (num / pageSize > parseInt(num / pageSize)) {
                totalPage = parseInt(num / pageSize) + 1;
            } else {
                totalPage = parseInt(num / pageSize);
            }
            var currentPage =
                pno;
            //当前页数  
            currentPage_ = currentPage;
            var startRow = (currentPage - 1) * pageSize + 1;
            var endRow = currentPage * pageSize;
            endRow = (endRow > num) ? num :
                endRow;

            //遍历显示数据实现分页    
            /*for (var i = 1; i < (num + 1); i++) {
                var irow = itable.rows[i - 1];
                if (i >= startRow && i <= endRow) {
                    irow.style.display = "";
                } else {
                    irow.style.display = "none";
                }
            }*/
            $("#adminTbody tr").hide();
            for (var i = startRow - 1; i < endRow; i++) {
                $("#adminTbody tr").eq(i).show();
            }
            var tempStr = "共" + num + "条记录 分" + totalPage + "页 当前第" + currentPage + "页";
            document.getElementById("barcon1").innerHTML = tempStr;
            if (currentPage > 1) {
                $("#firstPage").on("click", function () {
                    goPage(1, psize);
                }).removeClass("ban");
                $("#prePage").on("click", function () {
                    goPage(currentPage - 1, psize);
                }).removeClass("ban");
            } else {
                $("#firstPage").off("click").addClass("ban");
                $("#prePage").off("click").addClass("ban");
            }
            if (currentPage < totalPage) {
                $("#nextPage").on("click", function () {
                    goPage(currentPage + 1, psize);
                }).removeClass("ban")
                $("#lastPage").on("click", function () {
                    goPage(totalPage, psize);
                }).removeClass("ban")
            } else {
                $("#nextPage").off("click").addClass("ban");
                $("#lastPage").off("click").addClass("ban");
            }
            $("#jumpWhere").val(currentPage);
        }
        //跳转
        function jumpPage() {
            var num = parseInt($("#jumpWhere").val());
            if (num != currentPage_) {
                goPage(num, pageSize);
            }
        }
    </script>
</body>

</html>

效果

溺人深海
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2024年前端最全基于jquery的web分页实现(1)，阿里P7大佬手把手教你
2401_84447149的博客
05-06 619
技术栈比较搭，基本用过的东西都是一模一样的。快手终面喜欢问智力题，校招也是终面问智力题，大家要准备一下一些经典智力题。如果排列组合、概率论这些基础忘了，建议回去补一下。
基于jquery的web分页实现
qq_41743601的博客
10-22 782
基于jquery的web分页实现 文章目录基于jquery的web分页实现1.前言2.工具3.写代码之前的思考1.首先一个分页由一下几个部分组成：2.具体分析4.具体操作对<< 和 >> 的控制控制方块数字的变化对数字的变化控制关键步骤触发事件的代码小方块背景颜色的控制页面实现代码（使用jstl动态控制）5.完整js代码6.效果图 1.前言 之前写过一次web分页的实现，但是那次写得不够完美，还有许多需要改进得地方。其次上次写得那个是使用原生js写的，代码量比较多。所以这次选取了j
html+jquery 实现前端分页控件
落落Plus的博客
08-26 1239
写此控件因开发需求在拿打包后的项目；之前是前后端不分离，在这基础上抽离出来；调取Java接口；加分页控件； 手撸，参照elementUI； 点击事件使用委托模式实现 先上图： 参照物： <div id="xu-paging" class="works_paging row"> <div class="works_paging_flex"&g...
前台分页html,Web前端 jQuery实现分页功能
weixin_29539581的博客
06-08 317
/p>网页前端开发教程:jq分页.nav {width: 100%;height: 300px;}ul {list-style: none;}ul li {float: left;width: 50px;height: 50px;border: 1px solid #E7EEEF;text-align: center;line-height: 50px;cursor: pointer;mar...
jquery实现前端分页、select筛选框、查询条件展示效果
热门推荐
FREE-FLY的博客
01-29 1万+
jquery实现前端分页、select筛选框、查询条件展示效果：以前做的筛选条件是用很笨的方法实现的，如果筛选条件（select）的value值超多的话，我使用的是switch循环的方法，导致代码冗余，最多需要几百行代码或上千行代码实现功能需求，代码质量很低。现在使用的是自己写的函数封装的方法，只是js代码最多也就150多行，实现分页、select筛选框、查询条件，希望对前端初级开发人员和前端小白
jquery实现分页切换
Amouzy的博客
06-24 932
案例效果： 点击下面页码，选择对应页面的效果。点击向左向右的箭头，页面切到上一张或者下一张，当前页面是第一张时不能继续选择上一张，反之亦然。 html: css: 向左向右的箭头如下：
jquery datatable 前端分页和后端分页例子
qq_32037561的博客
06-22 1699
datatable分页有两种方式，一是页面分页，二是服务端分页 <link rel="stylesheet" href="${app}/static/media/css/jquery.dataTables.css"> <script src="${app}/static/media/js/jquery.dataTables.js"></script> //这个是固定列用的 <link rel="stylesheet" href="${app}/static
jquery table实现分页
DHLSP15的博客
02-04 1035
jQuery Table实现分页组件
jquery.datatables 前端分页工具使用
Turbo的博客
04-17 2398
jQuery.datatables是一款基于jQuery表格插件。 需求：需要弄个前端分页、前端筛选（自定义）的表格。基本实现功能如下： 前端DataTable 静态筛选 基本使用 // demo 1 ajax 取数据 var table2 = $('#table_details').DataTable({ // 1 //排序功能. o...
纯jQuery实现前端分页功能
12-09
【纯jQuery实现前端分页功能】 前端分页是一种常见的数据展示策略，尤其在处理大量数据时，可以显著提升页面加载速度和用户体验。在本文中，我们将探讨如何使用jQuery库来实现在前端进行分页，避免一次性加载大量...
jquery前端实现分页效果
05-21
前端分页并不处理实际的数据获取，而是负责展示已加载的数据并提供导航按钮以切换页面。后端则根据前端请求的页码和每页大小返回对应的数据。 2. **HTML结构** 在HTML中，我们需要创建一个包含分页链接的容器，如`...
jQuery前端分页示例分享
10-24
主要介绍了jQuery前端分页示例分享的相关资料,需要的朋友可以参考下
基于bootstrap+jQuery的前端分页
07-01
"基于bootstrap+jQuery的前端分页"是一个利用这两种流行的技术实现的分页解决方案。Bootstrap是Twitter推出的一个用于前端开发的开源工具包，它提供了一套响应式布局、移动设备优先的WEB设计框架，使得开发者能够...
图像识别roid-maste笔记
08-03
图像识别roid-maste笔记
有监督学习神经网络的回归拟合——基于matlab红外光谱的汽油辛烷值预测.zip
08-03
有监督学习神经网络的回归拟合——基于matlab红外光谱的汽油辛烷值预测.zip
C++实战篇：STL-容器
最新发布
08-03
C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器 C++实战篇：STL-容器
Delphi 10.2 FMX下载图片代码.rar
08-03
Delphi 10.2 FMX下载图片代码.rar
模拟电子电路基础培训课件
08-03
1. 常用半导体器件 2. 运算放大器及其应用 3. 运算放大器参数详解 4. 线性稳压电源 5. 综合模拟电路设计与仿真
jquery实现分页功能
04-05
1.准备工作 （1）引入jQuery和分页插件 在HTML文件中引入jQuery和分页插件（如jquery.pagination.js）的js文件。 （2）创建分页容器 在HTML文件中创建一个容器，用于显示分页导航条和数据内容。 （3）获取数据 使用ajax请求获取需要分页的数据，并将数据渲染到容器中。 2.初始化分页插件 使用jQuery的pagination()方法初始化分页插件，设置相关参数，如总页数、每页显示的数据数量、当前页码等。 3.绑定事件 为分页导航条中的页码绑定点击事件，当点击时修改当前页码，并重新获取数据进行渲染。 示例代码： HTML文件： ``` <div id="data-container"></div> <div id="pagination"></div> ``` JS文件： ``` var pageSize = 10; //每页显示的数据数量 var currentPage = 1; //当前页码 getData(currentPage); //获取数据并渲染到页面 function getData(page) { $.ajax({ url: 'data.php', type: 'get', data: { page: page, pageSize: pageSize }, success: function(res) { //将数据渲染到页面 renderData(res.list); //初始化分页插件 $("#pagination").pagination({ currentPage: page, //当前页码 totalPage: res.totalPage, //总页数 isShow: true, //是否显示分页导航条 count: 5, //分页导航条中显示的页码数量 homePageText: "首页", endPageText: "尾页", prevPageText: "上一页", nextPageText: "下一页", callback: function(current) { //点击分页导航条中的页码触发的函数 currentPage = current; //修改当前页码 getData(currentPage); //重新获取数据进行渲染 } }); } }); } //将数据渲染到页面 function renderData(list) { var html = ""; for (var i = 0; i < list.length; i++) { html += "<div>" + list[i].title + "</div>"; } $("#data-container").html(html); } ``` PHP文件（data.php）： ``` $page = $_GET['page']; //当前页码 $pageSize = $_GET['pageSize']; //每页显示的数据数量 //查询数据总条数 $totalCount = mysqli_num_rows(mysqli_query($conn, "select * from table_name")); //计算总页数 $totalPage = ceil($totalCount / $pageSize); //查询当前页码需要显示的数据 $start = ($page - 1) * $pageSize; $sql = "select * from table_name limit $start, $pageSize"; $result = mysqli_query($conn, $sql); $list = array(); while ($row = mysqli_fetch_assoc($result)) { $list[] = $row; } //返回数据 $res = array( 'totalPage' => $totalPage, 'list' => $list ); echo json_encode($res); ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值