JS分页案例

最新推荐文章于 2023-09-23 13:22:08 发布
最新推荐文章于 2023-09-23 13:22:08 发布
阅读量368 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript 分页

JS分页案例

项目中经常会用到分页，自己写了一个但是实在太难看，整理了半天后放弃了。于是在网上找了一个挺不错的，稍微修改后记录在此，以后方便使用。
效果如下：
分页效果

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>分页演示</title>
    </head>

    <body>

        <!--分页按钮显示的位置-->
        <div id="pagerId"></div>

    </body>

    <script type="text/javascript">
        /**
         *  设置页面的按钮 
         * @param {Object} divPager     分页div的id
         * @param {Object} pageIndex    当前页码数
         * @param {Object} pageSize     每页显示的记录数
         * @param {Object} totalCount   总计多少条记录
         * @param {Object} pageChange   分页页按钮的点击事件()
         * @param {Object} opt          页面的显示效果配置
         */
        var pager = function(divPager, pageIndex, pageSize, totalCount, pageChange, opt) {
            var theOpt = {
                barSize: 5, //分页条显示的页码数   
                barTemplate: "{bar}  共{totalPage}页{totalCount}条 {goto}", //显示模板
                autoHide: true, //是否自动隐藏
                showFirst: true, //在totalPage>barSize时是自动否显示第一页链接
                showLast: true, //在totalPage>barSize时是自动否显示最后一页链接
                showGoTo: true, //是否显示GoTo
                autoHideGoTo: true //如果太少是否自动隐藏GoTo
            };
            if (opt) {
                if (opt.barSize)
                    theOpt.barSize = opt.barSize;
                if (opt.barTemplate)
                    theOpt.barTemplate = opt.barTemplate;
                if (opt.autoHide == false)
                    theOpt.autoHide = false;
                if (opt.showFirst == false)
                    theOpt.showFirst = false;
                if (opt.showLast = false)
                    theOpt.showLast = false;
                if (opt.showGoTo == false)
                    theOpt.showGoTo = false;
                if (opt.autoHideGoTo == false)
                    theOpt.autoHideGoTo = false;
            }
            var handles = window.myPagerChanges = (function(x) {
                return x;
            }(window.myPagerChanges || {}));
            if (!myPagerChanges[divPager]) {
                myPagerChanges[divPager] = pageChange;
            }
            var startPage = 0; //分页条起始页
            var endPage = 0; //分页条终止页
            var showFirst = true;
            var showLast = true;
            if (isNaN(pageIndex)) {
                pageIndex = 1;
            }
            pageIndex = parseInt(pageIndex);
            if (pageIndex <= 0)
                pageIndex = 1;
            if (pageIndex * pageSize > totalCount) {
                pageIndex = Math.ceil(totalCount / pageSize);
            }
            if (totalCount == 0) { //如果没数据
                document.getElementById(divPager).innerHTML = "";
                return "";
            }
            var totalPage = Math.ceil(totalCount / pageSize);
            if (theOpt.autoHide && totalCount <= pageSize) { //自动隐藏
                document.getElementById(divPager).innerHTML = "";
                return "";
            }
            if (totalPage <= theOpt.barSize) {
                startPage = 1;
                endPage = this.totalPage;
                theOpt.showLast = theOpt.showFirst = false;
            } else {
                if (pageIndex <= Math.ceil(theOpt.barSize / 2)) { //最前几页时
                    startPage = 1;
                    endPage = theOpt.barSize;
                    theOpt.showFirst = false;
                } else if (pageIndex > (totalPage - theOpt.barSize / 2)) { //最后几页时
                    startPage = totalPage - theOpt.barSize + 1;
                    endPage = totalPage;
                    theOpt.showLast = false;
                } else { //中间的页时
                    startPage = pageIndex - Math.ceil(theOpt.barSize / 2) + 1;
                    endPage = pageIndex + Math.floor(theOpt.barSize / 2);
                }
                if (totalPage <= (theOpt.barSize * 1.5)) {
                    theOpt.showLast = theOpt.showFirst = false;
                }
            }

            function _getLink(index, txt) {
                if (!txt) txt = index;
                //可点击的分页按钮
                return "<a href='javascript:;' style='margin: 2px 5px;border: 1px solid #6d8cad;color: #0269BA;padding: 2px 5px;text-decoration: none;' onclick='myPagerChanges[\"" + divPager + "\"](" + index + ")'>" + txt + "</a>";
            }
            var barHtml = ""; //分页条
            barHtml += pageIndex == 1 ? "" : _getLink(pageIndex - 1, "上一页");
            if (theOpt.showFirst) {
                barHtml += _getLink(1) + "<span>...</span>";
            }
            for (var index = startPage; index <= endPage; index++) {
                if (index == pageIndex) {
                    //不可点击的分页按钮(当前页)
                    barHtml += "<span style='color:red;font-weight:blod; '>" + index + "</span>";
                } else {
                    barHtml += _getLink(index);
                }
            }
            if (theOpt.showLast) {
                barHtml += "<span>...</span>" + _getLink(totalPage);
            }
            barHtml += pageIndex == totalPage ? "" : _getLink(pageIndex + 1, "下一页");
            var gotoHtml = ""; //goto框及按钮
            if (theOpt.showGoTo && theOpt.barTemplate.indexOf("{goto}") > 0) {
                if ((theOpt.autoHideGoTo && totalPage > 15) || theOpt.autoHideGoTo == false) {
                    var txtid = divPager + "_goIndex";
                    var indexVal = "document.getElementById(\"" + txtid + "\").value";
                    //输入框样式
                    gotoHtml += "<input type='text' onkeypress='if(event.keyCode==13){myPagerChanges[\"" + divPager + "\"](" + indexVal + ")}' id='" + txtid + "' value=" + pageIndex + " style='width:30px'> ";
                    //跳转按钮样式
                    gotoHtml += "<input type='button' class='page_bg' value='go' onclick='myPagerChanges[\"" + divPager + "\"](" + indexVal + ")'>";
                }
            }
            //替换模板
            var pagerHtml = theOpt.barTemplate.replace("{bar}", barHtml)
                .replace("{totalCount}", totalCount)
                .replace("{pageIndex}", pageIndex)
                .replace("{totalPage}", totalPage)
                .replace("{goto}", gotoHtml);
            document.getElementById(divPager).innerHTML = pagerHtml;
            return pagerHtml;
        };
        /**
         * 页面发生跳转时的事件
         * @param {Object} index    页码
         */
        var pageChange = function(index) {
            if (index < 0) {} else {
                alert("跳转到" + index + "页，请求数据");
            }
            var html = pager("pagerId", index, 5, 1000, pageChange, {
                showGoTo: true,
                showFirst: false
            });
        };
        //显示分页按钮
        pageChange(-1);
    </script>

