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:更改页面时触发事件

  • 相关阅读:
    C++中头文件包含的问题
    linux环境变量
    win32进程和线程
    断言
    win32中的常用类型转换
    可变形参
    #define
    CString与char*互相转化
    extern
    手机CPU和GPU厂商
  • 原文地址:https://www.cnblogs.com/xiufengchen/p/10368888.html
Copyright © 2011-2022 走看看