前端js实现分页

最新推荐文章于 2024-05-10 22:28:18 发布
最新推荐文章于 2024-05-10 22:28:18 发布
阅读量451 收藏
点赞数
分类专栏： 前端 文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Start1234567/article/details/105295150
版权 
<!doctype html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>考试成绩</title>
  <meta name="description" content="考试成绩">
  <meta name="keywords" content="index">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="renderer" content="webkit">
  
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="icon" type="image/png" href="assets/i/favicon.png">
  <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
  <meta name="apple-mobile-web-app-title" content="Amaze UI" />
  <link rel="stylesheet" href="assets/css/amazeui.min.css"/>
  <link rel="stylesheet" href="assets/css/admin.css">
  <script src="assets/js/jquery.min.js"></script> 
  <script src="assets/js/amazeui.min.js"></script>
  <script src="assets/js/app.js"></script>

<script type="text/javascript">
       window.totalPage; //总页数
       window.currentPage = 1;  //当前页码
       window.pageNumber = 1;  //当前页（给后端）
       $(function(){
         //首页
         $("#firstPage").click(function(){
           $(".currentPage").attr("value", 1);
           fenye(1);
         })
         //上一页
         $("#beforePage").click(function(){
           pageNumber = parseInt($(".currentPage").attr("value"));
           if (pageNumber > 1) {
             $(".currentPage").attr("value", pageNumber - 1);
             fenye(pageNumber-1);
           }
           else {
             $(".beforePage").attr("disabled", false)
           }

         })
         //下一页
         $("#nextPage").click(function(){
           pageNumber = parseInt($(".currentPage").attr("value"));
           if (pageNumber < totalPage) {
             $(".currentPage").attr("value", pageNumber + 1);
             fenye(pageNumber+1);
           }
           else {
             $(".nextPage").attr("disabled", false)
           }

         })
         //尾页
         $("#lastPage").click(function(){

           $(".currentPage").attr("value", totalPage);
           pageNumber = parseInt($(".currentPage").attr("value"));
           fenye(pageNumber);
         })


         var tdata={
           "pageNumber": pageNumber
         }
		 $.ajax({
		  	type:"post",
		  	url:"http://localhost:8085/examin/select",
		  	beforeSend: function (XMLHttpRequest) {                   XMLHttpRequest.setRequestHeader("token", sessionStorage.getItem('user_token'));
                },
		  	data:JSON.stringify(tdata),
            contentType:"application/json;charset=utf-8",
		  	success: function(data){
		        //方法中传入的参数data为后台获取的数据
                totalPage = data.pages;
                $(".totalPage").attr("value",totalPage);
		        for(i in data.data) //data.data指的是数组，数组里是8个对象，i为数组的索引
		        {
		            var tr;
		           tr='<td>'+data.data[i].name+'</td>'+/*'<td>'+data.data[i].id+'</td>'+*/
	                '<td>'+data.data[i].sub01+'</td>'+'<td>'+data.data[i].subMeg01+'</td>'+
	                '<td>'+data.data[i].sub02+'</td>'+'<td>'+data.data[i].subMeg02+'</td>'+
	                '<td>'+data.data[i].sub03+'</td>'+'<td>'+data.data[i].subMeg03+'</td>'+
	                '<td>'+data.data[i].sub04+'</td>'+'<td>'+data.data[i].subMeg04+'</td>'+   
	                '<td>'+'<button class="am-btn am-btn-default am-btn-xs am-text-danger" οnclick="DeleteById('+data.data[i].id+')"><span class="am-icon-trash-o"></span>删除</button>'+'</td>';
	                 tr=tr.replace(/null/g,"");   
	                 $("#tablejd").append('<tr>'+tr+'</tr>');
		        }   
		     }		  	
		 });
   });
