Bagaimana cara melakukan paging di AngularJS?


254

Saya memiliki dataset sekitar 1000 item dalam memori dan saya mencoba membuat pager untuk dataset ini, tetapi saya tidak yakin bagaimana cara melakukannya.

Saya menggunakan fungsi filter khusus untuk memfilter hasil, dan itu berfungsi dengan baik, tapi entah bagaimana saya perlu mengeluarkan jumlah halaman.

Ada petunjuk?


Jawaban:


285

Bootstrap UI Sudut - Petunjuk Pagination

Periksa UI Bootstrap 's pagination direktif . Saya akhirnya menggunakannya daripada apa yang diposting di sini karena memiliki fitur yang cukup untuk penggunaan saya saat ini dan memiliki spesifikasi tes menyeluruh untuk menyertainya.

Melihat

<!-- table here -->

<pagination 
  ng-model="currentPage"
  total-items="todos.length"
  max-size="maxSize"  
  boundary-links="true">
</pagination>

<!-- items/page select here if you like -->

Pengendali

todos.controller("TodoController", function($scope) {
   $scope.filteredTodos = []
  ,$scope.currentPage = 1
  ,$scope.numPerPage = 10
  ,$scope.maxSize = 5;

  $scope.makeTodos = function() {
    $scope.todos = [];
    for (i=1;i<=1000;i++) {
      $scope.todos.push({ text:"todo "+i, done:false});
    }
  };
  $scope.makeTodos(); 

  $scope.$watch("currentPage + numPerPage", function() {
    var begin = (($scope.currentPage - 1) * $scope.numPerPage)
    , end = begin + $scope.numPerPage;

    $scope.filteredTodos = $scope.todos.slice(begin, end);
  });
});

Saya telah membuat plunker yang berfungsi sebagai referensi.


Versi Warisan:

Melihat

<!-- table here -->

<div data-pagination="" data-num-pages="numPages()" 
  data-current-page="currentPage" data-max-size="maxSize"  
  data-boundary-links="true"></div>

<!-- items/page select here if you like -->

Pengendali

todos.controller("TodoController", function($scope) {
   $scope.filteredTodos = []
  ,$scope.currentPage = 1
  ,$scope.numPerPage = 10
  ,$scope.maxSize = 5;

  $scope.makeTodos = function() {
    $scope.todos = [];
    for (i=1;i<=1000;i++) {
      $scope.todos.push({ text:"todo "+i, done:false});
    }
  };
  $scope.makeTodos(); 

  $scope.numPages = function () {
    return Math.ceil($scope.todos.length / $scope.numPerPage);
  };

  $scope.$watch("currentPage + numPerPage", function() {
    var begin = (($scope.currentPage - 1) * $scope.numPerPage)
    , end = begin + $scope.numPerPage;

    $scope.filteredTodos = $scope.todos.slice(begin, end);
  });
});

Saya telah membuat plunker yang berfungsi sebagai referensi.


2
bagus dan elegan. Itu bisa diperbaiki dengan menambahkan semacam
Carlos Barcelona

3
Atribut num-halaman tidak lagi diperlukan dan hanya dibaca. Tidak perlu melewati numPages. Lihat dokumen: angular-ui.github.io/bootstrap/#/pagination
kvetis

3
ASK: item-per-halaman adalah properti yang perlu diatur dalam paginationelemen.
Bogac

1
^^^^ Untuk semua pembaca baru lihat komentar Bogacs: item-per-halaman sekarang diperlukan dalam elemen pagination. Tidak berfungsi tanpanya.
IfTrue

14
<paginasi> sekarang tidak digunakan lagi. Gunakan <uib-pagination> sebagai gantinya.
mnm

88

Saya baru-baru ini menerapkan paging untuk situs Built with Angular. Anda dapat memeriksa sumbernya: https://github.com/angular/builtwith.angularjs.org

Saya akan menghindari menggunakan filter untuk memisahkan halaman. Anda harus memecah item menjadi halaman di dalam pengontrol.


