অ্যাঙ্গুলারজেএসে কীভাবে পেজিং করবেন?


254

আমার কাছে মেমরির প্রায় 1000 আইটেমের একটি ডেটাসেট রয়েছে এবং এই ডেটাসেটের জন্য পেজার তৈরি করার চেষ্টা করছি, তবে এটি কীভাবে করবেন তা সম্পর্কে আমি নিশ্চিত নই।

ফলাফলগুলি ফিল্টার করার জন্য আমি একটি কাস্টম ফিল্টার ফাংশন ব্যবহার করছি এবং এটি দুর্দান্ত কাজ করে তবে কোনওভাবে আমার পৃষ্ঠার সংখ্যা বের করা দরকার।

কোন সংকেত সনাক্ত করুন?


উত্তর:


285

কৌণিক UI বুটস্ট্র্যাপ - পৃষ্ঠা নির্দেশিকা

পরীক্ষা করে দেখুন UI 'তে বুটস্ট্র্যাপ এর পত্রাঙ্কন নির্দেশ । আমার বর্তমান ব্যবহারের জন্য পর্যাপ্ত বৈশিষ্ট্য রয়েছে এবং এটির সাথে পুরোপুরি পরীক্ষার নমুনা রয়েছে বলে এখানে যা পোস্ট করা হয়েছে তার চেয়ে আমি এটি ব্যবহার করে শেষ করেছি।

দৃশ্য

<!-- 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
সংখ্যা-পৃষ্ঠাগুলির বৈশিষ্ট্যটির আর প্রয়োজন নেই এবং কেবল পঠনযোগ্য। নামপেজ পাস করার দরকার নেই। দস্তাবেজগুলি দেখুন: কৌণিক-ui.github.io/bootstrap/#/pagination
kvetis

3
সলভড: আইটেম-প্রতি পৃষ্ঠায় এমন সম্পত্তি যা paginationউপাদানকে সেট করতে হবে ।
বোগাক

1
All সমস্ত নতুন পাঠকের জন্য বোগাকস মন্তব্যটি দেখুন: পৃষ্ঠা পৃষ্ঠার উপাদানগুলিতে প্রতি পৃষ্ঠায় আইটেম-প্রতি এখন প্রয়োজন। এটি ছাড়া কাজ করে না।
IfTrue

14
<পৃষ্ঠা> এখন অবচয় করা হয়েছে। পরিবর্তে <uib- পৃষ্ঠা> ব্যবহার করুন।
এমএনএম

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.
ডাউনটাউনট হ'ল


6
@ বিটিফোর্ড আপনি কেন একটি ফিল্টার ব্যবহার এড়াবেন?
সিডব্লিউস্পিয়ার

4
আমি পূর্ববর্তী ডাউন ভোটের বিরুদ্ধে লড়াই করার পক্ষে আপ-ভোট দিয়েছি কারণ আমি অনুভব করেছি যে পোস্টারটি একটি মানের উদাহরণ প্রদান করেছে যা মূল প্রশ্নের উত্তর দেওয়ার জন্য ব্যবহার করা যেতে পারে।
রাচেলড

1
@ বিটিফোর্ড এখনও কি ফিল্টার ব্যবহার করে প্যাগিনেট করা খারাপ ধারণা? এখানে একজন ফিল্মারের মাধ্যমে একটি তালিকা প্যাগিং করছে যা প্রদর্শিত হচ্ছে (অন্তত 10 000 000 সারি পর্যন্ত এই তুচ্ছ উদাহরণে): এম্বেড.প্লানক্রা.কো
রায়ান কিম্বার

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= পূর্বরূপ

যারা "প্লাগ এবং প্লে" সমাধান সন্ধান করছেন তাদের জন্য আমি মনে করি আপনি এটি দরকারী পাবেন।

কোড

কোডটি এখানে গিটহাবটিতে উপলভ্য এবং এতে পরীক্ষার একটি দুর্দান্ত সেট অন্তর্ভুক্ত রয়েছে:

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

আপনি আগ্রহী হলে আমিও মডিউল নকশা একটি সামান্য আরো জ্ঞানের সাথে একটি সংক্ষিপ্ত টুকরা লিখেছিলেন: http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs/


হাই @ মাইকেল ব্রোমলে, আমি কৌণিকর ব্যবহারগুলি চেষ্টা করছি। আমি আমার প্রকল্পে dirPangination.js এবং dirPagination.tpl.html ফাইল যুক্ত করেছি। তবে আমি "[ile সংকলন: tpload] টেমপ্লেট লোড করতে ব্যর্থ হয়েছে: ডিরেক্টরি / পৃষ্ঠা পৃষ্ঠা / dirPagination.tpl.html" এর মতো ত্রুটি পেতে শুরু করেছি। আমি এই প্রকল্পের নির্দেশিকা ফোল্ডারে এই এইচটিএমএল ফাইলটি রাখার চেষ্টা করেছি। তবে আমার কোনও সাফল্য ছিল না। আমার নিম্নলিখিত সন্দেহ রয়েছে: ১. প্রকল্পে dirPagination.tpl.html কোথায় রাখবেন (যেমন আমি Angularjs দিয়ে রেলগুলিতে রুবি ব্যবহার করছি)?
ভিএনয় সিংহ