</script>

  <!-- 自定义函数 分页 -->
  <script type="text/javascript">
    function fenye(pageNumber){
      var tdata={
        "pageNumber": pageNumber
      }
      $.ajax({
        type:"post",
        url:"http://localhost:8085/examin/select",
        beforeSend: function (XMLHttpRequest) {
          XMLHttpRequest.setRequestHeader("token", sessionStorage.getItem('user_token'));
        },
        data:JSON.stringify(tdata),
        contentType:"application/json;charset=utf-8",
        success: function(data){
          //方法中传入的参数data为后台获取的数据
          $("#tablejd  tr:not(:first)").empty("");
          for(i in data.data) //data.data指的是数组，数组里是8个对象，i为数组的索引
          {
            var tr;
            tr='<td>'+data.data[i].name+'</td>'+/*'<td>'+data.data[i].id+'</td>'+*/
                    '<td>'+data.data[i].sub01+'</td>'+'<td>'+data.data[i].subMeg01+'</td>'+
                    '<td>'+data.data[i].sub02+'</td>'+'<td>'+data.data[i].subMeg02+'</td>'+
                    '<td>'+data.data[i].sub03+'</td>'+'<td>'+data.data[i].subMeg03+'</td>'+
                    '<td>'+data.data[i].sub04+'</td>'+'<td>'+data.data[i].subMeg04+'</td>'+
                    '<td>'+'<button class="am-btn am-btn-default am-btn-xs am-text-danger" οnclick="DeleteById('+data.data[i].id+')"><span class="am-icon-trash-o"></span>删除</button>'+'</td>';
            tr=tr.replace(/null/g,"");
            $("#tablejd").append('<tr>'+tr+'</tr>');
          }
        }
      });
    }
  </script>
</head>

<body>
<header class="headerpage"></header>

<div class="am-cf admin-main"> 
  <!--菜单栏-->
  <div class="navigation"></div>


    <div id="fade" class="am-g">
      <div class="am-u-sm-12">
      
        <table id="tablejd" class="am-table am-table-bd am-table-striped admin-content-table">
          <thead>
          <tr>
            <th>姓名</th><th>科一</th><th>评价</th>
            <th>科二</th><th>评价</th><th>科三</th><th>评价</th>
            <th>科四</th><th>评价</th><th>操作</th>
          </tr>
          </thead>
         
        </table>
      
      </div>
    </div>

    <div class="paging" style="float:right; margin-right:80px;">
      <table>
        <tr class="page-font">
          <td width=""><a style="cursor: pointer"  width="24px" height="25px" id="firstPage" οnclick="page_click(this)" />首页</a></td>
          <td>&nbsp;<a style="cursor: pointer" width="27px" height="22px" id="beforePage" οnclick="page_click(this)" />上一页</a></td>
          <td>&nbsp;第<input style="width:40px;height:20px" type="text"  class="currentPage" value="1" readonly="readonly">页</td>
          <td>&nbsp;共<input style="width:40px;height:20px" type="text" class="totalPage" value="1" readonly="readonly">页</td>
          <td>&nbsp;<a style="cursor: pointer"  width="27px" height="26px" id="nextPage" οnclick="page_click(this)" />下一页</a></td>
          <td>&nbsp;<a style="cursor: pointer"  width="27px" height="24px" id="lastPage" οnclick="page_click(this)" />尾页</a></td>
        </tr>
      </table>
    </div>    