61
Solusinya tersebar di beberapa file. Anda harus melihat setidaknya controller dan tampilan. Saya tidak melihat bagaimana hal itu menjamin downvote:Use your downvotes whenever you encounter an egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrect.
btford

2
Anda dapat mulai melihat <div class = "pagination"> dari index.html github.com/angular/builtwith.angularjs.org/blob/master/…
Jorge Nunez Newton

6
@ btford Mengapa Anda menghindari menggunakan filter?
CWSpear

4
Saya memilih untuk menangkal suara turun sebelumnya karena saya merasa bahwa poster memberikan contoh yang berkualitas yang dapat digunakan untuk menjawab pertanyaan awal.
RachelD

1
@ Btford Apakah masih ide yang buruk untuk membuat paginasi menggunakan filter? Berikut ini adalah daftar nomor yang disediakan melalui filter yang tampak berkinerja (setidaknya dalam contoh sepele ini hingga 10.000 000 baris): embed.plnkr.co/iWxWlCEvd6Uh8erUOyaF
Ryan Kimber

79

Saya harus menerapkan pagination beberapa kali dengan Angular, dan itu selalu sedikit menyusahkan untuk sesuatu yang saya rasa bisa disederhanakan. Saya telah menggunakan beberapa ide yang disajikan di sini dan di tempat lain untuk membuat modul pagination yang membuat pagination sesederhana:

<ul>
    <li dir-paginate="item in items | itemsPerPage: 10">{{ item }}</li>
</ul>

// then somewhere else on the page ....

<dir-pagination-controls></dir-pagination-controls>

Itu dia. Ini memiliki beberapa fitur berikut:

  • Tidak diperlukan kode khusus di pengontrol Anda untuk mengikat koleksi itemske tautan pagination.
  • Anda tidak terikat untuk menggunakan tabel atau gridview - Anda dapat membuat paginasi apa saja yang dapat Anda ulangi!
  • Mendelegasikan kepada ng-repeat, sehingga Anda dapat menggunakan ekspresi apa pun yang dapat digunakan secara sah dalam ng-repeat, termasuk pemfilteran, pemesanan dll.
  • Bekerja lintas pengontrol - pagination-controlsarahan tidak perlu tahu apa-apa tentang konteks di mana paginatearahan tersebut dipanggil.

Demo: http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview

Bagi mereka yang mencari solusi "plug and play", saya pikir Anda akan menemukan ini berguna.

Kode

Kode ini tersedia di GitHub dan mencakup serangkaian tes yang cukup baik:

https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination

Jika Anda tertarik, saya juga menulis artikel pendek dengan sedikit lebih banyak wawasan tentang desain modul: http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs/


Hai michael bromley, saya coba dengan angularUtils. Saya telah menambahkan file dirPangination.js dan dirPagination.tpl.html ke proyek saya. Tetapi saya mulai mendapatkan kesalahan seperti "[$ compile: tpload] Gagal memuat template: arahan / pagination / dirPagination.tpl.html". Saya telah mencoba untuk meletakkan file html ini di folder arahan proyek saya. Tetapi saya tidak berhasil. Saya memiliki keraguan berikut: 1. Di mana menempatkan dirPagination.tpl.html dalam proyek (Karena saya menggunakan ruby ​​pada rel dengan Angularjs)?
Vieenay Siingh

2
Rapi, Anda mendapatkan saya pada saat saya membaca bahwa pagination bisa di mana saja di halaman :) Saat ini menggunakannya dan bekerja dengan lancar.
diosney

4
Ini adalah arahan paging terbaik di luar sana untuk sudut. Ini mungkin solusi paling sederhana untuk paging yang pernah saya lihat. Saya bangun dan paging beberapa tabel per tampilan masing-masing dengan kontrol paging terisolasi mereka sendiri dalam 15 menit. Semua dengan dua baris kode per file .jade. Yang bisa saya katakan adalah WOW. Luar biasa!
jrista

