zoukankan      html  css  js  c++  java
  • anglarJs分页

    首先在页面引入分页插件

    <script src="../plugins/angularjs/pagination.js"></script>
    <link rel="stylesheet" href="../plugins/angularjs/pagination.css">

    然后再挂载到模块上:

    var app=angular.module('app',['pagination']);

    在表格最底下加入:

    <!-- 分页 -->
    <tm-pagination conf="paginationConf"></tm-pagination>

    这样就完成了,需要配置paginationConf,以及相关js

    /重新加载列表 数据
    $scope.reloadList=function(){
    //切换页码
    $scope.findPage( $scope.paginationConf.currentPage,
    $scope.paginationConf.itemsPerPage);
    }
    //分页控件配置
    $scope.paginationConf = {
    currentPage: 1,
    totalItems: 10,
    itemsPerPage: 10,
    perPageOptions: [10, 20, 30, 40, 50],
    onChange: function(){
    $scope.reloadList();//重新加载
    }
    };
    //分页
    $scope.findPage=function(page,rows){
    $http.get('../brand/findPage.do?page='+page+'&rows='+rows).success(
    function(response){
    $scope.list=response.rows; 
    $scope.paginationConf.totalItems=response.total;//更新总记录数
    } 
    );
    }

    paginationConf 变量各属性的意义:
    currentPage:当前页码
    totalItems:总条数
    itemsPerPage:
    perPageOptions:页码选项
    onChange:更改页面时触发事件

  • 相关阅读:
    游戏方案
    团队介绍
    【面向对象程序设计】作业四
    FIFO与LRU实现(Java)
    spring事务介绍
    微信抢红包算法
    Hibernate Dao映射配置通用接口类反射获取加载calass实例
    股票两次买卖最大收益(java)
    Eclipse安装JD-Eclipse反编译插件看源码
    Java GC调优
  • 原文地址:https://www.cnblogs.com/xiufengchen/p/10368888.html
Copyright © 2011-2022 走看看