zoukankan      html  css  js  c++  java
  • AngularJS Boostrap Pagination Sample

    首先,样式是这样的

    image

    首先,Service端是Webapi REST JSON格式

    第二,我们建立一个Wrapper Class,这里你也可以定义一个Generic<T>,作为示例,我们这里直接使用List<Employee>

    image

    image

    后端分页使用Entity Framework,这里呢,pageSize我们默认为5,

    image

    示例的JSON结果

    image

    然后我们要引用两个AngularJS,一个是AngularJS本身,一个是AngularJS Boostrap

    PM> Install-Package angularjs

    PM> Install-Package Angular.UI.Bootstrap

    image

    剩下的就是代码了

    <h3>This is done by AngularJS</h3>
    <ul>
    
        <script>
            angular.module('myApp', ['ui.bootstrap']);
           
            function pagerCtrl($scope, $http) {
                $scope.maxSize = 5;
                $scope.bigCurrentPage = 1;
                $scope.setPage = function (pageNo) {
                    $scope.bigCurrentPage = pageNo;
                };
                $scope.$watch(
                    "bigCurrentPage",
                    function(newValue, oldvalue) {
                        doPaging(newValue);
                      
                    }
                );
                $scope.init = function (pageIndex) {
                    doPaging(pageIndex);
                };
                function doPaging(pageIndex) {
                    var url = "/api/employee/page/" + pageIndex;
                    $http.get(url).success(function (data) {
                        $scope.employeeList = data;
                        var number = new Number(data.TotalCount);
                        //alert(number);
                        $scope.bigTotalItems = number;
                    });
                }
            }
    
        </script>
    
    </ul>
    <div class="container" ng-app="myApp" ng-controller="pagerCtrl">
        <table data-ng-init="init(1)">
            <tr>
                <td>First Name</td>
                <td>Last Name</td>
            </tr>
            <tr ng-repeat="item in employeeList.Employees">
                <td>{{item.FirstName}}</td>
                <td>{{item.LastName}}</td>
            </tr>
        </table>
        <pagination total-items="bigTotalItems" items-per-page="5" page="bigCurrentPage"  class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination>
        <pre>Page: {{bigCurrentPage}} / {{numPages}}</pre>
    </div>
  • 相关阅读:
    socket编程原理
    配置Symbian WINS Emulator
    mysql 的乱码解决方法
    深入剖析关于JSP和Servlet对中文的处理
    一个分众传媒业务员的销售日记
    中移动第四季度SP评级结果出炉 A级企业仅5家
    基于socket的聊天室实现原理
    看Linux内核源码 练内力必备技能
    Dell要收购AMD?
    同步执行其他程序(dos命令)
  • 原文地址:https://www.cnblogs.com/ruijiang21/p/3574644.html
Copyright © 2011-2022 走看看