6
Saya dapat menjamin kehebatan arahan ini, saya memiliki pengulangan yang kompleks dan tidak ada masalah. Setup super mudah.
gkiely

1
Metode "pelacak ()" Anda menghemat hari saya. Saya memiliki perilaku yang mengerikan dan langka tanpa itu.
Leopoldo Sanczyk

63

Saya baru saja membuat JSFiddle yang menunjukkan pagination + search + order pada setiap kolom menggunakan kode btford: http://jsfiddle.net/SAWsA/11/


4
Terima kasih untuk biola. Ini sangat berguna. Namun pertanyaan: bagaimana Anda menerapkan pengurutan pada seluruh hasil yang ditetapkan, bukan apa yang ada di halaman saat ini?
super9

5
Perhatikan bahwa pengurutan hanya berfungsi pada halaman saat ini ... Tidak mengurutkan seluruh array. Pagination yang harus diulang setiap kali Anda mengubah tata urutan
dgn

3
@Spir: Ya, mencari berfungsi, tetapi tidak menyortir. Jika Anda membalikkan menyortir pada halaman 1, hanya halaman ini mengatur kembali, bukan menampilkan item 9, 20 dan co
dgn

1
@AleckLandgraf saya mencoba menambahkan $ scope.search tetapi saya masih belum menampilkan daftar diurutkan yang benar. tolong beri tahu saya apa lagi yang Anda coba atau tambahkan
anam

1
@simmisimmi @Spir @scenario ada bug di bagian bawah javascript: new_sorting_orderseharusnya newSortingOrder. Perbaiki itu, tambahkan @scope.search();, dan Anda akan melihat hal-hal seperti yang diharapkan, dan ikon mengurutkan juga. (Jalankan biola dengan konsol debugging browser Anda terbuka (di chrome, F12, tab konsol) dan itu sudah jelas).
Dax Fohl

15

Saya memperbarui Scotty.NET's plunkr http://plnkr.co/edit/FUeWwDu0XzO51lyLAEIA?p=preview sehingga menggunakan versi terbaru dari angular, angular-ui, dan bootstrap.

Pengendali

var todos = angular.module('todos', ['ui.bootstrap']);

todos.controller('TodoController', function($scope) {
  $scope.filteredTodos = [];
  $scope.itemsPerPage = 30;
  $scope.currentPage = 4;

  $scope.makeTodos = function() {
    $scope.todos = [];
    for (i=1;i<=1000;i++) {
      $scope.todos.push({ text:'todo '+i, done:false});
    }
  };

  $scope.figureOutTodosToDisplay = function() {
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage);
    var end = begin + $scope.itemsPerPage;
    $scope.filteredTodos = $scope.todos.slice(begin, end);
  };

  $scope.makeTodos(); 
  $scope.figureOutTodosToDisplay();

  $scope.pageChanged = function() {
    $scope.figureOutTodosToDisplay();
  };

});

Komponen UI Bootstrap

 <pagination boundary-links="true" 
    max-size="3" 
    items-per-page="itemsPerPage"
    total-items="todos.length" 
    ng-model="currentPage" 
    ng-change="pageChanged()"></pagination>

solusi yang diperbarui ini benar-benar memenuhi kebutuhan saya. Terima kasih banyak.
Suraj Lama

10

Ini adalah solusi javascript murni yang telah saya bungkus sebagai layanan Angular untuk menerapkan logika pagination seperti di hasil pencarian google.

Demo yang sedang berjalan pada CodePen di http://codepen.io/cornflourblue/pen/KVeaQL/

Detail dan penjelasan di posting blog ini

