纯js写的分页

最新推荐文章于 2021-12-10 14:47:39 发布
最新推荐文章于 2021-12-10 14:47:39 发布
阅读量739 收藏 1
点赞数
分类专栏： Asp.Net
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lxfzgg/article/details/38020237
版权

js部分


var head_str = "";

var maxpage = 0; //最大页数
var jls00 = 0; //记录数
$(function () {
    $("#pageIndex").val(pageIndex);
    $("#tt").text(maxpage);
    head();
    getData();
});
//刷新
function sx() {
    $("#pageIndex").val(pageIndex);
    $("#tt").text(maxpage);
    $("#count").html(jls00);
    head_str = "";
    head();
    getData();
}


//头部
function head() {
    var strtb = "2[]单号[]区域[]经办人[]编号[]";
    strtb = strtb.substr(strtb.indexOf("[]") + parseInt(2));
    var arrystrtb = strtb.split('[]');
    head_str += "<tbody><tr>";
    for (var i = 0; i < arrystrtb.length - 1; i++) {
        var text = $("#text_" + parseInt(parseInt(i) + 1)).val();
        text = parseInt(text);
        head_str += "<th rindex ='" + (i + 1) + "' width='" + text + "mm'>" + arrystrtb[i] + "</th>";


    }
    head_str += "</tr></tbody>";
    $("#Rtablesub").html(head_str);
}


//内容
var data = "10[]C0001[]电容[]SYSTEM[]69023[]COOO2[]继电器[]吴 R[]23038[]COOO3[]继电器3[]吴 R3[]230383[]COOO4[]继电器4[]吴 R4[]230384[]COOO5[]继电器4[]吴 R4[]230384[]COOO6[]继电器4[]吴 R4[]230384[]COOO7[]继电器4[]吴 R4[]230384[]COOO8[]继电器4[]吴 R4[]230384[]COOO9[]继电器4[]吴 R4[]230384[]COOO10[]继电器4[]吴 R4[]230384[]";
jls00 = data.substr(0, data.indexOf("[]"));
jls00 = parseInt(jls00);
data = data.substr(data.indexOf("[]") + parseInt(2));
var arrystr = data.split('[]');
var number = (arrystr.length - 1) / jls00;


var pageIndex = 1;  //当前页
var pageSize = 4;    //页容量
maxpage = Math.ceil(jls00 / pageSize);
function getData() {
    $("#Rtablesub").html(head_str);
    html = "";
    var end = pageIndex * pageSize < jls00 ? pageIndex * pageSize : jls00;
    for (var i = (pageIndex - 1) * pageSize; i < end; i++) {
        html += "<tr rid='" + i + "'>";
        for (var j = 0; j < number; j++) {
            html += "<td>" + arrystr[i * number + j] + "</td>";
        }
        html += "</tr>";
    }
    $("#Rtablesub").append(html);
}


//下一页
function next() {
    pageIndex++;
    if (pageIndex > maxpage) {
        pageIndex = 1;
    }
    $("#pageIndex").val(pageIndex);
    getData();
}
//上一页
function back() {
    pageIndex--;
    if (pageIndex < 1) {
        pageIndex = maxpage;
    }
    $("#pageIndex").val(pageIndex);
    getData();
}
//首页
function first() {
    pageIndex = 1;
    $("#pageIndex").val(pageIndex);
    getData();
}


//末页
function last() {
    pageIndex = maxpage;
    $("#pageIndex").val(pageIndex);
    getData();

}


页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link href="css/index.css" rel="stylesheet" type="text/css" />
    <script src="js/Jquery1.7.js" type="text/javascript"></script>
    <script src="js/common.js" type="text/javascript"></script>
    <script src="js/fy.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <input type="hidden" id="pageIndex" />
    单号：<input type="text" id="text_1" value="66" /><br />
    区域：<input type="text" id="text_2" / value="55"><br />
    经办人：<input type="text" id="text_3" value="77"/><br />
    编号：<input type="text" id="text_4" value="99"/><br />
    <input type="button" value="刷新" οnclick="sx();"/>
    <br />
    <div id="Rtable">
        <div class="p">
            <table border="0" cellspacing="0" class="table" id="Rtablesub">
            </table>
        </div>
    </div>
    
     <div class="pages">
                <table border="0" cellspacing="0" cellpadding="0">
                    <tr>
                        <td class="ta-right">
                            共<a id="count" href="javascript:void(0)"></a>条&nbsp;&nbsp;
                            共<a id="tt" href="javascript:void(0)"></a>页&nbsp;&nbsp;
                            <a id="firstPage" href="javascript:void(0)" οnclick="first()">首页</a>&nbsp;&nbsp;
                            <a id="prevPage" href="javascript:void(0)" οnclick="back()">上页</a>&nbsp;&nbsp;
                            <a id="nextPage" href="javascript:void(0)" οnclick="next()">下页</a>&nbsp;&nbsp;
                            <a id="lastPage" href="javascript:void(0)" οnclick="last()">末页</a>&nbsp;&nbsp;
                        </td>
                    </tr>
                </table>
            </div>
    </form>
</body>
</html>


