angularjs表格分页功能详解

2024-12-01 08:58:18

接上一次，这次主要介绍表格分页功能，由于项目需要这个案例是关于前端分页的方式，现在很少会这么用了，但如有需要可以参考其中的思路

html：

1.通过UL来展示页标，其中每个页标的li是通过异步加载从获取到不同的表格数据来动态生成的。

 <div class="pagination">
      <ul style="float:right">
        <li id="previous"><a href="">上一页</a></li>
        <li><!--用于页标的显示 -->
          <ul id="page_num_all">
          </ul>
        </li>
        <li id="next"><a href="" style="border:1px solid #ddd;float:right">下一页</a></li>
      </ul>
      <span>
        当前为第<span class="num" id="current_page"></span>页，总共<span class="num" id="page_all"></span>页
      </span>
    </div>

js：

1.首先需要设置每页想要显示的条数，通过选取页面元素来确定本次生成的总条数，以及当前所在的页数（为跳转做准备）

2.如果总页数大于生成的当前页数，则继续生成下一页直到完毕后，将角标添加到页面中

3.将所有的表格数据隐藏，只显示一开始设置的第一页中的5条

4.跳转页面功能，tab_page（）通过传入的index（页数）*显示的条数来确定截取tr的开始位置和结束位置，然后将所有的tr隐藏，只显示该范围内的tr（display：“”）；

5.上一页下一页和跳转功能，获取当前页的数字，注意判断是否为第一或最后一页，将其作为index传入跳转功能中即可

function table_page(){
      var show_page=5;//每页显示的条数
      var page_all=$("#page").children().size();//总条数
      var current_page=1;//当前页
//    console.log(page_all);
      var page_num=Math.ceil(page_all/show_page);//总页数
      var current_num=0;//用于生成页标的计数器
      var li="";//页标元素
      while(page_num>current_num){//循环生成页标元素
        li+='<li class="page_num"><a href="javasctip:(0)">'+(current_num+1)+'</a></li>';
        current_num++;
      }
      $("#page_num_all").html(li);//添加页标到页面
      $('#page tr').css('display', 'none');//设置隐藏
      $('#page tr').slice(0, show_page).css('display', '');//设置显示
      $("#current_page").html(" "+current_page+" ");//显示当前页
      $("#page_all").html(" "+page_num+" ");//显示总页数
      $("#previous").click(function(){//上一页
        var new_page=parseInt($("#current_page").text())-1;
        if(new_page>0){
          $("#current_page").html(" "+new_page+" ");
          tab_page(new_page);
        }
      });
      $("#next").click(function(){//下一页
        var new_page=parseInt($("#current_page").text())+1;//当前页标
        if(new_page<=page_num){//判断是否为最后或第一页
          $("#current_page").html(" "+new_page+" ");
          tab_page(new_page);
        }
      });
      $(".page_num").click(function(){//页标跳转
        var new_page=parseInt($(this).text());
        tab_page(new_page);
      });
      function tab_page(index){//切换对应页标的页面
        var start=(index-1)*show_page;//开始截取的页标
        var end=start+show_page;//截取个数
        $('#page').children().css('display', 'none').slice(start, end).css('display', '');
        current_page=index;
        $("#current_page").html(" "+current_page+" ");
      }
    }
table_page()；

以上就是表格的前端分页方法和页数，页标等跳转方式的方法，请结合第一章中的数据测试。

AngularJS实现表格的增删改查（仅限前端）

用AngularJS实现对表格的增删改查(仅限前端),具体代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>实现表格的增删改查</title> <meta http-equiv="keywords" content="keyword1,keyword2,keywo
AngularJS中的Directive自定义一个表格

先给大家说下表格的需求: ● 表格结构 <table> <thead> <tr> <th>Name</th> <th>Street</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>></td> <td>></td> <td>>
妙用Angularjs实现表格按指定列排序

使用AngularJS的过滤器,可以很容易的实现在表格中,点击某一列标题进行排序,实现过程如下: html代码: <table class="table table-border" ng-app="myapp" ng-controller="orderByCtrl"> <thead> <tr> <th>inx</th> <th ng-click="col='name';d
angularjs表格ng-table使用备忘录

项目中用到angularjs的表格ng-table,功能相当强大,像搜索.排序.checkbox.分页.每页表格显示数目等都有.API,demo什么的也只能参考官网了.这里做个备忘,哪天肯定还会用到. HTML: <!DOCTYPE html> <html> <meta charset="utf-8"/> <head> <script data-require="angular.js@*" data-semver
AngularJS表格添加序号的方法

本文实例讲述了AngularJS表格添加序号的方法.分享给大家供大家参考,具体如下: 1.问题背景 AngularJS表格需要序号,可以利用$index来作为序号 2.实现实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之表格序号</title> <link rel="stylesheet" h
AngularJS表格样式简单设置方法示例

本文实例讲述了AngularJS表格样式简单设置方法.分享给大家供大家参考,具体如下: 1.问题背景 AngularJS表格table,利用样式设置表格间隔色 2.实现源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之表格设置样式</title> <link rel="stylesheet" h
AngularJS中table表格基本操作示例

本文实例讲述了AngularJS表格基本操作.分享给大家供大家参考,具体如下: css内容: table, td { border: 1px solid grey; border-collapse: collapse; padding: 5px; } HTML正文: <body ng-app=""> <div ng-init="persons=[{'name':'zhangsan','age':'20'}, {'name':'lisi','age':'19'
详解AngularJS中的表格使用

