JSFiddle - React, Tailwind, and code Playground

by mavdhana

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css">
<div ng-controller="TestCtrl">   
            <table id="items" class="table table-striped table-condensed table-hover" border="1">
                <thead>
                    <tr>
                        <th class="id" custom-sort order="'id'" sort="sort">Id&nbsp;</th>
                        <th class="name" custom-sort order="'name'" sort="sort">Name&nbsp;</th>
                        <th class="description" custom-sort order="'description'" sort="sort">Description&nbsp;</th>
                        <th class="field4" custom-sort order="'field4'" sort="sort">Field 4&nbsp;</th>
                        <th class="field5" custom-sort order="'field5'" sort="sort">Field 5&nbsp;</th>
                        </tr>
                </thead>
                <tfoot>
                    <td colspan="6">
                        <div class="pagination pull-right">
                            <ul>
                                <li ng-class="{disabled: currentPage == 0}">
                                    <a href ng-click="prevPage()">« Prev</a>
                                </li>
                            
                                <li ng-repeat="n in range(pagedItems.length, currentPage, currentPage + gap) "
                                    ng-class="{active: n == currentPage}"
                                ng-click="setPage()">
                             ...

JavaScript

var testmodule = angular.module('myModule', []);

testmodule.controller('TestCtrl', function ($scope, $filter) {

    // init
    $scope.sort = {       
                sortingOrder : 'id',
                reverse : false
            };
    
    $scope.gap = 2;
    
    $scope.filteredItems = [];
    $scope.groupedItems = [];
    $scope.itemsPerPage = 4;
    $scope.pagedItems = [];
    $scope.currentPage = 0;
    $scope.items = [
         {"id":1,"name":"name 1","description":"description 1","field4":"field4 1","field5":"field5 1"}, 
         {"id":2,"name":"name 2","description":"description 2","field4":"field4 2","field5":"field5 2"}, 
         {"id":3,"name":"name 3","description":"description 1","field4":"field4 3","field5":"field5 3"}, 
         {"id":4,"name":"name 1","description":"description 1","field4":"field4 1","field5":"field5 4"}, 
         {"id":5,"name":"name 2","description":"description 1","field4":"field4 2","field5":"field5 5"}, 
         {"id":6,"name":"name 3","description":"description 2","field4":"field4 3","field5":"field5 6"}, 
         {"id":7,"name":"name 3","description":"description 1","field4":"field4 1","field5":"field5 7"}, 
         {"id":8,"name":"name 2","description":"description 2","field4":"field4 2","field5":"field5 8"},
         {"id":9,"name":"name 1","description":"description 2","field4":"field4 3","field5":"field5 9"}, 
         {"id":10,"name":"name 1","description":"description 1","field4":"field4 1","field5":"field5 10"}
        
    ];

    var searchMatch = function (haystack, needle) {
        if (!needle) {
            return true;
        }
        return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1;
    };
    
   $scope.filterItems = function(item) {
     //all two selection to get matched data, not working 
            	if ($scope.pagedItems.name !== undefined && $scope.pagedItems.description !== undefined && $scope.pagedItems.name !== "false" && $scope.pagedItems.description !== "false") {
  ...