Angular ui.bootstrap.pagination 分页

发布时间：2020-12-17 09:40:24 所属栏目：安全来源：网络整理

导读：1、Html !DOCTYPE htmlhtmlhead meta name="viewport" content="width=device-width" / titleMyPagination/title link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" / script src="~/Scripts/angular.js"/scri

1、Html

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>MyPagination</title>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/ui-bootstrap-tpls-0.13.0.min.js"></script>
    <script>
        var readyDataUrl = '@Url.Content("~/StudentManage/GetPageList")';
        var loadDataUrl = '@Url.Content("~/StudentManage/GetPageList")';
        var app = angular.module('app',['ui.bootstrap']);
        app.controller('ctrl',['$log','$http','$scope',function ($log,$http,$scope) {
            $scope.reportData = [];
            $scope.maxSize = 7;
            $scope.currentPage = 0;
            $scope.totalItems = 0;
            $scope.pageChanged = function () {
                //showLoading("正在查询");
                $http.post(loadDataUrl,{
                    pageIndex: $scope.currentPage,pageSize: 10,name: ""
                })
                 .then(function (result) {
                     $scope.reportData = result.data.Data;
                     $scope.totalItems = result.data.recordTotal;
                 }).catch(function (error) {
                     $log.error('error:' + error);
                 }).finally(function () {
                     //closeLoading();
                 });
            }
            $scope.Inital = function () {
                //showLoading("正在查询");

                $http.post(readyDataUrl,name: ""
                }).then(function (result) {
                    $scope.reportData = result.data.Data;
                    $scope.totalItems = result.data.recordTotal;
                    //closeLoading();
                }).catch(function (error) {
                    $log.error('error:' + error);
                }).finally(function () {

                });
            }
            $scope.Inital();
            $scope.search = function () {
                //showLoading("正在查询");
                $http.post(loadDataUrl,{})
                    .then(function (result) {
                        $scope.reportData = result.data.Data;
                        $scope.totalItems = result.data.recordTotal;
                    }).catch(function (error) {
                        $log.error('error:' + error);
                    }).finally(function () {
                        //closeLoading();
                    });
            }
        }]);
    </script>
</head>
<body>
    <div ng-app="app" ng-controller="ctrl">
        <div class="form-group" id="toolbar">
            <table>
                <tr>
                    <td style="padding-left:10px;">
                        <button type="button" class="btn btn-success btn-sm" id="btnSearch" ng-click="search()">查询</button>
                    </td>
                </tr>
            </table>
            <div class="bootstrap-table">
                <div class="fixed-table-container" style="padding-bottom: 0px;">
                    <div class="table-responsive">
                        <table class="table table-condensed table-hover table-striped">
                            <thead>
                                <tr>
                                    <th><div class="th-inner">序号</div></th>
                                    <th><div class="th-inner">姓名</div></th>
                                    <th><div class="th-inner">电话</div></th>
                                    <th><div class="th-inner">邮箱</div></th>
                                    <th><div class="th-inner">年龄</div></th>
                                    <th><div class="th-inner">国家</div></th>
                                    <th><div class="th-inner">城市</div></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr ng-repeat="o in reportData">
                                    <td><span ng-bind="o.Id"></span></td>
                                    <td><span ng-bind="o.Name"></span></td>
                                    <td><span ng-bind="o.Telephone"></span></td>
                                    <td><span ng-bind="o.Email"></span></td>
                                    <td><span ng-bind="o.Age"></span></td>
                                    <td><span ng-bind="o.Country"></span></td>
                                    <td><span ng-bind="o.City"></span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
      <pagination class="pagination-sm pull-right"
            items-per-page="10"     @*每页最大显示条数的数量。值小于1表明所有项目在一个页上*@
            ng-model="currentPage"
            total-items="totalItems"   @*所有页中的项目总数*@
            max-size="maxSize"      @*限制分页按钮显示的数量大小*@
            ng-change="pageChanged()"  @*点击分页按钮触发的方法，可用于更改不同页面数据*@
            boundary-links="false"    @*是否显示第一个/最后一个按钮*@
            boundary-link-numbers="true" @*是否显示第一个和最后一个页码*@
            rotate="false"        @*是否将当前激活页显示在中间*@
            force-ellipses="true"    @*当总页数大于最大显示页数（max-size）显示省略号按钮*@
            previous-text="?"      @*上一个按钮的文本*@
            next-text="?">        @*下一个按钮的文本*@
      </pagination>
        </div>
    </div>
</body>
</html>

2、Action

[HttpPost]
public JsonResult GetPageList(int pageIndex,int pageSize,string name)
{
    int pageCount = 1;
    int recordTotal = 0;
    int topRecordTotal = 0;
    List<Students> list = new List<Students>();
    try
    {
        list = svc.GetAllStudent();
        recordTotal = list.Count();
        pageCount = (int)Math.Ceiling((decimal)recordTotal / pageSize);
        topRecordTotal = (pageIndex - 1 < 0 ? 0 : pageIndex - 1) * pageSize;
        list = list.Skip(topRecordTotal).Take(pageSize).ToList();
    }
    catch (Exception)
    {
        throw;
    }
    return Json(new
    {
        pageIndex = pageIndex,pageCount = pageCount,recordTotal = recordTotal,Data = list,},JsonRequestBehavior.AllowGet);
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!