AngularJS分页插件

1.
angular.module(‘app‘,[‘mePagination‘])
  .controller(‘myController‘,[‘$scope‘,function($scope){
    $scope.myPage={
      currentPage:1,//访问第几页数据,从1开始
      totalItems:0,//数据库中总共有多少条数据
      itemsPerPage: 30,//默认每页展示多少条数据,可更改
      pagesLength: 15,
      perPageOptions: [10, 20, 30, 40, 50,60]//可选择的每页展示多少条数据
    };

//监测当页码。总数据,每页展示数据个数变化时,重新加载数据
    $scope.$watch(function ()
      return $scope.myPage.itemsPerPage+‘ ‘+$scope.myPage.currentPage+‘ ‘+ $scope.myPage.totalItems;
    },getList);

    function getList(){
    //获取列表需要时,将页码重置为1
      $scope.myPage.currentPage=myPage.pageNub;

    //传给服务器时,页码从0开始
    $http.get(host_name+url,{params:{"page":$scope.myPage.currentPage- 1,"limit":$scope.myPage.itemsPerPage,‘}})
  .    success(function(d){
        $scope.list= d.data.result;
        $scope.myPage.totalItems=d.data.total;//当获取总数据后,修改默认值

      }).error(function(){
        console.log(‘error...‘);
      })
    }

  }])

在页面中引入自己的css与js文件:

<link rel="stylesheet" href="my-pagination.css"/>
<script type="text/javascript" src="my-pagination.js"></script>

<div ng-if="myPage.totalItems" my-pagination pg="myPage"></div>

pg属性不能改,双向数据绑定的

下载地址:http://pan.baidu.com/s/1slb65TN

时间: 2024-10-26 20:33:49

AngularJS分页插件的相关文章

AngularJS自定义指令详解(有分页插件代码)

前言 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 通过 .directive() 函数来添加自定义的指令. 调用自定义指令时,需要在HTMl 元素上添加自定义指令名. 自定义指令命名规则:使用驼峰命名法来命名,即除第一个单词外的首字母需大写.如: myDirective. 在html页面调用该指令时需要以 - 分割,如: my-directive.示例代码: <body ng-app="myApp"> <my-directive><

angularJS前端分页插件

首先在项目中引入 分页插件的 js 和 css: 在html页面引入 相关js 和 css: 在控制器中引入分页插件中定义的 module[可以打开pagination.js查看,可以看到 其实,在插件里面,它定义了一个单独的 module,所以我们在控制器中使用分页插件时,要先注入 这个 module ] 然后我们就可以在想要出现分页控件的位置,加上一个标签: 加上这个标签,就会在这里出现分页,注意,它有个属性 conf 这里定义的名字是 paginationConf,这个属性是个对象,它可以

原生js版分页插件

之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,特此记录下来.如有不足之处,欢迎指出. 本插件可以实现的功能: 1. 可初始化每页条数,以及重新选择每页条数 2.自定义首末页.上下页按钮的显示内容(是:<<.  >>.  < .  >    还是:首页.末页.上一页.下一页) 3.设置当前页在一定范围时,是否显示省略号按钮 4.自定义当前页按钮与省略号按钮之间显示的数字按钮的个

品优购商城项目(二)mybatis分页插件

品优购商城项目第二天,使用mybatis分页插件实现分页. 一.引用mybatis分页插件 SqlMapConfig.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config

Spring Boot系列教程八: Mybatis使用分页插件PageHelper

一.前言 上篇博客中介绍了spring boot集成mybatis的方法,基于上篇文章这里主要介绍如何使用分页插件PageHelper.在MyBatis中提供了拦截器接口,我们可以使用PageHelp最为一个插件装入到SqlSessionFactory,实现拦截器功能. 二.实现 pom.xml文件中添加依赖包 1 <dependency> 2 <groupId>com.github.pagehelper</groupId> 3 <artifactId>pa

JQueryPagination分页插件,ajax从struts请求数据

2017-07-16 学完了struts,做了个关于分页的小例子,用到了JQuery分页插件Pagination,先贴下插件下载地址 http://www.jq22.com/jquery-info13734 插件作者对于参数讲解的不够详细,琢磨了半天才明白怎么用,不多说,直接代码 1.客户端(jsp页面) 1 /*这些css为了控制生成的数据和分页的li标签的位置*/ 2 a { 3 text-decoration:none; 4 color:black; 5 font-weight: bold

github分页插件的业务逻辑

github分页插件查询的业务逻辑: controller层: query封装前端传来的数据 Service层: 1.构建一个PageBounds:当前页(page).查询多少条(pageSize).排序 2.调用dao的查询方法:查询条件,分页参数对象:返回一个PageList或者List 3.service接收到dao的查询结果(结果集.分页对象paginator) 返回的数据: 根据EsasyUI,必须返回rows 和 total,rows为dao曾返回的结果列表,total为分页对象中的

Spring Boot集成MyBatis与分页插件

Maven依赖: <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper</artifactId> <version>4.1.6</version> </dependency> MybatisConfig.java: import java.util.Properties; import javax.sql.Dat

Mybatis分页插件

Mybatis分页插件 - PageHelper说明 如果你也在用Mybatis,建议尝试该分页插件,这个一定是最方便使用的分页插件. 该插件目前支持Oracle,Mysql,MariaDB,SQLite,Hsqldb,PostgreSQL六种数据库分页. 点击提交BUG 版本说明 最新版本为3.7.5 PageInfo中的judgePageBoudary方法修改: isLastPage = pageNum == pages && pageNum != 1; //改为 isLastPage