Angularui.bootstrap.pagination分頁

本文實(shí)例為大家分享了Angular 分頁的具體代碼，供大家參考，具體內(nèi)容如下

成都創(chuàng)新互聯(lián)公司是專業(yè)的張家界網(wǎng)站建設(shè)公司，張家界接單;提供網(wǎng)站制作、成都網(wǎng)站制作,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行張家界網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

1、Html

<!DOCTYPE html> 
 
<html> 
<head> 
 <meta name="viewport" content="width=device-width" /> 
 <title>MyPagination</title> 
 <link  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 > 
      <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" > 
     <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" 
      ng-model="currentPage" 
      total-items="totalItems" 
      max-size="7" 
      ng-change="pageChanged()" 
      force-ellipses="true" 
      num-pages="numPages" 
      boundary-link-numbers="true" 
      boundary-links="false" @*是否顯示第一個(gè)/最后一個(gè)按鈕*@ 
      rotate="false" 
      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); 
}

效果圖：

Angular ui.bootstrap.pagination分頁

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

網(wǎng)頁標(biāo)題：Angularui.bootstrap.pagination分頁
轉(zhuǎn)載注明：http://www.rwnh.cn/article36/gpojpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、商城網(wǎng)站、微信公眾號、網(wǎng)站導(dǎo)航、、品牌網(wǎng)站設(shè)計(jì)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

Angularui.bootstrap.pagination分頁