AngularJS Search and Filter with Pagination

हम सीखते हैं एक बेहद practical और जरूरी topic जो किसी भी real-world data listing में इस्तेमाल होता है:

🔍 AngularJS Search and Filter with Pagination

(Live Search, Smart Filtering और Simple Pagination — एकदम W3Schools-style में!)

---

📌 यह चैप्टर क्यों ज़रूरी है?

जब आपके पास कई सारे items या data हो (जैसे: products, users, articles), तब आपको 3 चीजें चाहिए:

• 🔎 Live Search: टाइप करते ही result filter हो जाए
• 🧮 Filters: category, status या tags के हिसाब से
• 📄 Pagination: सारे data को एक साथ न दिखाकर, pages में बांटना

AngularJS इन तीनों को बहुत ही आसानी से handle करता है — बिना किसी external plugin के।

---

🎯 इस चैप्टर में हम बनाएंगे:

• एक searchable, filterable और paginated user list
• Live search box
• Dropdown filter
• Pagination (custom code के ज़रिए)

---

✅ Step 1: Sample Data (Controller)

var app = angular.module("searchApp", []);
app.controller("UserCtrl", function($scope) {
  $scope.users = [
    { name: "Amit", role: "Admin" },
    { name: "Sara", role: "User" },
    { name: "John", role: "Guest" },
    { name: "Ravi", role: "User" },
    { name: "Priya", role: "Admin" },
    { name: "Anita", role: "User" },
    { name: "David", role: "Guest" },
    { name: "Meena", role: "User" },
    { name: "Rohan", role: "User" },
    { name: "Seema", role: "Admin" }
  ];

  $scope.searchText = "";
  $scope.roleFilter = "";
  $scope.currentPage = 1;
  $scope.pageSize = 5;

  // Custom Filtered and Paginated List
  $scope.getFilteredUsers = function() {
    var filtered = $scope.users.filter(function(user) {
      var matchesSearch = !$scope.searchText || user.name.toLowerCase().includes($scope.searchText.toLowerCase());
      var matchesRole = !$scope.roleFilter || user.role === $scope.roleFilter;
      return matchesSearch && matchesRole;
    });

    var start = ($scope.currentPage - 1) * $scope.pageSize;
    return filtered.slice(start, start + $scope.pageSize);
  };

  $scope.totalPages = function() {
    var totalFiltered = $scope.users.filter(function(user) {
      var matchesSearch = !$scope.searchText || user.name.toLowerCase().includes($scope.searchText.toLowerCase());
      var matchesRole = !$scope.roleFilter || user.role === $scope.roleFilter;
      return matchesSearch && matchesRole;
    });

    return Math.ceil(totalFiltered.length / $scope.pageSize);
  };

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

---

✅ Step 2: HTML Template

<div ng-app="searchApp" ng-controller="UserCtrl" class="container p-4">

  <h3>User Directory</h3>

  <!-- Search & Filter -->
  <div class="row mb-3">
    <div class="col-md-6">
      <input type="text" ng-model="searchText" placeholder="Search by name..." class="form-control" />
    </div>
    <div class="col-md-4">
      <select ng-model="roleFilter" class="form-select">
        <option value="">All Roles</option>
        <option value="Admin">Admin</option>
        <option value="User">User</option>
        <option value="Guest">Guest</option>
      </select>
    </div>
  </div>

  <!-- User Table -->
  <table class="table table-bordered table-striped">
    <thead class="table-dark">
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Role</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="user in getFilteredUsers()">
        <td>{{ ($index + 1) + (currentPage - 1) * pageSize }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.role }}</td>
      </tr>
    </tbody>
  </table>

  <!-- Pagination -->
  <nav>
    <ul class="pagination">
      <li class="page-item" ng-class="{disabled: currentPage == 1}">
        <a class="page-link" href="" ng-click="setPage(currentPage - 1)">«</a>
      </li>
      <li class="page-item" ng-repeat="n in [].constructor(totalPages()) track by $index"
          ng-class="{active: $index + 1 == currentPage}">
        <a class="page-link" href="" ng-click="setPage($index + 1)">{{ $index + 1 }}</a>
      </li>
      <li class="page-item" ng-class="{disabled: currentPage == totalPages()}">
        <a class="page-link" href="" ng-click="setPage(currentPage + 1)">»</a>
      </li>
    </ul>
  </nav>

</div>

✔ Works perfectly with Bootstrap 5 styles
✔ Pagination buttons auto-disabled
✔ Search + Filter combined work
✔ Easy to plug-in for any table/list view

---

🧠 अभ्यास प्रश्न (Exercise)

1. AngularJS में live search कैसे implement होता है?
2. Pagination का custom logic क्या है?
3. ng-repeat के साथ pagination offset कैसे निकालते हैं?

---

✅ आपने क्या सीखा?

• AngularJS में Live Search और Dropdown Filter लगाना
• Custom Pagination logic (slice(), pageSize, currentPage)
• Bootstrap + AngularJS का सुंदर UI
• Smart and scalable listing बनाना
• ng-repeat के साथ dynamic filters implement करना

---

🎯 अब आप किसी भी AngularJS app में filters, search bar और pagination जोड़ सकते हैं — वो भी lightweight और responsive तरीके से!