AngularJS में पेजिंग कैसे करें?


254

मेरे पास लगभग 1000 आइटमों की मेमोरी है और मैं इस डेटासेट के लिए पेजर बनाने का प्रयास कर रहा हूं, लेकिन मुझे यकीन नहीं है कि यह कैसे करना है।

मैं परिणामों को फ़िल्टर करने के लिए एक कस्टम फ़िल्टर फ़ंक्शन का उपयोग कर रहा हूं, और यह ठीक काम करता है, लेकिन किसी तरह मुझे पृष्ठों की संख्या प्राप्त करने की आवश्यकता है।

कोई सुराग?


जवाबों:


285

कोणीय यूआई बूटस्ट्रैप - पृष्ठ पर अंक लगाना निर्देश

की जाँच करें यूआई बूटस्ट्रैप के पृष्ठांकन निर्देश । मैंने इसका उपयोग करने के बजाय इसे यहाँ पोस्ट किया है क्योंकि इसमें मेरे वर्तमान उपयोग के लिए पर्याप्त सुविधाएँ हैं और इसका साथ देने के लिए एक संपूर्ण परीक्षण युक्ति है।

राय

<!-- table here -->

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

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

नियंत्रक

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);
  });
});

मैंने संदर्भ के लिए काम करने वाला प्लंकर बनाया है ।


विरासत संस्करण:

राय

<!-- 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 -->

नियंत्रक

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);
  });
});

मैंने संदर्भ के लिए काम करने वाला प्लंकर बनाया है ।


2
अच्छा और सुरुचिपूर्ण। इसे सॉर्ट में जोड़ा जा सकता है
कार्लोस बार्सिलोना

3
संख्या-पृष्ठ विशेषता की अब आवश्यकता नहीं है और इसे केवल पढ़ा जाता है। अंकों को पास करने की आवश्यकता नहीं है। डॉक्स देखें: angular-ui.github.io/bootstrap/#/pagination
kvetis

3
SOLVED: आइटम-प्रति-पृष्ठ वह गुण है जिसे paginationतत्व में सेट करने की आवश्यकता होती है।
बोगैक

1
^ ^ ^ ^ ^ सभी नए पाठकों के लिए देखें बोगस टिप्पणी: आइटम-प्रति-पृष्ठ अब पृष्ठांकन तत्व में आवश्यक है। इसके बिना काम नहीं होता है।
IfTrue

14
<pagination> अब पदावनत हो गया है। इसके बजाय <uib-pagination> का उपयोग करें।
एमएनएम

88

मैंने हाल ही में एंगुलर साइट के साथ बिल्ट के लिए पेजिंग लागू किया है। आप स्रोत का चेकआउट करते हैं: https://github.com/angular/builtwith.angularjs.org

मैं पृष्ठों को अलग करने के लिए फ़िल्टर का उपयोग करने से बचना चाहता हूँ। आपको नियंत्रक के भीतर पृष्ठों में आइटम को तोड़ देना चाहिए।


61
समाधान कई फ़ाइलों में फैला हुआ है। आपको कम से कम नियंत्रक और दृश्य में देखने की आवश्यकता है। मैं यह नहीं देखता कि कैसे वारंट Use your downvotes whenever you encounter an egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrect.
डाउनवोट होता है

2
आप <div class = "pagination"> of index.html github.com/angular/builtwith.angularjs.org/blob/master/…
Jorge Nunez Newton

6
@btford आप फ़िल्टर का उपयोग करने से क्यों बचेंगे?
CWSpear

4
मैंने पिछले डाउन वोट का विरोध करने के लिए मतदान किया क्योंकि मुझे लगा कि पोस्टर ने एक गुणवत्ता उदाहरण प्रदान किया है जिसका उपयोग मूल प्रश्न का उत्तर देने के लिए किया जा सकता है।
राचेल 17

