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

  • 相关阅读:
    Discuz! X3 全新安装图文教程
    https://blog.csdn.net/doegoo/article/details/50749817
    docker 网络
    Docker的网络类型和固定IP设置
    docker lamp
    MongoDB分片搭建
    iptables原理及使用教程
    VNC服务安装、配置与使用
    ssh免密码登陆
    nmap
  • 原文地址:https://www.cnblogs.com/xiufengchen/p/10368888.html
Copyright © 2011-2022 走看看