2
ঝরঝরে, আপনি পড়ার এই মুহুর্তে আপনি আমাকে পেয়েছেন যে পৃষ্ঠাটি পৃষ্ঠাতে যে কোনও জায়গায় থাকতে পারে :) বর্তমানে এটি ব্যবহার করে এবং সহজেই কাজ করছে।
ডায়োসনি

4
এটি কৌনিক জন্য সেখানে সেরা পেজিং নির্দেশিকা। পেজিংয়ের এটি সম্ভবত সবচেয়ে সহজ সমাধান যা আমি কখনও দেখেছি। আমি 15 মিনিটের মধ্যে তাদের নিজস্ব বিচ্ছিন্ন পেজিং নিয়ন্ত্রণের সাথে প্রতিটি ভিউতে একাধিক টেবিল পেজ করছি। । Jade ফাইল প্রতি কোড দুটি লাইন সহ সমস্ত। আমি যা বলতে পারি তা হ'ল WOW অসাধারণ!
জ্রিস্টা

6
আমি এই নির্দেশিকার দুর্দান্ততার পক্ষে প্রমাণ দিতে পারি, আমার একটি জটিল এনজি-রিপিট ছিল এবং এটি কোনও সমস্যা হ্যান্ডেল করেছে। সুপার ইজি সেটআপ।
gkiely

1
আপনার "ট্র্যাকার ()" পদ্ধতিটি আমার দিন বাঁচায়। আমি এটি ছাড়া একটি ভয়াবহ এবং বিরল আচরণ ছিল।
লিওপোলোডো সান্জিক

63

আমি সবেমাত্র একটি জেএসফিডাল তৈরি করেছি যা বিটিফোর্ড কোড ব্যবহার করে প্রতিটি কলামে পৃষ্ঠা + অনুসন্ধান + ক্রম প্রদর্শন করে: http://jsfiddle.net/SAWsA/11/


4
মজার জন্য ধন্যবাদ। এটি খুব দরকারী। যদিও প্রশ্ন: বর্তমান পৃষ্ঠায় কী রয়েছে তার পরিবর্তে আপনি কীভাবে পুরো ফলাফলের সেটটিতে সারণিটি প্রয়োগ করবেন?
সুপার

5
নোট করুন যে বাছাই করা কেবলমাত্র বর্তমান পৃষ্ঠায় কাজ করে ... এটি পুরো অ্যারেটিকে বাছাই করে না। আপনি যখনই বাছাইয়ের ক্রম পরিবর্তন করেন ততবার
পৃষ্ঠাগুলি

3
@ স্পির: হ্যাঁ, অনুসন্ধান কাজ করে তবে বাছাই হয় না। আপনি যদি পৃষ্ঠার 1 এ বাছাইয়ের বিপরীত হন তবে 9, 20 এবং সহ
51-

1
@ অ্যালেক্ল্যাংগ্রাফ আমি $ সুযোগ.সন্ধান যুক্ত করার চেষ্টা করেছি কিন্তু ii এখনও সঠিক অনুসারে বাছাই করা তালিকা প্রদর্শন করছে না। আপনি আর কী চেষ্টা করেছেন বা যুক্ত করেছেন তা দয়া করে আমাকে জানান
আনাম

1
@ সিম্মিসিম্মি @ স্পির @ সিনারিও জাভাস্ক্রিপ্টের নীচে একটি বাগ আছে: new_sorting_orderহওয়া উচিত newSortingOrder। এটি ঠিক করুন, যুক্ত করুন @scope.search();, এবং আপনি প্রত্যাশা অনুযায়ী জিনিসগুলি সাজান দেখতে পাবেন এবং সাজানোর আইকনগুলিও আপডেট হয়। (আপনার ব্রাউজারের ডিবাগিং কনসোলটি খোলা (ক্রোম, এফ 12, কনসোল ট্যাবে) এবং এটি সুস্পষ্ট) দিয়ে ফিডল চালান।
ডেক্স ফোহল

15

আমি স্কটি ডটনেট এর প্লঙ্কার http://plnkr.co/edit/FUeWwDu0XzO51lyLAEIA?p= পূর্বরূপ আপডেট করেছি যাতে এটি কৌনিক, কৌণিক-ইউআই এবং বুটস্ট্র্যাপের নতুন সংস্করণ ব্যবহার করে।

নিয়ামক

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

});

