前端js实现分页

最新推荐文章于 2025-03-03 17:21:59 发布
最新推荐文章于 2025-03-03 17:21:59 发布
阅读量515 收藏
点赞数
分类专栏： 前端 文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Start1234567/article/details/105295150
版权
这是一个关于考试成绩管理系统的网页应用，使用了HTML、CSS和JavaScript进行前端开发，并通过Ajax与后端进行交互，实现了成绩数据的分页展示和动态加载。系统包括成绩列表、分页导航和成绩操作等功能。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!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>
前端实战：Javascript 实现分页效果
前端视界的博客
05-07 706
在前端开发中，当我们需要展示大量数据时，一次性将所有数据呈现给用户会导致页面加载缓慢，用户体验不佳。分页效果能够将数据分成多个页面，用户可以根据需要切换页面查看数据，有效提升了页面的加载速度和用户体验。本文的目的是详细介绍如何使用 Javascript 实现分页效果，范围涵盖从基础概念的讲解到实际项目的开发，以及相关技术的拓展。本文将首先介绍分页效果的核心概念和相关联系，包括分页的基本原理和架构。接着详细讲解实现分页效果的核心算法原理和具体操作步骤，并结合 Python 代码进行阐述。
js分页实现，前端实现
qq_43682438的博客
11-13 9842
js分页实现，前端实现
js前端实现分页
m0_53592673的博客
01-18 597
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 前端分页
weixin_43061221的博客
10-15 245
js 前端分页处理 /** * @description 前端分页 * @author * @param {Number} pageNo 页码 * @param {Number} pageSize 页大小 * @param {Array} array 分页数据源 */ const pagination = (pageNo, pageSize,array)=>{ var offset = (pageNo -1
纯前端分页（JS实现前端分页）
最新发布
g_mx123的博客
03-03 416
/定义变量tableData:[],//表格展示数据tableDataTotal:0,//总数据条数allTableData:[],//总数据备份currentPageNumber:1,//当前页totalPageNumer:0,//可分多少页，总页数tablePageSize:50,//每50一页startData:0,//当前页的起始点endData:50,//当前页的结束点currentPageData:[],//当前页被切割的数据。
前端JS简单实现分页功能
luweimo的博客
02-02 1805
【代码】前端JS简单实现分页功能。
纯JS前端分页方法（JS分页）
最爱喝怡宝的博客
05-15 3215
如后台传回的数据条数非常多，达到几千条甚至上万条，但是后台又不方便分页传回数据，这个时候就只能前端先获取所有数据保存下来，然后前端本地进行分页并渲染显示。1、JS分页函数：开发过程中，分页功能一般是后台提供接口，前端只要传page（当前页码）和pageSize（每页最大显示条数）及对应的其他查询条件，就可以返回所需分页显示的数据。原创博客禁止抄袭，原文地址:https://www.cnblogs.com/xiao-pengyou/只需要传入对应参数就可以返回带有对应分页属性的对象，用于前端界面展示。
纯JS前端实现分页代码
11-25
在这个场景中，我们讨论的是如何使用纯JavaScript实现前端分页，不依赖任何第三方库或插件。下面将详细解释实现这个功能的关键步骤和涉及的技术。 1. **HTML结构**： 分页组件通常包含“首页”、“上一页”、...
javascript实现前端分页功能
01-22
前言：今天给大家带来的是前端数据的分页功能，供大家参考，具体内容如下 先上一波效果图展示： 直接上代码：这里使用的是JavaScript来实现 关于代码详解都以注释的方式写在JavaScript里的 HTML： <!DOCTYPE ...
前端打印时js分页实现共几页和第几页
08-06
本文将详细介绍如何使用JavaScript（js）在前端实现分页功能，包括显示总页数、当前页数，以及触底自动换页，并在每页表头增加固定部分，如金额大写转换和当前时间获取。 一、分页基础 1. 数据分块：分页的核心是...
javascript实现前端分页效果
01-19
本文实例为大家分享了javascript实现前端分页效果的具体代码，供大家参考，具体内容如下 需求：实现分页请求表格数据，ajax暂时没写，只写了分页的功能。 效果图： 当页数是第一页的时候，首页和向前那个按钮处于...
JS前端分页条，支持前端，后台分页
12-13
JQ编写的一个简单分页条，样式，页面，JS分离，改写代码简单，使用方便。
JS实现前端分页
默存
05-19 3092
一、HTML部分 <!doctype html> <html> <head> <meta charset='utf-8'> <script src="js/jquery.js"></script> <style type="text/css"> a{text-decoration: none;}...
前端js数据分页处理
weixin_51697449的博客
10-20 2799
大部分时候分页处理后端会处理好，前端直接拿到数据渲染就可以。 但是但是~有时候也会遇到个别不给你处理分页的后端… 这个时候就需要我们拿到数据后自己去吧数据做分页处理，然后再渲染了 代码如下： let data=[{//模拟数据（假设这就是从后台请求过来的数据） name: "沈阳市", value: ["123.429092", "41.796768"], }, { name: "长春市", value: ["125.324501", "43.886841"],
JS前端分页
weixin_42114911的博客
05-08 369
因项目需求 需要前端一个纯js分页  上网找了好多例子，终于实现该功能 以下直接上代码：html： &lt;input type="hidden" id="pageIndex" value="${pageIndex}"&gt; &lt;input type="hidden" id="pageSize" value="${pageSize}"&gt;
Js实现前端分页器
xiaoming4965的博客
10-07 467
Js实现前端分页器
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值