1
@btford क्या अभी भी एक फिल्टर का उपयोग करने के लिए एक बुरा विचार है? यहाँ एक प्लंकर एक फिल्टर के माध्यम से एक सूची पेश कर रहा है जो कि प्रदर्शन योग्य लगता है (कम से कम 10 से 000 000 पंक्तियों तक इस तुच्छ उदाहरण में): embed.plnkr.co/iWxWlCEvd6Uh8erUnFF
रयान किम्बर

79

मुझे एंगुलर के साथ कई बार पेजिनेशन लागू करना पड़ा है, और यह हमेशा कुछ के लिए दर्द का एक सा था जो मुझे लगा कि इसे सरल बनाया जा सकता है। मैंने यहाँ प्रस्तुत किए गए विचारों में से कुछ का उपयोग एक पृष्ठांकन मॉड्यूल बनाने के लिए किया है जो पृष्ठांकन को सरल बनाता है:

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

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

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

बस। इसकी निम्नलिखित विशेषताएं हैं:

  • संग्रह itemsलिंक से संग्रह को टाई करने के लिए आपके नियंत्रक में कोई कस्टम कोड की आवश्यकता नहीं है ।
  • आप टेबल या ग्रिडव्यू का उपयोग करने के लिए बाध्य नहीं हैं - आप कुछ भी कर सकते हैं जिसे आप एनजी-रिपीट कर सकते हैं!
  • प्रतिनिधि करता है ng-repeat, इसलिए आप किसी भी अभिव्यक्ति का उपयोग कर सकते हैं जिसका उपयोग वैध रूप से किया जा सकता है ng-repeat, जिसमें फ़िल्टरिंग, ऑर्डर करना आदि शामिल हैं।
  • नियंत्रकों के पार काम करता है - pagination-controlsनिर्देश को उस संदर्भ के बारे में कुछ भी जानने की आवश्यकता नहीं है जिसमें paginateनिर्देश कहा जाता है।

डेमो: http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p ।preview

जो लोग "प्लग एंड प्ले" समाधान की तलाश में हैं, मुझे लगता है कि आप इसे उपयोगी पाएंगे।

कोड

कोड यहाँ GitHub पर उपलब्ध है और इसमें परीक्षणों का एक अच्छा सेट शामिल है:

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

यदि आप रुचि रखते हैं, तो मैंने मॉड्यूल के डिज़ाइन में थोड़ी अधिक जानकारी के साथ एक छोटा टुकड़ा भी लिखा: http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs/


हाय @michael ब्रोमली, मैं कोणीय के साथ कोशिश कर रहा हूँ। मैंने अपने प्रोजेक्ट में dirPangination.js और dirPagination.tpl.html फाइलें जोड़ी हैं। लेकिन मुझे "[$ संकलन: tpload] जैसा टेम्प्लेट लोड करने में विफल हुआ: निर्देश / पृष्ठांकन / dirPagination.tpl.html" शुरू हो गया। मैंने अपने प्रोजेक्ट के निर्देश फ़ोल्डर में इस html फ़ाइल को डालने की कोशिश की थी। लेकिन मुझे कोई सफलता नहीं मिली। मुझे निम्नलिखित संदेह हैं: 1. प्रोजेक्ट में dirPagination.tpl.html कहां डालें (जैसा कि मैं Angularjs के साथ रेल पर रूबी का उपयोग कर रहा हूं)?
वीनेय सिंघ

2
नीट, आपने मुझे उस समय प्राप्त किया था जब मैंने पढ़ा था कि पेजेशन कहीं भी हो सकता है :) वर्तमान में इसका उपयोग करना और सुचारू रूप से काम करना।
डायोसनी

4
कोणीय के लिए यह सबसे अच्छा पेजिंग निर्देश है। यह शायद मैंने कभी देखा है पेजिंग के लिए सबसे सरल समाधान है। मैं 15 मिनट में अपने अलग-अलग पेजिंग नियंत्रण के साथ प्रत्येक दृश्य के अनुसार कई टेबल ऊपर और पेजिंग कर रहा था। कोड प्रति .jade फ़ाइल की दो पंक्तियों के साथ सभी। मैं बस यही कह सकता हूँ, वाह। बहुत बढ़िया!
jrista