function PagerService() {
    // service definition
    var service = {};

    service.GetPager = GetPager;

    return service;

    // service implementation
    function GetPager(totalItems, currentPage, pageSize) {
        // default to first page
        currentPage = currentPage || 1;

        // default page size is 10
        pageSize = pageSize || 10;

        // calculate total pages
        var totalPages = Math.ceil(totalItems / pageSize);

        var startPage, endPage;
        if (totalPages <= 10) {
            // less than 10 total pages so show all
            startPage = 1;
            endPage = totalPages;
        } else {
            // more than 10 total pages so calculate start and end pages
            if (currentPage <= 6) {
                startPage = 1;
                endPage = 10;
            } else if (currentPage + 4 >= totalPages) {
                startPage = totalPages - 9;
                endPage = totalPages;
            } else {
                startPage = currentPage - 5;
                endPage = currentPage + 4;
            }
        }

        // calculate start and end item indexes
        var startIndex = (currentPage - 1) * pageSize;
        var endIndex = startIndex + pageSize;

        // create an array of pages to ng-repeat in the pager control
        var pages = _.range(startPage, endPage + 1);

        // return object with all pager properties required by the view
        return {
            totalItems: totalItems,
            currentPage: currentPage,
            pageSize: pageSize,
            totalPages: totalPages,
            startPage: startPage,
            endPage: endPage,
            startIndex: startIndex,
            endIndex: endIndex,
            pages: pages
        };
    }
}

Saya menggunakan pendekatan Anda tetapi masalahnya adalah jika saya ingin menggunakan indeks-es untuk memesan pada halaman, selalu ditampilkan sebagai 0-9 ...
vaske

4

Saya telah mengekstrak bit yang relevan di sini. Ini adalah pager tabel 'tanpa embel-embel', jadi penyortiran atau penyaringan tidak termasuk. Jangan ragu untuk mengubah / menambah sesuai kebutuhan:

     //your data source may be different. the following line is 
     //just for demonstration purposes only
    var modelData = [{
      text: 'Test1'
    }, {
      text: 'Test2'
    }, {
      text: 'Test3'
    }];

    (function(util) {

      util.PAGE_SIZE = 10;

      util.range = function(start, end) {
        var rng = [];

        if (!end) {
          end = start;
          start = 0;
        }

        for (var i = start; i < end; i++)
          rng.push(i);

        return rng;
      };

      util.Pager = function(data) {
        var self = this,
          _size = util.PAGE_SIZE;;

        self.current = 0;

        self.content = function(index) {
          var start = index * self.size,
            end = (index * self.size + self.size) > data.length ? data.length : (index * self.size + self.size);

          return data.slice(start, end);
        };

        self.next = function() {
          if (!self.canPage('Next')) return;
          self.current++;
        };

        self.prev = function() {
          if (!self.canPage('Prev')) return;
          self.current--;
        };

        self.canPage = function(dir) {
          if (dir === 'Next') return self.current < self.count - 1;
          if (dir === 'Prev') return self.current > 0;
          return false;
        };

        self.list = function() {
          var start, end;
          start = self.current < 5 ? 0 : self.current - 5;
          end = self.count - self.current < 5 ? self.count : self.current + 5;
          return Util.range(start, end);
        };

        Object.defineProperty(self, 'size', {
          configurable: false,
          enumerable: false,
          get: function() {
            return _size;
          },
          set: function(val) {
            _size = val || _size;
          }
        });

        Object.defineProperty(self, 'count', {
          configurable: false,
          enumerable: false,
          get: function() {
            return Math.ceil(data.length / self.size);
          }
        });
      };

    })(window.Util = window.Util || {});

    (function(ns) {
      ns.SampleController = function($scope, $window) {
        $scope.ModelData = modelData;
        //instantiate pager with array (i.e. our model)
        $scope.pages = new $window.Util.Pager($scope.ModelData);
      };
    })(window.Controllers = window.Controllers || {});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-controller="Controllers.SampleController">
  <thead>
    <tr>
      <th>
        Col1
      </th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in pages.content(pages.current)" title="{{item.text}}">
      <td ng-bind-template="{{item.text}}"></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="4">
        <a href="#" ng-click="pages.prev()">&laquo;</a>
        <a href="#" ng-repeat="n in pages.list()" ng-click="pages.current = n" style="margin: 0 2px;">{{n + 1}}</a>
        <a href="#" ng-click="pages.next()">&raquo;</a>
      </td>
    </tr>
  </tfoot>
