AngularJS Pagination

AngularJS kullanarak gösterilen verilerin sayfalanması işlemini yapıyor olacağız. Verileri tablo olarak veya card gösterimi ile sayfada gösteririz. Bu uygulamada verileri bootstrap card gösterimi ile sayfada göstermekteyim. Listelediğimiz verileri angularjs kullanarak sayfalayacağız.

pagination

Kod kısmı

Controller kısmında sayfalama için gerekli parametreleri tanımlıyoruz. Her sayfada 12 tane veri gösterilmesini ve mevcut sayfanın ilk sayfa olmasını ayarladık. Sayfalama kısmında geçiş yaptığımız kısımda sadece 5 tane link gösterilmesi için maxSize parametresini ekledik.

init içersinde factory’den verileri alıp customers dizisine yükledik. $scope.watch ile ‘currentpage + numberpage’ değişimini izlemekteyiz. Bunun sayesinde her sayfa geçişinde yani mevcut sayfaya her sayfada göstereceğimiz veri sayısını eklediğimiz zaman yeni sayfaya geçmiş bulunuyoruz. Her yeni sayfaya geçişte updateFilteredItems fonksiyonunu işleme koyuyoruz.

Bu fonksiyon ile başlangıç ve bitiş değerleri belirtip her sayfa için gösterilecek verileri customers dizisinden slice kullanarak filtreliyoruz. Veriler artık filteredCustomers dizisi içinde bulunmaktadır.

controller

Tanımladığımız SimpleFactory içersinden verileri almaktayız. Gerçek uygulamalarda verileri veritabanından çekeriz. Bu uygulama için kullandığım 100 tane veriyi customers dizisi içerisinde obje formatında tanımladım. Getcustomers ile tüm verileri döndürmekteyiz. Contoller kısmında SimpleFactory.getCustomers() ile çağırmaktayız.

factorypagi

Bootstrap card block kullanmaktayız. Detaylı bilgi için

ng-repeat ile filtrelenmiş verileri listelemekteyiz.

htmlpagi2

Html kısmında; eğer customers dizisinde hiç veri yoksa veri bulunamadı kısmını göstermektedir. Dizide veri varsa sayfalama kısmını gösteriyor. uib-pagination, angular ui-bootstrap ile kullanılan özelliktir. Detaylı kullanım için

htmlpagi

Plunker

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s