</div>
</body>
</html>
偷偷写博客
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js分页实现，前端实现
qq_43682438的博客
11-13 9724
js分页实现，前端实现
js前端实现分页
m0_53592673的博客
01-18 544
js前端实现分页 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> &lt
纯JS前端分页方法（JS分页）
最爱喝怡宝的博客
05-15 2455
如后台传回的数据条数非常多，达到几千条甚至上万条，但是后台又不方便分页传回数据，这个时候就只能前端先获取所有数据保存下来，然后前端本地进行分页并渲染显示。1、JS分页函数：开发过程中，分页功能一般是后台提供接口，前端只要传page（当前页码）和pageSize（每页最大显示条数）及对应的其他查询条件，就可以返回所需分页显示的数据。原创博客禁止抄袭，原文地址:https://www.cnblogs.com/xiao-pengyou/只需要传入对应参数就可以返回带有对应分页属性的对象，用于前端界面展示。
前端JS简单实现分页功能
luweimo的博客
02-02 1261
【代码】前端JS简单实现分页功能。
【JavaScript】JS实用案例分享：动态生成分页组件 通过按键实现移动控制_动态分页按钮(1)
最新发布
2401_84159813的博客
05-10 399
本篇文章所有示例来自于，这些都是前端开发中常用的功能，借此记录一下刷题过程，巩固基础！
前端实现分页
qq_45136544的博客
04-23 8368
前端分页 文章目录前端分页前言一、后台的传入数据二、前端页面准备步骤1.准备一个div2.在上方引入jquery.js文件3.js代码总结 前言 当后台通过写查询得到多条数据时，不在使用数据库分页，直接返回查询的全部数据，在前台直接通过前端js进行分页处理： 一、后台的传入数据 示例： List list = forderService.selectList(); model.addAttribute(“list”, list); 二、前端页面准备步骤 1.准备一个div 在这个div里面会放入一个ta
Js实现前端分页器
xiaoming4965的博客
10-07 378
Js实现前端分页器
纯JS前端实现分页代码
11-25
在这个场景中，我们讨论的是如何使用纯JavaScript实现前端分页，不依赖任何第三方库或插件。下面将详细解释实现这个功能的关键步骤和涉及的技术。 1. **HTML结构**： 分页组件通常包含“首页”、“上一页”、...
javascript实现前端分页功能
01-22
前言：今天给大家带来的是前端数据的分页功能，供大家参考，具体内容如下 先上一波效果图展示： 直接上代码：这里使用的是JavaScript来实现 关于代码详解都以注释的方式写在JavaScript里的 HTML： <!DOCTYPE ...
js实现前端分页页码管理
11-27
用JS实现前端分页页码管理，可以很美观的区分页码显示（这也是参考大多数网站的分页页码展示），能够有很好的用户体验，这也是有业务需要就写了一下，还是新手，经验不足，欢迎指出批评！ 首先先看效果图： 这是初始...
javascript实现前端分页效果
01-19
本文实例为大家分享了javascript实现前端分页效果的具体代码，供大家参考，具体内容如下 需求：实现分页请求表格数据，ajax暂时没写，只写了分页的功能。 效果图： 当页数是第一页的时候，首页和向前那个按钮处于...
JS前端分页条，支持前端，后台分页
12-13
JQ编写的一个简单分页条，样式，页面，JS分离，改写代码简单，使用方便。
前端js处理数据分页
weixin_45385944的博客
12-18 572
在写项目的过程中有时候需要前端处理数据分页，思路就是先拿到 数据 （数组）， 分页参数（第几页第几条），然后先算出 开始截取下标位置和末尾截取下标位置，；利用数组Array的slice方法得到想要的数组。
JS实现前端分页
默存
05-19 3009
一、HTML部分 <!doctype html> <html> <head> <meta charset='utf-8'> <script src="js/jquery.js"></script> <style type="text/css"> a{text-decoration: none;}...
js实现分页功能
乔路非
01-29 6491
分页功能： 上一页(判断是否是首页) 下一页(判断是否是尾页) 改变页容量(判断是否>0) 改变当前页码(判断是否存在页码) 去往首页 去往尾页 参数： 页容量、当前页码、总数、所有页码 class Pagination{ constructor(total, pageSize = 10,currentPage = 1) { this.pageSize = pageSize > 0 ? pageSize : 10 // 页容量 this.curr.
js前端计算分页
钱端猿的博客
04-10 413
这个函数接受总数据量、当前页码和每页条目数作为参数，计算并返回相应的分页信息。在实际应用中，你可以根据这些信息来显示分页控件，并请求对应页码的数据。要在前端计算分页，你需要知道总数据量、每页显示的条目数和当前页码。
【js/vue笔记】怎么实现前端分页？（纯js前端分页方法以及vue的实现方法）
kikikiuu的博客
10-10 2140
纯js前端分页方法以及vue的实现方法 .
javascript写一个页码器，包括切换页码、分页、上一页/下一页、省略页码等功能
sxww_zyt的博客
02-22 2116
当表格数据太多时，通常需要做成分页。由于项目要求，使用原生js实现一个页码器，满足常规要求：切换页码、分页、上一页/下一页、页码超出时显示省略号，点击省略号往前/后显示几个隐藏的页码。
js 实现简单分页导航栏
Wali_java的博客
07-26 3011
最终的效果:  1. 分页需要的几个重要参数: 总记录条数: totalCount (查数据库) 每页记录数: pageSize  (自己设置) 总页数: totalPageNum  (根据上面的参数计算)  当前页: currentPageNum (前台传入) 当前页要显示的内容 : List&lt;PageInfo&gt; (查数据库: page...
JavaScript实现前端分页功能详解与示例
本文档详细介绍了如何使用JavaScript实现前端分页功能。在前端开发中，分页是一种常见的需求，尤其是在处理大量数据展示时，以提高用户体验。通过这个文档，开发者可以学习到如何结合HTML、CSS和JavaScript来构建一...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值