বুটস্ট্র্যাপ ইউআই উপাদান

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

এই আপডেট সমাধানটি সত্যিই আমার চাহিদা পূরণ করেছে। অনেক ধন্যবাদ.
সুরজ লামা

10

এটি একটি খাঁটি জাভাস্ক্রিপ্ট সমাধান যা আমি গুগল অনুসন্ধানের ফলাফলের মতো পৃষ্ঠাগুলি যুক্তি বাস্তবায়নের জন্য একটি কৌণিক পরিষেবা হিসাবে আবৃত করেছি।

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 হিসাবে প্রদর্শিত হয় ...
ভাস্কে

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

অনেকগুলি উত্স এবং ধনাত্মক উত্তর ছিল .. তবে আমার পক্ষে কেউ কাজ করেনি .. তবে @ এসবারোগের উত্তরটির সাথে মিলিয়ে এটি আমার জন্য আকর্ষণীয় কাজ করেছে।
রায়

3

আমি এই 3 য় পক্ষের পৃষ্ঠা পৃষ্ঠাটি পাঠাগারটি ব্যবহার করি এবং এটি ভালভাবে কাজ করে। এটি স্থানীয় / দূরবর্তী ডেটাসোর্সগুলি করতে পারে এবং এটি খুব কনফিগারযোগ্য।

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ফিল্টারটি দ্বিতীয় alচ্ছিক যুক্তিও গ্রহণ করেbegin

দস্তাবেজগুলি থেকে :

। {সীমাবদ্ধতা_প্রকাশ | সীমাবদ্ধতা: সীমা: শুরু}

আরম্ভ (alচ্ছিক) স্ট্রিং |
সীমাবদ্ধতা শুরু করার জন্য নম্বর সূচক। নেতিবাচক সূচক হিসাবে, শুরু ইনপুটটির শেষে থেকে একটি অফসেট নির্দেশ করে। ডিফল্ট 0।

সুতরাং আপনার কোনও নতুন নির্দেশিকা তৈরি করার দরকার নেই , এই যুক্তিটি পৃষ্ঠার পর্বতারোধটি সেট করতে ব্যবহার করা যেতে পারে

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

3

আপনি সহজেই বুটস্ট্র্যাপ ইউআই নির্দেশিকাটি ব্যবহার করে এটি করতে পারেন।

এই উত্তরটি @ স্কটি ডট নেট দ্বারা প্রদত্ত উত্তরের একটি পরিবর্তন, আমি কোডটি পরিবর্তন করেছি কারণ <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

পূর্ববর্তী বার্তাগুলি মূলত কীভাবে নিজের দ্বারা পেজিং তৈরি করবেন তা প্রস্তাবিত। আপনি যদি আমার মতো হন এবং কোনও সমাপ্ত নির্দেশিকা পছন্দ করেন তবে আমি সবেমাত্র এনজিটিবেল নামে একটি দুর্দান্ত খুঁজে পেয়েছি । এটি বাছাই, ফিল্টারিং এবং পৃষ্ঠাবদ্ধকরণ সমর্থন করে।

এটি একটি খুব পরিষ্কার সমাধান, আপনার নিজের দৃষ্টিতে যা প্রয়োজন তা:

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

গিটহাবের লিঙ্ক: 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 স্কোপ ভেরিয়েবল যা স্কোপটিতে কাস্টমাইজ করা যায় অন্যথায় পি_সাইজের ডিফল্ট মান 5 এবং পি_এসটিপ 1 হয়।

যখন একটি পদক্ষেপ পৃষ্ঠায় পরিবর্তন হয় তখন পি_এসটিপ আপডেট হয় এবং কাস্ট_প্যাজিনেশন ফিল্টার দ্বারা একটি নতুন ফিল্টারিং ট্রিগার করবে। কাস্ট_পৃষ্ঠাবরণ ফিল্টার নীচের মতো পি_এসটিপ মানের উপর নির্ভর করে অ্যারের টুকরো টুকরো করে কেবল পৃষ্ঠাগুলি বিভাগে নির্বাচিত সক্রিয় রেকর্ডগুলি ফিরিয়ে দেয়

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

আমি আশা করি আমি মন্তব্য করতে পারি, তবে আমি কেবল এখানে এটি ছেড়ে দিতে হবে:

স্কটি ডট নেট এর উত্তর এবং ইউজার 2176745 এর পরবর্তী সংস্করণগুলির জন্য পুনরায় করা উভয়ই দুর্দান্ত তবে তারা দুজনেই এমন কিছু মিস করে যা আমার সংস্করণটি অ্যাঙ্গুলারজেএস (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

ওভারভিউ : ব্যবহারের পৃষ্ঠায়ণ ination

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

এইচটিএমএলে নিশ্চিত হয়ে নিন যে আপনি পজিশন ফিল্টারের 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>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.