pageGroup.js分页器的使用

最新推荐文章于 2024-12-23 13:49:49 发布
原创 最新推荐文章于 2024-12-23 13:49:49 发布 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#插件 #jquery

本文详细介绍了一组CSS样式的设计方案及其在网页布局中的实际应用，包括页面元素的定位、字体大小、颜色设置等，通过具体例子展示了如何使用CSS来美化页面。
css部分：

 <style>
        #pageGro{ width:400px; height:25px; margin:0px auto; padding-top:60px;margin-bottom:74px;}
        #pageGro div,#pageGro div ul li{ font-size:12px;color:#000; line-height:24px; float:left; margin-left:5px;}
        #pageGro div ul li{ width:22px; text-align:center; border:1px solid #959595; cursor:pointer;}
        #pageGro div ul li.on{ color:#fff; background:#3c90d9; border:1px solid #3c90d9;}
        #pageGro .pageUp,#pageGro .pageDown{ width:63px; border:1px solid #999; cursor:pointer;text-align:center}


        .downpage {
            margin: 50px auto;
            margin-bottom: 20px;
            width: 78px;
            height: 34px;
        }
        .downpage li:first-child {
            margin-left: 0px;
        }
        .downpage li {
            float: left;
            margin-left: 10px;
        }
        .downpage li a.blue {
            color: #0195ff;
        }
        .downpage li a {
            float: left;
            display: block;
            color: #7e7b7b;
            width: 32px;
            text-align: center;
            height: 32px;
            line-height: 32px;
            border: 1px solid #eee;
        }
        .clearfix{
            display: block;
            width: 0;
            height: 0;
            overflow: hidden;
            clear: both;
        }
        *{margin: 0; padding: 0;}
        body{
            font-family: Arial,"Microsoft YaHei","微软雅黑",sans-serif;
            background-color: #fff;
            min-width:1080px;
        }
        li{list-style: none;}
        a{text-decoration: none;}
    </style>
</head><body>
<div class="downpage">
    <ol>
        <li>
            <a href="culture.html"  class="blue">1</a>
        </li>
        <li>
            <a href="index.html">2</a>
        </li>
    </ol>
</div>
<div class="clearfix"></div>
</div>
</div>


<script type="text/javascript" src="js/pageGroup.js" ></script>
</body>
</html




