JSFiddle - React, Tailwind, and code Playground

by Rishabh Sharma

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<div ng-controller="pageCtrl">
    <input type="text" ng-model="search" ng-change="filter()" placeholder="Search"/><br/>
    <br/>
    <ul>
        <li ng-repeat="data in filtered = (list | filter:search) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">{{data.name}}</li>
    </ul>
    <pagination data-boundary-links="true" data-num-pages="noOfPages" data-current-page="currentPage" max-size="maxSize" class="pagination-small" data-previous-text="&laquo;" data-next-text="&raquo;"></pagination>
</div>

JavaScript

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

app.filter('startFrom', function() {
    return function(input, start) {
        if(input) {
            start = +start; //parse to int
            return input.slice(start);
        }
        return [];
    }
});

function pageCtrl($scope) {
    $scope.list = [
        {"name":"name 1"},
        {"name":"name 2"},
        {"name":"name 3"},
        {"name":"name 4"},
        {"name":"name 5"},
        {"name":"name 6"},
        {"name":"name 7"},
        {"name":"name 8"},
        {"name":"name 9"},
        {"name":"name 10"},
        {"name":"name 11"},
        {"name":"name 12"},
        {"name":"name 13"},
        {"name":"name 14"},
        {"name":"name 15"},
        {"name":"name 16"},
        {"name":"name 17"},
        {"name":"name 18"},
        {"name":"name 19"},
        {"name":"name 20"},
        {"name":"Peter"},
        {"name":"Frank"},
        {"name":"Joe"},
        {"name":"Ralph"},
        {"name":"Gina"},
        {"name":"Sam"},
        {"name":"Britney"}
    ];

    $scope.currentPage = 1; //current page
    $scope.maxSize = 5; //pagination max size
    $scope.entryLimit = 5; //max rows for data table

    /* init pagination with $scope.list */
    $scope.noOfPages = Math.ceil($scope.list.length/$scope.entryLimit);
    $scope.setPage = function(pageNo) {
        $scope.currentPage = pageNo;
    };
    
    $scope.filter = function() {
        window.setTimeout(function() { //wait for 'filtered' to be changed
            /* change pagination with $scope.filtered */
            $scope.noOfPages = Math.ceil($scope.filtered.length/$scope.entryLimit);
        }, 10);
    };
};