</html>
sunbufu
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript经典实例之分页（简单易用）原生js封装分页（一次性数据）
编程界明世隐的博客
12-17 2477
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <style> *{ margin:5px; padding:0; } .table { word-break: br...
【js 分页】js 分页 方法一 【实用】
刘贵庆的博客
08-19 7931
纯js 分页功能。
javascript 实现分页
weixin_35755188的博客
02-13 1979
JavaScript 实现分页可以使用以下步骤： 计算出需要分页的数据总量和每页显示的数据数量。 根据总数据量和每页数据量计算出需要的总页数。 根据当前页码计算出该页的数据在总数据中的起始位置和结束位置。 根据起始位置和结束位置截取出当前页的数据。 在界面上显示当前页的数据，并提供页码控制功能，使用户可以在不同的页码间切换。 以下是一个简单的 JavaScript 代码示例： ```...
使用js实现简单分页
05-27
使用js写的分页模块，html页面引入相应的js和css可以直接调用里面的方法，使用方便，里面有一个小demo
简单的分页代码js实现
SeekerTime
07-10 8696
先看看效果图： 简单的分页js代码: 1、效果描述： 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单，效果很棒 2、调用方法：$(".tcdPageCode").createPage({ pageCount:10, current:1, backFn:function(p){ //单击回调方法，p是当前页码 } }
paginationjs分页器案例
最新发布
05-21
4. **JavaScript** - 作为网页脚本语言，JavaScript在本案例中起到了核心作用，它负责处理用户交互、调用Pagination.js插件、更新分页状态以及与后端进行必要的数据通信。 5. **分页原理** - 分页的基本原理是将...
asp.net分页案例
05-23
在这个"asp.net分页案例"中，我们主要关注的是如何在ASP.NET环境中实现分页功能，这是一个非常实用的技术，尤其对于处理大量数据的网页应用而言。分页可以提高网页性能，提升用户体验，避免一次性加载过多的数据导致...
Mysql分页案例
08-02
在前端展示方面，可以使用各种前端框架或库，如HTML、JavaScript、jQuery、Vue.js等，将从后台获取的分页数据渲染成表格或其他形式。如果是Web应用，还可以使用Ajax异步请求，使得分页操作无刷新，提高用户体验。 ...
javascript的分页案例javascript的分页案例
07-29
二、JavaScript分页实现 1. 数据获取：通常，服务器会提供接口，返回当前页的数据。JavaScript通过Ajax（异步JavaScript和XML）技术与服务器进行通信，获取所需数据。 2. 分页逻辑：JavaScript需要计算总页数，这...
js 分页代码带切换效果
12-12
在实现JavaScript分页代码时，通常会包含以下几个核心部分： 1. 数据获取：根据当前页码和每页显示的数据量，从服务器请求对应的数据。 2. 分页元素生成：创建分页导航条，包括上一页、下一页按钮和页码链接。 3. ...
javascript分页代码实例分享(js分页)
10-26
主要介绍了javascript分页实例，大家参考使用吧
利用js制作html table分页示例(js实现分页)
10-26
主要介绍了利用js制作html table的分页示例(js实现分页),需要的朋友可以参考下
JavaScript实现列表分页（小白版）
分享Java，vue学学习笔记
03-26 2379
上方获li获取标签为8；这里是一个页面显示5条数据所以对pageLi进行取模；为0则是Math.floor不是则是Math.ceil，Math.floor是向下取整（ 1.6 => 1），Math.ceil为向上取整（1.6=>2 ），所以这里n最后等于2，页面为2。第一步：修改一下样式（一条li标签假如有40的高度，现在有8个则整个ul有320；我现在需要进行一个页面显示5条数据；第四步：对分页两个li做点击事件进行分页显示。在获取分页li进行样式设置。以ul列表为例进行分页。第三步：创建分页标签。
js如何实现分页功能
qq_60504665的博客
09-23 1065
6. 点击分页按钮更新数据：当用户点击分页按钮时，根据按钮对应的页码更新当前页码，并重新显示当前页的数据。4. 显示当前页的数据：根据当前页码和每页显示的数量，从数据数组或对象中提取对应页码的数据。5. 生成分页按钮：根据总页数，生成相应数量的分页按钮，并为每个按钮绑定点击事件。2. 设置每页显示的数量和当前页码：确定每页要显示的数据数量，以及当前页码。3. 计算总页数：根据数据的总数和每页显示的数量，计算出总页数。或本地获取数据，并将数据存储在一个数组或对象中。以上就是实现分页的办法了。
js分页实现，前端实现。
liuzijiang1123的专栏
01-05 4万+
主要是借鉴了网上一个例子，自己重新加了样式，添加了跳转，修改了一些小地方，用于和大家一起分享，前端分页的技巧，表格 的数据是我已经写好了，其实大家也可以前端渲染表格然后再分页，都是可以的。 a{ text-decoration: none; } .table2{ border:#C8C8C8 solid; border-widt
前端实现列表排序 (时间 名称 升序 降序)
张一西的博客
10-30 5062
function pcompare(prop,rev) { // 第二个参数没有传递，默认升序排序 if(rev === undefined) { rev = 1; }else { rev = rev ? 1: -1; } return function(obj1,obj2) { // 方括号.
html+js实现分页功能
热门推荐
只如初见0706的博客
07-08 4万+
1、分页功能实现效果如下： 2、代码如下 <!DOCTYPE html > <html> <head> <title> 消息呈现 </title> <link rel="icon" href="picture.ico" type="image/x-icon" /> <script src="../js/j...
纯JS实现分页
远望
11-07 636
JSP ${blog.title } JS function goPage(pno, psize) { var blogs = document.getElementById("blogs"); var totalCount = blogs.rows.length; // 总博客数 var pageSize = psize; // 每页显示博客数 v
js分页实现，前端实现
qq_43682438的博客
11-13 9721
js分页实现，前端实现
jquery+mysql项目案例
01-30
jQuery是一个著名的JavaScript库，用于简化开发网页的交互性和响应性。MySQL是一个流行的关系型数据库管理系统。结合使用jQuery和MySQL可以实现一些强大的项目案例。 一个典型的jQuery和MySQL项目案例是一个由用户...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值