6
मैं इस निर्देश के अजीब के लिए वाउच कर सकता हूं, मेरे पास एक जटिल एनजी-रिपीट था और इसने इसे कोई समस्या नहीं दी। सुपर आसान सेटअप।
दिल से

1
आपका "ट्रैकर ()" विधि मेरे दिन को बचाती है। मैं इसके बिना एक भयानक और दुर्लभ व्यवहार कर रहा था।
लियोपोल्डो सैंसिएक

63

मैंने बस एक JSField बनाया है जो btford कोड का उपयोग करके प्रत्येक कॉलम पर पेजेशन + सर्च + ऑर्डर दिखाता है: http://jsfiddle.net/SAWsA/11/


4
फील के लिए धन्यवाद। बहुत काम का है। हालांकि सवाल: आप वर्तमान पृष्ठ पर क्या है के बजाय पूरे परिणाम पर सेट को कैसे लागू करेंगे?
सुपर

5
ध्यान दें कि छँटाई केवल वर्तमान पृष्ठ पर काम करती है ... यह संपूर्ण सरणी को क्रमबद्ध नहीं करती है। पृष्ठांकन पुनः किया हर आप सॉर्ट क्रम बदल हो गया है
dgn

3
@ शिर: हाँ, खोज काम करती है, लेकिन छँटाई नहीं। आप पेज 1 पर छँटाई रिवर्स हैं, तो केवल यह पेज पुनर्क्रमित है, बजाय आइटम 9, 20 और सह प्रदर्शित करने में
dgn

1
@AleckLandgraf i ने $ गुंजाइश जोड़ने की कोशिश की। लेकिन खोज अभी भी सही क्रमबद्ध सूची नहीं दिखा रही है। कृपया मुझे बताएं कि और क्या प्रयास किया गया या जोड़ा गया
anam

1
@simmisimmi @Spir @scenario जावास्क्रिप्ट के नीचे एक बग है: new_sorting_orderहोना चाहिए newSortingOrder। इसे ठीक करें, इसमें जोड़ें @scope.search();, और आपको उम्मीद के अनुसार चीजें दिखाई देंगी और सॉर्ट आइकन भी अपडेट हो जाएंगे। (अपने ब्राउज़र के डिबगिंग कंसोल को ओपन करें (क्रोम, F12, कंसोल टैब में) और यह स्पष्ट है)।
डैक्स फ़ोहल

15

मैंने Scotty.NET के प्लंकर http://plnkr.co/edit/FUeWwDu0XzO51lyLAEIA?p=preview को अपडेट किया ताकि यह कोणीय, कोणीय-यूआई और बूटस्ट्रैप के नए संस्करणों का उपयोग करे।

नियंत्रक

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();
  };

});

बूटस्ट्रैप UI घटक

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

इस अद्यतन समाधान वास्तव में मेरी जरूरतों को पूरा किया। बहुत बहुत धन्यवाद।
सूरज लम्हा

10

यह एक शुद्ध जावास्क्रिप्ट समाधान है जिसे मैंने Google खोज परिणामों की तरह पृष्ठ पर अंक लगाने के तर्क के लिए एक कोणीय सेवा के रूप में लपेटा है।

कोडकोड पर वर्किंग डेमो http://codepen.io/cornflourblue/pen/KVeaQL/ पर

इस ब्लॉग पोस्ट पर विवरण और स्पष्टीकरण

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
        };
    }
}

मैंने आपके दृष्टिकोण का उपयोग किया लेकिन समस्या यह है कि क्या मैं पृष्ठ पर ऑर्डर करने के लिए इंडेक्स-एस का उपयोग करना चाहता हूं, यह हमेशा 0-9 के रूप में दिखाया जाता है ...
vaske