</table>


4

Solusi di bawah ini cukup sederhana.

<pagination  
        total-items="totalItems" 
        items-per-page= "itemsPerPage"
        ng-model="currentPage" 
        class="pagination-sm">
</pagination>

<tr ng-repeat="country in countries.slice((currentPage -1) * itemsPerPage, currentPage * itemsPerPage) "> 

Berikut adalah contoh jsfiddle



3

Bagi siapa saja yang merasa kesulitan seperti saya untuk membuat paginator untuk tabel saya memposting ini. Jadi, menurut Anda:

          <pagination total-items="total" items-per-page="itemPerPage"    ng-model="currentPage" ng-change="pageChanged()"></pagination>    
        <!-- To specify your choice of items Per Pages-->
     <div class="btn-group">
                <label class="btn btn-primary" ng-model="radioModel"  btn-radio="'Left'" data-ng-click="setItems(5)">5</label>
                <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'" data-ng-click="setItems(10)">10</label>
                <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'" data-ng-click="setItems(15)">15</label>
            </div>
     //And don't forget in your table:
      <tr data-ng-repeat="p in profiles | offset: (currentPage-1)*itemPerPage | limitTo: itemPerPage" >

Di sudut Anda:

  var module = angular.module('myapp',['ui.bootstrap','dialogs']);
  module.controller('myController',function($scope,$http){
   $scope.total = $scope.mylist.length;     
   $scope.currentPage = 1;
   $scope.itemPerPage = 2;
   $scope.start = 0;

   $scope.setItems = function(n){
         $scope.itemPerPage = n;
   };
   // In case you can replace ($scope.currentPage - 1) * $scope.itemPerPage in <tr> by "start"
   $scope.pageChanged = function() {
        $scope.start = ($scope.currentPage - 1) * $scope.itemPerPage;
            };  
});
   //and our filter
     module.filter('offset', function() {
              return function(input, start) {
                start = parseInt(start, 10);
                return input.slice(start);
              };
            });     

Ada banyak jawaban dengan banyak upvote dan positif .. tetapi tidak ada yang berhasil untuk saya .. tetapi yang ini dikombinasikan dengan jawaban @svarog bekerja seperti pesona bagi saya.
Rai


3

Sejak Angular 1.4, limitTofilter juga menerima argumen opsional keduabegin

Dari dokumen :

{{limitTo_expression | limitTo: limit: begin}}

begin (opsional) string | number
Index untuk memulai pembatasan. Sebagai indeks negatif, mulai menunjukkan offset dari akhir input. Default ke 0.

Jadi Anda tidak perlu membuat arahan baru , argumen ini dapat digunakan untuk mengatur offset pagination

ng-repeat="item in vm.items| limitTo: vm.itemsPerPage: (vm.currentPage-1)*vm.itemsPerPage" 

3

Anda dapat dengan mudah melakukan ini menggunakan direktif UI Bootstrap.

Jawaban ini adalah modifikasi dari jawaban yang diberikan oleh @ Scotty.NET, saya telah mengubah kode karena <pagination>direktif sudah ditinggalkan sekarang.

Kode berikut menghasilkan pagination:

<ul uib-pagination 
    boundary-links="true"  
    total-items="totalItems"  
    items-per-page="itemsPerPage"  
    ng-model="currentPage"  
    ng-change="pageChanged()"  
    class="pagination"  
    previous-text="&lsaquo;"  
    next-text="&rsaquo;"  
    first-text="&laquo;"  
    last-text="&raquo;">
</ul>

Untuk membuatnya berfungsi, gunakan ini di controller Anda:

$scope.filteredData = []
$scope.totalItems = $scope.data.length;
$scope.currentPage = 1;
$scope.itemsPerPage = 5;

