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

完整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 6var 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>

【js 分页】js 分页方法一【实用】相关推荐

vue php 分页组件,基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage.不了解Vue.js的童鞋可 ...
js实现关于分页的一种实现方式
项目中用到列表的地方很多,二页面列表的显示必然要求分页, 所以分页和查询几乎密不可分,如果说你不会分页查询数据, 那你基本上还属于菜鸟. 分页的原理很简单,从sql上看就是从哪一条开始,往后差几条. ...
基于Vue.js的表格分页组件
转载自基于Vue.js的表格分页组件有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫Bo ...
html怎么写分页ajax,js实现ajax分页完整实例
本文实例讲述了js实现ajax分页的方法.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition ...
网站真分页js代码该怎么写?
真分页这个词对程序猿们来说,并不是一个陌生的词汇,但是如果你是初次学习真分页,或许还是得花点时间小小研究下,下面是之前去转盘网(喜欢的可以看看,也可以进入引擎模式)的真分页js部分代码,html部分的 ...
网站真分页js代码该怎么写? 1
真分页这个词对程序猿们来说,并不是一个陌生的词汇,但是如果你是初次学习真分页,或许还是得花点时间小小研究下,下面是之前去转盘网(喜欢的可以看看,也可以进入引擎模式)的真分页js部分代码,html部分的 ...
【Springboot学习笔记】SpringBoot+Mybatis+Thymeleaf+Layui数据表单从零开始实现按条件模糊分页查询的方法
[Springboot学习笔记]SpringBoot+Mybatis+Thymeleaf+Layui数据表单从零开始实现按条件模糊分页查询的方法目录 1.搭建环境 1.1直接从网上下载SpringB ...
JS正则表达式大全(整理详细且实用)
JS正则表达式大全(整理详细且实用) 作者: 字体:[增加减小] 类型:转载时间:2013-11-14 我要评论 JS正则表达式大全(整理详细且实用).需要的朋友可以过来参考下,希望对大家有所帮助 ...
js入门·对象属性方法大总结
数组(Array):系列元素的有序集合: 详细演示请看:[js入门系列演示·数组 ] http://www.cnblogs.com/thcjp/archive/2006/08/04/467761.ht ...
js页面跳转和 js打开新窗口方法
js页面跳转和 js打开新窗口方法 Js返回上一页: 1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history. ...

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

【js 分页】js 分页方法一【实用】相关推荐

最新文章

热门文章

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

【js 分页】js 分页 方法一 【实用】相关推荐

最新文章

热门文章

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

【js 分页】js 分页方法一【实用】相关推荐