4

मैंने यहाँ प्रासंगिक बिट्स निकाले हैं। यह एक 'नो तामझाम' सारणीबद्ध पेजर है, इसलिए छांटना या फ़िल्टर करना शामिल नहीं है। आवश्यकतानुसार बदलने / जोड़ने के लिए स्वतंत्र महसूस करें:

     //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

नीचे समाधान काफी सरल है।

<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) "> 

यहाँ नमूना jsfiddle है


3

JQuery के मोबाइल कोणीय एडाप्टर में एक पेजिंग फ़िल्टर होता है जिसे आप बंद कर सकते हैं।

यहां एक डेमो फ़िडल है जो इसका उपयोग करता है (5 से अधिक आइटम जोड़ें और यह पृष्ठांकित हो जाता है): http://jsfiddle.net/tigbro/Du2DY/

यहाँ स्रोत है: https://github.com/tigbro/jquery-mobile-angular-adapter/blob/master/src/main/webapp/utils/paging.js


3

किसी के लिए भी, जो मेरे लिए इस तालिका को पोस्ट करने के लिए एक पेजिनेटर बनाना मुश्किल है। तो, आपके विचार में:

          <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" >

अपने कोणीयज में:

  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);
              };
            });     

इतने उत्थान और सकारात्मकता के साथ उत्तर थे .. लेकिन किसी ने मेरे लिए काम नहीं किया .. लेकिन इस @svarog के उत्तर के साथ संयुक्त मेरे लिए एक आकर्षण की तरह काम किया।
राय

3

मैं इस 3rd पार्टी पेजेशन लाइब्रेरी का उपयोग करता हूं और यह अच्छी तरह से काम करती है। यह स्थानीय / दूरस्थ डेटा स्रोत कर सकते हैं और यह बहुत ही विन्यास योग्य है।

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

<dir-pagination-controls
    [max-size=""]
    [direction-links=""]
    [boundary-links=""]
    [on-page-change=""]
    [pagination-id=""]
    [template-url=""]
    [auto-hide=""]>
    </dir-pagination-controls>

3

कोणीय 1.4 के बाद से, limitToफिल्टर एक दूसरे वैकल्पिक तर्क को भी स्वीकार करता हैbegin

से डॉक्स :

{{limitTo_expression | सीमा: सीमा: शुरू}}

प्रारंभ (वैकल्पिक) स्ट्रिंग | संख्या
सूचकांक जिस पर सीमा शुरू करनी है। एक नकारात्मक सूचकांक के रूप में, शुरू इनपुट के अंत से एक ऑफसेट इंगित करता है। चूक ०।

इसलिए आपको एक नया निर्देश बनाने की आवश्यकता नहीं है , इस तर्क का उपयोग पृष्ठांकन के ऑफसेट को सेट करने के लिए किया जा सकता है

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

3

आप इसे बूटस्ट्रैप UI निर्देश का उपयोग करके आसानी से कर सकते हैं।

यह उत्तर @ Scotty.NET द्वारा दिए गए उत्तर का एक संशोधन है, मैंने कोड बदल दिया है क्योंकि <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>

इसे क्रियाशील बनाने के लिए, इसे अपने नियंत्रक में उपयोग करें:

$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();

पेजिंग के अधिक विकल्पों के लिए इसे देखें: बूटस्ट्रैप यूआई पेजिनेशन डायरेक्टिव


2

एनजी-रिपीट पेजिंग

    <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

पिछले संदेशों ने मूल रूप से अपने आप से पेजिंग बनाने की सिफारिश की थी। तुम मुझे पसंद कर रहे हैं, और एक समाप्त निर्देश पसंद करते हैं, मैं तो बस कहा जाता है के लिए एक महान एक पाया ngTable । यह सॉर्टिंग, फ़िल्टरिंग और पेजिंग का समर्थन करता है।