$scope.setPage = function (pageNo) {
    $scope.currentPage = pageNo;
};

$scope.pageChanged = function() {
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage)
    , end = begin + $scope.itemsPerPage;

    $scope.filteredData = $scope.data.slice(begin, end);
};

$scope.pageChanged();

Lihat ini untuk lebih banyak opsi pagination: Bootstrap UI Pagination Directive


2

ng-ulangi pagination

    <div ng-app="myApp" ng-controller="MyCtrl">
<input ng-model="q" id="search" class="form-control" placeholder="Filter text">
<select ng-model="pageSize" id="pageSize" class="form-control">
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="15">15</option>
    <option value="20">20</option>
 </select>
<ul>
    <li ng-repeat="item in data | filter:q | startFrom:currentPage*pageSize | limitTo:pageSize">
        {{item}}
    </li>
</ul>
<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
    Previous
</button>
{{currentPage+1}}/{{numberOfPages()}}
 <button ng-disabled="currentPage >= getData().length/pageSize - 1" ng-                 click="currentPage=currentPage+1">
    Next
    </button>
</div>

<script>

 var app=angular.module('myApp', []);

 app.controller('MyCtrl', ['$scope', '$filter', function ($scope, $filter) {
 $scope.currentPage = 0;
 $scope.pageSize = 10;
 $scope.data = [];
 $scope.q = '';

 $scope.getData = function () {

  return $filter('filter')($scope.data, $scope.q)

   }

   $scope.numberOfPages=function(){
    return Math.ceil($scope.getData().length/$scope.pageSize);                
   }

   for (var i=0; i<65; i++) {
    $scope.data.push("Item "+i);
   }
  }]);

        app.filter('startFrom', function() {
    return function(input, start) {
    start = +start; //parse to int
    return input.slice(start);
   }
  });
  </script>

1

Pesan sebelumnya pada dasarnya merekomendasikan cara membuat paging sendiri. Jika Anda seperti saya, dan lebih memilih arahan jadi, saya baru saja menemukan yang hebat bernama ngTable . Ini mendukung penyortiran, penyaringan dan pagination.

Ini adalah solusi yang sangat bersih, yang Anda butuhkan dalam pandangan Anda:

   <table ng-table="tableParams" class="table">
        <tr ng-repeat="user in $data">
            <td data-title="'Name'" sortable="'name'">
                {{user.name}}
            </td>
            <td data-title="'Age'" sortable="'age'">
                {{user.age}}
            </td>
        </tr>
    </table>

Dan di controller:

$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10,          // count per page
    sorting: {
        name: 'asc'     // initial sorting
    }
}, {
    total: data.length, // length of data
    getData: function($defer, params) {
        // use build-in angular filter
        var orderedData = params.sorting() ?
                            $filter('orderBy')(data, params.orderBy()) :
                            data;

        var start = (params.page() - 1) * params.count();
        var end = params.page() * params.count();

        $defer.resolve(orderedData.slice( start, end));
    }
});

Tautan ke GitHub: https://github.com/esvit/ng-table/


1

Paging sudut

adalah pilihan yang bagus

Arahan untuk membantu dalam paging dataset besar sementara membutuhkan minimum informasi paging yang sebenarnya. Kami sangat bergantung pada server untuk "memfilter" hasil dalam skema paging ini. Gagasan utamanya adalah kita hanya ingin memegang "halaman" item yang aktif - daripada menahan seluruh daftar item dalam memori dan paging di sisi klien.


1

Pertanyaan lama tetapi karena saya pikir pendekatan saya sedikit berbeda dan kurang kompleks, saya akan membagikan ini dan berharap bahwa seseorang selain saya merasa berguna.

Apa yang saya temukan sebagai solusi yang mudah dan kecil untuk pagination adalah menggabungkan direktif dengan filter yang menggunakan variabel lingkup yang sama.

