AngularJS ui.bootstrap.pagination 分页

来源：互联网发布：电脑透视软件编辑：程序博客网时间：2024/06/05 19:28

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, {                    pageIndex: $scope.currentPage,                    pageSize: 10,                    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);}

0 0