यह एक बहुत ही साफ समाधान है, जो आपको अपने विचार में चाहिए:

   <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>

और नियंत्रक में:

$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));
    }
});

GitHub से लिंक करें: https://github.com/esvit/ng-table/


1

कोणीय-पेजिंग

एक अद्भुत विकल्प है

वास्तविक पेजिंग जानकारी के नंगे न्यूनतम की आवश्यकता के दौरान बड़े डेटासेट को पेजिंग करने में सहायता करने का निर्देश। हम इस पेजिंग योजना में "फ़िल्टरिंग" परिणामों के लिए सर्वर पर बहुत निर्भर हैं। केंद्रीय विचार हम केवल वस्तुओं के सक्रिय "पेज" को पकड़ना चाहते हैं - बजाय इसके कि मेमोरी में वस्तुओं की पूरी सूची को रखा जाए और क्लाइंट-साइड पर पेजिंग की जाए।


1

पुराना प्रश्न लेकिन जब से मुझे लगता है कि मेरा दृष्टिकोण थोड़ा अलग और कम जटिल है मैं इसे साझा करूंगा और आशा करता हूं कि मेरे अलावा कोई इसे उपयोगी समझे।

पेजिंग करने के लिए मुझे एक आसान और छोटा सा उपाय मिला कि एक निर्देश को एक फिल्टर के साथ संयोजित करना है जो समान स्कोप वैरिएबल का उपयोग करता है।

इसे लागू करने के लिए आप ऐरे पर फिल्टर लगाएं और डायरेक्टिव को इस तरह जोड़ें

<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 और p_Step स्कोप वैरिएबल हैं जिन्हें स्कोप में अनुकूलित किया जा सकता है और p_Size का डिफॉल्ट मान 5 है और p_Step 1 है।

जब एक चरण पृष्ठांकन में परिवर्तन होता है तो p_Step अद्यतन किया जाता है और cust_pagination फ़िल्टर द्वारा एक नया फ़िल्टरिंग ट्रिगर करेगा। Cust_pagination फ़िल्टर तब नीचे की तरह p_Step मान के आधार पर सरणी को स्लाइस करता है और केवल पृष्ठांकन अनुभाग में चयनित सक्रिय रिकॉर्ड वापस करता है

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

डेमो इस प्लंकर में पूरा समाधान देखें


0

मेरा उदाहरण है। सूची नियंत्रक पर बीच में चयनित बटन। विन्यास >>>

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

तर्क के लिए तर्क:

/*
     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);
    });

और बूटस्टैप पर मेरा विचार

<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 >

यह उपयोगी है


0

काश मैं टिप्पणी कर सकता, लेकिन मुझे इसे यहाँ छोड़ना होगा:

बाद के संस्करणों के लिए Scotty.NET का जवाब और user2176745 का फिर से आना दोनों ही बहुत अच्छे हैं, लेकिन वे दोनों कुछ ऐसा याद करते हैं कि AngularJS (v1.3.15) का मेरा संस्करण टूट जाता है:

मैं $ गुंजाइश में परिभाषित नहीं हूँ।

जैसे, इस फ़ंक्शन के साथ प्रतिस्थापित करना इसे अधिक हाल के कोणीय संस्करणों के लिए ठीक करता है।

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

0

अवलोकन : उपयोग करके पृष्ठांकन

 - ng-repeat
 - uib-pagination

देखें :

<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>

जेएस नियंत्रक :

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

मैं अपने समाधान को जोड़ना चाहूंगा ngRepeatजो आपके साथ काम करता है और फ़िल्टर करता है जिसे आप एक $watchया कटा हुआ सरणी का उपयोग किए बिना इसके साथ उपयोग करते हैं ।

आपके फ़िल्टर परिणाम पगला जाएँगे!

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;
    };
}]);

HTML में सुनिश्चित करें कि आप अपने फ़िल्टर को पेजेशन फ़िल्टर ngRepeat से पहले लागू करते हैं ।

<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>
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.