Untuk menerapkan ini, Anda tambahkan filter pada array dan tambahkan direktif seperti ini

<div class="row">
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Name</th>
                <th>Price</th>
                <th>Quantity</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="item in items | cust_pagination:p_Size:p_Step">
                <td>{{item.Name}}</td>
                <td>{{item.Price}}</td>
                <td>{{item.Quantity}}</td>
            </tr>
        </tbody>
    </table>
    <div cust-pagination p-items="items" p-boundarylinks="true" p-size="p_Size" p-step="p_Step"></div>
</div>

p_Size dan p_Step adalah variabel lingkup yang dapat dikustomisasi dalam ruang lingkup lain nilai default p_Size adalah 5 dan p_Step adalah 1.

Ketika langkah diubah dalam pagination, p_Step diperbarui dan akan memicu penyaringan baru dengan filter cust_pagination. Filter cust_pagination kemudian mengiris array tergantung pada nilai p_Step seperti di bawah ini dan hanya mengembalikan catatan aktif yang dipilih di bagian pagination

var startIndex = nStep * nPageSize;
var endIndex = startIndex + nPageSize;
var arr = items.slice(startIndex, endIndex);
return arr;

DEMO Lihat solusi lengkap dalam plunker ini


0

Ada contoh saya. Tombol yang dipilih di tengah daftar Controller. konfigurasi >>>

 $scope.pagination = {total: null, pages: [], config: {count: 10, page: 1, size: 7}};

Logika untuk pagination:

/*
     Pagination
     */
    $scope.$watch('pagination.total', function (total) {
        if(!total || total <= $scope.pagination.config.count) return;
        _setPaginationPages(total);
    });

    function _setPaginationPages(total) {
        var totalPages = Math.ceil(total / $scope.pagination.config.count);
        var pages = [];
        var start = $scope.pagination.config.page - Math.floor($scope.pagination.config.size/2);
        var finish = null;

        if((start + $scope.pagination.config.size - 1) > totalPages){
            start = totalPages - $scope.pagination.config.size;
        }
        if(start <= 0) {
            start = 1;
        }

       finish = start +  $scope.pagination.config.size - 1;
       if(finish > totalPages){
           finish = totalPages;
       }


        for (var i = start; i <= finish; i++) {
            pages.push(i);
        }

        $scope.pagination.pages = pages;
    }

    $scope.$watch("pagination.config.page", function(page){
        _setPaginationPages($scope.pagination.total);
        _getRespondents($scope.pagination.config);
    });

dan pandangan saya saat bootstap

<ul ng-class="{hidden: pagination.total == 0}" class="pagination">
        <li ng-click="pagination.config.page = pagination.config.page - 1"
            ng-class="{disabled: pagination.config.page == 1}" ><a href="#">&laquo;</a></li>
        <li ng-repeat="p in pagination.pages"
            ng-click="pagination.config.page = p"
            ng-class="{active: p == pagination.config.page}"><a href="#">{{p}}</a></li>
        <li ng-click="pagination.config.page = pagination.config.page + 1"
            ng-class="{disabled: pagination.config.page == pagination.pages.length}"><a href="#">&raquo;</a></li>
    </ul >

Ini berguna


0

Saya berharap bisa berkomentar, tapi saya harus meninggalkan ini di sini:

Jawaban Scotty.NET dan ulangan user2176745 untuk versi yang lebih baru sama-sama bagus, tetapi mereka berdua melewatkan sesuatu yang versi AngularJS (v1.3.15) saya hancurkan:

saya tidak didefinisikan dalam $ scope.makeTodos.

Dengan demikian, mengganti dengan fungsi ini memperbaikinya untuk versi sudut yang lebih baru.

$scope.makeTodos = function() {
    var i;
    $scope.todos = [];
    for (i=1;i<=1000;i++) {
        $scope.todos.push({ text:'todo '+i, done:false});
    }
};

0

Ikhtisar : Pagination menggunakan

 - ng-repeat
 - uib-pagination