表格数据本质上通常是重复的.ng-repeat指令,可以用来方便地绘制表格.下面的示例说明使用ng-repeat指令来绘制表格. <table> <tr> <th>Name</th> <th>Marks</th> </tr> <tr ng-repeat="subject in student.subjects"> <td>{{ subject.name }}</td>
如何用angularjs制作一个完整的表格

由于本人也是边学边写,因此整理的比较乱,下面放出我例子的完整代码,方便大家交流测试,如有问题欢迎评论首先,表格采用的是BootStrap样式编辑的,主要使用的是angularjs,为了方便也有jQuery的方法,在测试时需自行引入bootstrap,angularjs和jq的文件. 整体代码预览: HTML: <!DOCTYPE html> <html lang="en" ng-app="myModule"> <head> //
angularjs表格分页功能详解

接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路 html: 1.通过UL来展示页标,其中每个页标的li是通过异步加载从获取到不同的表格数据来动态生成的. <div class="pagination"> <ul style="float:right"> <li id="previous"><a href=""
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】

本文实例讲述了PHP+Ajax实现的无刷新分页功能.分享给大家供大家参考,具体如下: 注:本文中使用到的一些类库在前面文章都能找到源代码,我会在文中指明链接所在,为了缩短文章篇幅,由此带来的阅读不便,敬请谅解. 本文讲解 Ajax 实现无刷新分页.实现原理.代码展示.代码下载. 这里需要说明一些知识: 1.Ajax 无刷新页面的好处:提供良好的客户体验,通过 Ajax 在后台从数据库中取得数据并展示,取缔了等待加载页面而出现的空白状态: 2.那么,Ajax 无刷新页面是运行在动态页面(.php)
Bootstrap表格和栅格分页实例详解

拼接table请将以下代码直接运行:换下 bootstrap.css jquery-1.12.3.min.js bootstrap-paginator.min.js" <!DOCTYPE html> <html> <head lang="zh-cn"> <title>产品列表</title> <meta charset="utf-" /> <meta http-equiv=&qu
SpringBoot整合PageHelper实现分页查询功能详解

前言本文介绍的是MyBatis 分页插件 PageHelper,如果你也在用 MyBatis,建议尝试该分页插件,这一定是最方便使用的分页插件.分页插件支持任何复杂的单表.多表分页. 官方文档:https://pagehelper.github.io/ 项目地址:https://github.com/pagehelper/Mybatis-PageHelper 使用方法导入依赖在中央仓库sonatype中搜索 pageHelper,找到 pagehelper-spring-boot-star
Android性能优化之RecyclerView分页加载组件功能详解

目录引言 1 分页加载组件 1.1 功能定制 1.2 手写分页列表 1.3 生命周期管理 2 github 引言在Android应用中,列表有着举足轻重的地位,几乎所有的应用都有列表的身影,但是对于列表的交互体验一直是一个大问题.在性能比较好的设备上,列表滑动几乎看不出任何卡顿,但是放在低端机上,卡顿会比较明显,而且列表中经常会伴随图片的加载,卡顿会更加严重,因此本章从手写分页加载组件入手,并对列表卡顿做出对应的优化 1 分页加载组件为什么要分页加载,通常列表数据存储在服务端会超过100条
AngularJS 控制器 controller的详解

AngularJS 控制器 controller的详解一.控制器概念控制器在Angualrjs 中的作用是增强视图,并且是一个函数,用来向视图的作用域中添加额外的功能.我们用它来给作用域对象设置初始状态,并添加自定义行为. 当我们在页面上创建一个新的控制器是,angularjs会生成并传递一个新的$scope给这个控制器.可以在这个控制器里初始化$scope,由于angularjs会负责处理控制器的实例化过程. 列子: var app=angular.module("myApp",
Angularjs自定义指令Directive详解

今天学习angularjs自定义指令Directive. Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Admin". 在网页上放一个文本框和一个铵钮: <form id="form1" name="form1" ng-app="app" ng-controller="ctrl" novalidate> <i
vue实现简单表格组件实例详解

本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解组件就是装配页面的零件,比如一辆车有大大小小许多零件组成,那么同样的一个页面,也是有许多组件构成的比如说头部组件按钮组件等等,vue三大核心组件路由状态管理,路由控制页面的渲染,页面由组件组成,数据有vuex进行管理和改变.下面我会以一个简单的案例来说第一步:构建一个简单的vue项目,老规矩
Vue2.0+ElementUI+PageHelper实现的表格分页功能

前言最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即前端分页)的做法是将数据全部缓存,然后分页显示,这样在数据量较大的时候会对浏览器的速度产生影响,所以考虑之后我使用了后端分页,后端分页的特点是对当前页的数据进行请求,每次当页码变化或者每页数据量变化的时候,就重新发一次请求.这里所用到的技术主要有以下几种: Spring SpringMVC Mybatis VueJS 2.0 ElementUI 后端数据库用的是Mys
一文搞懂Python中pandas透视表pivot_table功能详解

目录一.概述 1.1 什么是透视表? 1.2 为什么要使用pivot_table? 二.如何使用pivot_table 2.1 读取数据 2.2Index 2.3Values 2.4Aggfunc 2.5Columns 一文看懂pandas的透视表pivot_table 一.概述 1.1 什么是透视表? 透视表是一种可以对数据动态排布并且分类汇总的表格格式.或许大多数人都在Excel使用过数据透视表,也体会到它的强大功能,而在pandas中它被称作pivot_table. 1.2 为什么要使用

angularjs表格分页功能详解

相关推荐

随机推荐