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

  • 相关阅读:
    贪婪大陆
    色板游戏
    11/29 NOIP 模拟赛
    USACO4.4 重叠的图像 Frame Up
    CSP2020 题解
    NOIP前板子复习
    关于我
    【洛谷】【搜索+字符串】
    【洛谷】【动态规划/01背包】P2925 [USACO08DEC]干草出售Hay For Sale
    【洛谷】【二分查找】P1102 A−B数对
  • 原文地址:https://www.cnblogs.com/xiufengchen/p/10368888.html
Copyright © 2011-2022 走看看