刘晓飞
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯js分页-用js实现分页显示
01-05
纯js分页,用js将内容以分页的形式展现出来，处理数据更简单
纯js实现分页
weixin_34284188的博客
01-13 216
原理：所有数据已加载好，js通过遍历部分显示，实现分页效果 html代码 <html> <head> <meta charset='utf-8'> <script type="text/javascript" src="page.js"></script> <style type="text/css...
用纯js实现列表分页
z55947810的博客
12-10 1687
提供一种纯 js 分页思路。 由于该需求获取到的数据量较少，所有选择直接请求后端，一次性接了所有的数据，然后拼接html代码来展示数据。 var pageSize = 5; // 每页数据条数 var pageNum = 0; // 总页数 var allData; // 接收到的所有数据 $(function () { $.ajax({ type: 'POST', crossDomain: true, async: false,
使用JS实现纯分页原理以及实现
廖子默
10-13 2850
写在前面 好久没写博客了，因为实习工作好忙，还要同时兼顾毕业设计，最主要的是我现在是前端实习，哈哈，我一个在大学学了这么久后端开发的人，结果人生第一份正式的实习工作是前端。现在做了一个月了，自学了很多的前端知识，也对前端有了更多的了解，发现以前的认知都是错误的，什么前端简单，谁再说这句话我会认为他是一个ZZ。还有最后就是其实作为一个软件开发的人，技术栈一定要广，然后才深入几个。 不说废话了—实...
纯js分页
中国凉茶
07-03 105
做项目时偶尔有需求：数据一次性加载到页面同时还要实现分页，此时有两种方式一种是提交到当前页，这个里面会有一些变量需要置为hidden域，另外一种就是纯js分页。利用第一种方式效率不太高，存在多次访问数据库的问题，因而对于这种需要常常采用第二种方式。demo如下，实现思路：页面数据一次性全部加载完毕，js部分通过函数控制其是否显示达到分页的功能，有一个方法通过递归即可全部实现上一页、下一页、首页、尾...
纯JS前端实现分页代码
11-25
因为这是我自己第一次动手用js写分页，写的应该也不是很完美，有些公共的没有抽取出来，但是用起来还是可以的，这块代码是可以把它当做公共的分页去处理的，我就是用这块代码写了两个稍微不同一些的分页！...
纯javascript实现分页(两种方法)
10-23
有的时候页面需要很多不同的表组成的数据，该怎么分页呢？使用数据库分页很简单，那么如何使用js实现分页呢？接下来，小编帮大家解决这个问题，需要的朋友一起来学习吧
纯js分页模板
08-30
纯js分页模板
纯js实现分页 可跳转指定页
09-18
简单好用的分页插件原生JS，可跳转指定页， 可自定义样式
纯JS写的分页代码。
老张
10-07 3621
有的时候页面需要很多不同的表组成的数据，该怎么分页呢。 在查询时 ，每个表查出的数据放入一个list中，然后自己写一个bean，bean里面为你查的几张表的集合。 把查出来的list中的数据放入bean里面对应的集合里面去。   然后 页面上怎么分页呢，就需要纯js写的了。   function goPage(pno,psize){ var itable = document.ge
纯JS分页不用任何控件，简单易懂
12-06
纯手写JS分页，第一次做分页，不用任何控件，简单易懂，尝试分享出来。
纯js实现表格分页
10-16
使用纯JavaScript实现表格分页显示，提供页面跳转功能，包括首页、上一页、下一页、尾页等功能。
纯JS分页
12-09
js分页，让你的数据跟快。不要再等待。这是一个简单的分页代码。
纯js分页(ajax获取数据)
10-14
此工具的目的是实现网页数据分页显示完全脱离服务器，单纯使用js实现，现在功能还比较简单，只能单纯显示数据，有其他需求可以联系探讨。 工具例子使用ajax获取列表数据，当然其他形式也行，最后应该把数据转换成json格式的字符串，详见例子。
纯原生js做分页
苏凯的博客
04-07 1045
纯原生js做分页 建议用 text/x-jquery-tmpl模板做分页查询,自己写纯js太烦了: https://blog.csdn.net/qq_15204179/article/details/88567666 底层数据库是sqlserver 分页SQL语句与mysql是不同的可下...
纯JS实现分页
远望
11-07 632
JSP ${blog.title } JS function goPage(pno, psize) { var blogs = document.getElementById("blogs"); var totalCount = blogs.rows.length; // 总博客数 var pageSize = psize; // 每页显示博客数 v
JS 自己写的分页，比较简单
scanner_new的博客
10-19 4401
前段的分页现在有很多的插件，自己也一直在用，懒得自己写代码实现，这次不让用插件，只能自己实现了，记录一下 效果： HTML代码： &lt;!-- --------------分页-------------- --&gt; &lt;div class="go_page" id="pagination" style='display: none;'&gt; &lt;ul class="pag...
纯js写分页 （算法把我纠结住了）
刘晓飞
03-20 4892
$(function () {     //下一页     $("#nextPage").click(function () {         tableRmove();         var curr = $("#CurrentPage").attr("value");         var newCurr = Number(curr);    //当前页
node.js 如何写分页接口
最新发布
07-27
在 Node.js 中编写分页接口可以通过以下步骤实现： 1. 安装必要的依赖：使用 npm 或者 yarn 命令安装 Express 框架和其他需要的依赖。 2. 创建一个 Express 应用：创建一个新的文件，例如 `app.js`，并在其中导入 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值