【JS案例】分页器——使用原生JavaScript实现
m0_50785976的博客
07-14 5289
原生js实现分页器功能
JS-part15-分页器
晓葉斑比
09-12 461
Javascript分页器 分页器 1. 根据传递的参数设置一系列默认值 => first 显示的文字 => 根据多少条数据和一页显示多少条计算多少页 => 不管用户是否传递, 你得有一套默认值 => 用户传递的数据和默认值配套 2. 渲染结构 => this.ele 里面要添加 div * 6 -> 我需要创建至少 6 个 div -> 每个 div 的类名不一样, 文本内容不一样, 样式也不太一样 => 准备两个方法
PaginatorJS:简单的分页器模板
06-21
分页器JS 这应该像 Will Paginate Ruby gem 一样工作，但有更多的助手和 JS。 您可以使用示例模板或使用辅助函数构建您自己的模板。
用pageGroup.js实现分页功能
weixin_30641999的博客
12-30 386
1.html页面中 引入 <link rel="stylesheet" type="text/css" href="/stylesheets/pageGroup.css"> <script src="/javascripts/web/pageGroup.js" type="text/javascript"></script> ...
js 分页器
qq_36470908的博客
03-26 2210
依赖于：bootstrap 和 jqueryhtml代码：通过class="pj_pager"引用，pj_total初始化总条数&lt;div class="btn-group pj_pager" pj_total="10001"&gt;&lt;/div&gt;js代码：/** * 分页器，依赖于bootstrap,jquery */ var pager = { init : functio...
jQuery+pageGroup.js分页插件.zip
09-26
jQuery的高效DOM操作和事件处理能力，配合pageGroup.js的灵活配置和易于使用，使得分页功能的实现变得简单而强大。无论是初学者还是经验丰富的开发者，都能从中受益，快速构建出高性能的分页系统。
pageGroup.js实现分页功能
01-19
本文实例为大家分享了pageGroup.js实现分页功能的具体代码，供大家参考，具体内容如下 1.html页面 引入 <link rel=stylesheet type=text/css href=/stylesheets/pageGroup.css > [removed][removed] {{if ...
jquery 之简单好用的分页插件的使用方法 jQuery分页插件pageGroup.js
夜阑珊妖妖
09-02 1897
实现效果： 实现方法： 1.先下载 pageGroup.js 引入到页面中；（jquery 也是必不可少的！） 我把代码放这里吧： function pageGroup(pageNum,pageCount){switch(pageNum){case 1:page_icon(1,5,0);break;case 2:page_icon(1,5,1);break;case pageCount-1:page_icon(pageCount-4,pageCount,3);break;case pageCount:pa
编程开发-综合控件-jQuery根据总页数进行分页代码(pageGroup.js.zip
09-20
这里我们关注的是一个使用jQuery实现的根据总页数进行分页的代码示例，即`pageGroup.js`。这个JavaScript文件包含了一种高效且灵活的方法来处理分页逻辑。 jQuery是一个非常流行的JavaScript库，它简化了DOM操作、...
无刷新分页 jquery.pagination.js
weixin_33826609的博客
05-19 196
1.使用插件为 jquery.pagination.js ，如果没有这个js文件的话，我可以给发个。 首先引用 jquery.pagination.js （分页js），跟pagination.css（分页样式css）。  点击获取查看这两个文件 2.页面js代码为    &lt;script type="text/javascript"&gt; var pa...
js简单的分页器插件代码实例
12-12
这篇文章主要介绍了js简单的分页器插件代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 自己引入jquery插件，我的demo是引入的自己本地的query 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { padding: 0; margin: 0; font-family: "微软雅黑"; } li { list-style: none; } div.m
JS 分页插件page.js
04-13
比较基础的JS分页，基于jQuery的插件，写的不好，还望见谅。。
使用js写的一个分页器
weixin_34266504的博客
06-22 318
js代码(需要用到jquery库)如下： /*setthecssstyleofpagingindictor*/$(function(){ //getthetotalcountesofrecipients //vartotalRecipients=$("input[type=hi...
【javascript】分页器
qq_50260250的博客
09-05 261
HTML <div class="FS-Pager"> <!-- 第一个盒子放点击和移动 --> <div> <ul> <li class="FS-one-active">1</li> <li>2</li> .
js 简易的分页器插件
weixin_30564901的博客
12-29 140
1.自己引入jquery插件，我的demo是引入的自己本地的query <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style ...
js面向对象分页器
hxc506896582的专栏
09-02 1175
/**     * 带页码的分页   * new PagerB({   recordCount:36,    pageContainer:"page",   funPageSearch:function(currentPage){   location="testPage.html?currentPage="+currentPage;   },   currentPage:1,  
js(jQuery)原生分页器
qq_42208679的博客
02-10 620
js(jQuery)原生分页器 说明： 引入jQuery插件 引入page.js文件（在文章的最后面） css: /* 外面盒子样式---自己定义 */ .page_div { margin: 20px 10px 20px 0; color: #666 } /* 页数按钮样式 */ .page_div button { display: inline-block; ...
Js实现前端分页器
xiaoming4965的博客
10-07 499
Js实现前端分页器
js分页功能
weixin_61630053的博客
12-23 1417
总体而言，这段 CSS 代码重点在于对页面不同功能区域（如表格、底部操作区等）的元素进行样式设定，同时打造了一些具有特定视觉效果（如遮罩层、弹出框等）和交互暗示（如可点击的段落元素）的元素样式，为构建一个完整且功能丰富的页面视觉布局和交互体验奠定基础。的内容，重新构建和更新页面上与分页展示相关的各个部分，比如表格主体数据、页面底部信息以及分页按钮等，确保页面展示与当前的页面状态（是否成功切换到上一页或者处于首页提示状态）相匹配。它首先会对输入框中的值进行合法性验证，若输入的值在合理范围内（小于等于总页数。
如何让打印时每一页都显示表头并在表头显示<!-- 页眉 --> <div class="header"> <p>{{ dataForm.checknum }}</p> <p style="display:flex;justify-content: space-between;"> <span v-if="isSameSampleOnPage(pageGroup.rows)"> {{ pageGroup.rows[0].samplename }} </span> <span v-else>合并展示</span> <span>试验地点：实验室</span> </p> </div>
最新发布
08-26
要在打印时每一页都显示表头，并且表头中包含你提供的 Vue 模板结构（包含页眉信息、样品名称判断、合并展示提示等），我们需要结合以下两个关键点： --- ## ✅ 1. 使用 CSS `thead` + `display: table-header-group` 实现每页显示表头 ```css @media print { thead { display: table-header-group; } tr { page-break-inside: avoid; } } ``` --- ## ✅ 2. 在 `<thead>` 中嵌套 `<tr>` 和 `<th>`，并插入你提供的页眉结构 你希望在每一页的表头中显示如下结构： ```html <div class="header"> <p>{{ dataForm.checknum }}</p> <p style="display:flex;justify-content: space-between;"> <span v-if="isSameSampleOnPage(pageGroup.rows)"> {{ pageGroup.rows[0].samplename }} </span> <span v-else>合并展示</span> <span>试验地点：实验室</span> </p> </div> ``` 但由于 `<thead>` 中不能直接使用 `<div>`，我们可以将其转换为表格结构，例如： --- ## ✅ 完整实现代码（Vue 模板 + CSS） ### 📁 Vue 模板部分 ```vue <template> <div id="print-area"> <div v-for="(pageGroup, pageIndex) in pagedItems" :key="pageIndex" class="page"> <table class="report-table"> <!-- 表头 --> <thead> <tr> <th colspan="100%"> <div class="header"> <p>报告编号：{{ dataForm.checknum }}</p> <p style="display:flex;justify-content: space-between;"> <span v-if="isSameSampleOnPage(pageGroup.items)"> {{ pageGroup.items[0].samplename }} </span> <span v-else>合并展示</span> <span>试验地点：实验室</span> </p> </div> </th> </tr> <tr> <th>检测项目</th> <th>样品名称</th> <th>其他字段</th> </tr> </thead> <!-- 表体 --> <tbody> <tr v-for="row in pageGroup.items" :key="row.id"> <td>{{ row.testingitems }}</td> <td>{{ row.samplename }}</td> <td>{{ row.result }}</td> </tr> </tbody> </table> </div> </div> </template> ``` --- ### 📁 Vue 脚本部分（methods） ```js <script> export default { data() { return { dataForm: { checknum: '2025-001' }, reportingmanagersonList: [ { id: 1, samplename: '样品1', testingitems: '项目A', result: '合格' }, { id: 2, samplename: '样品1', testingitems: '项目B', result: '合格' }, { id: 3, samplename: '样品1', testingitems: '项目C', result: '合格' }, { id: 4, samplename: '样品2', testingitems: '项目A', result: '合格' }, { id: 5, samplename: '样品2', testingitems: '项目D', result: '合格' }, { id: 6, samplename: '样品3', testingitems: '项目E', result: '合格' }, { id: 7, samplename: '样品3', testingitems: '项目F', result: '合格' }, { id: 8, samplename: '样品4', testingitems: '项目G', result: '合格' }, { id: 9, samplename: '样品4', testingitems: '项目H', result: '合格' }, { id: 10, samplename: '样品5', testingitems: '项目I', result: '合格' }, ], pagedItems: [] }; }, mounted() { this.pagedItems = this.getPagedItems(this.groupedSamples); }, computed: { groupedSamples() { const groups = {}; this.reportingmanagersonList.forEach(item => { const name = item.samplename; if (!groups[name]) groups[name] = []; groups[name].push(item); }); return Object.keys(groups).map(name => ({ samplename: name, items: groups[name] })); } }, methods: { isSameSampleOnPage(items) { const sampleName = items[0].samplename; return items.every(item => item.samplename === sampleName); }, getPagedItems(groupedSamples) { const pages = []; groupedSamples.forEach(group => { const items = group.items; for (let i = 0; i < items.length; i += 5) { const pageItems = items.slice(i, i + 5); pages.push({ samplename: group.samplename, items: pageItems }); } }); return pages; } } }; </script> ``` --- ### 📁 CSS 样式部分（打印样式） ```css <style> @media print { thead { display: table-header-group; } tr { page-break-inside: avoid; } body { -webkit-print-color-adjust: exact; } } .page { height: 920px; width: 100%; page-break-after: always; box-sizing: border-box; } .report-table { width: 100%; border-collapse: collapse; height: 100%; } .header { padding: 10px; font-size: 14px; font-weight: bold; } .header p { margin: 0; } .report-table th, .report-table td { border: 1px solid #000; padding: 8px; vertical-align: middle; } </style> ``` --- ## ✅ 功能说明 | 功能 | 实现方式 | |------|----------| | ✅ 每页显示表头 | 使用 `<thead>` + `display: table-header-group` | | ✅ 表头中显示页眉信息 | 将页眉结构嵌套在 `<thead>` 的 `<th colspan="100%">` 中 | | ✅ 动态判断是否为同一样品 | 使用 `isSameSampleOnPage` 方法 | | ✅ 每页固定高度 920px | 使用 `.page { height: 920px }` | | ✅ 支持打印样式 | 使用 `@media print` 控制样式 | --- ## ✅ 打印建议 你可以使用如下代码触发浏览器打印： ```js window.print(); ``` ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值