Lihat :

<div class="row">
    <div class="col-lg-12">
        <table class="table">
            <thead style="background-color: #eee">
                <tr>
                    <td>Dispature</td>
                    <td>Service</td>
                    <td>Host</td>
                    <td>Value</td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="x in app.metricsList">
                    <td>{{x.dispature}}</td>
                    <td>{{x.service}}</td>
                    <td>{{x.host}}</td>
                    <td>{{x.value}}</td>
                </tr>
            </tbody>
        </table>

        <div align="center">
            <uib-pagination items-per-page="app.itemPerPage" num-pages="numPages"
                total-items="app.totalItems" boundary-link-numbers="true"
                ng-model="app.currentPage" rotate="false" max-size="app.maxSize"
                class="pagination-sm" boundary-links="true"
                ng-click="app.getPagableRecords()"></uib-pagination>        

            <div style="float: right; margin: 15px">
                <pre>Page: {{app.currentPage}} / {{numPages}}</pre>
            </div>          
        </div>
    </div>
</div>

JS Controller :

app.controller('AllEntryCtrl',['$scope','$http','$timeout','$rootScope', function($scope,$http,$timeout,$rootScope){

    var app = this;
    app.currentPage = 1;
    app.maxSize = 5;
    app.itemPerPage = 5;
    app.totalItems = 0;

    app.countRecords = function() {
        $http.get("countRecord")
        .success(function(data,status,headers,config){
            app.totalItems = data;
        })
        .error(function(data,status,header,config){
            console.log(data);
        });
    };

    app.getPagableRecords = function() {
        var param = {
                page : app.currentPage,
                size : app.itemPerPage  
        };
        $http.get("allRecordPagination",{params : param})
        .success(function(data,status,headers,config){
            app.metricsList = data.content;
        })
        .error(function(data,status,header,config){
            console.log(data);
        });
    };

    app.countRecords();
    app.getPagableRecords();

}]);

0

Saya ingin menambahkan solusi saya yang berfungsi dengan ngRepeatdan memfilter yang Anda gunakan tanpa menggunakan $watchatau irisan array.

Hasil filter Anda akan diberi nomor halaman!

var app = angular.module('app', ['ui.bootstrap']);

app.controller('myController', ['$scope', function($scope){
    $scope.list= ['a', 'b', 'c', 'd', 'e'];

    $scope.pagination = {
        currentPage: 1,
        numPerPage: 5,
        totalItems: 0
    };

    $scope.searchFilter = function(item) {
        //Your filter results will be paginated!
        //The pagination will work even with other filters involved
        //The total number of items in the result of your filter is accounted for
    };

    $scope.paginationFilter = function(item, index) {
        //Every time the filter is used it restarts the totalItems
        if(index === 0) 
            $scope.pagination.totalItems = 0;

        //This holds the totalItems after the filters are applied
        $scope.pagination.totalItems++;

        if(
            index >= (($scope.pagination.currentPage - 1) * $scope.pagination.numPerPage)
            && index < ((($scope.pagination.currentPage - 1) * $scope.pagination.numPerPage) + $scope.pagination.numPerPage)
        )
            return true; //return true if item index is on the currentPage

        return false;
    };
}]);

Dalam HTML pastikan Anda menerapkan filter Anda ke ngRepeat sebelum filter pagination.

<table data-ng-controller="myController">
    <tr data-ng-repeat="item in list | filter: searchFilter | filter: paginationFilter track by $index">
        <td>
            {{item}}
        </td>
    <tr>
</table>
<ul class="pagination-sm"
    uib-pagination
    data-boundary-links="true"
    data-total-items="pagination.totalItems"
    data-items-per-page="pagination.numPerPage"
    data-ng-model="pagination.currentPage"
    data-previous-text="&lsaquo;"
    data-next-text="&rsaquo;"
    data-first-text="&laquo;"
    data-last-text="&raquo;">
 </ul>
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.