YouTube Icon

Code Playground.

How to Implement Pagination Searching and Sorting of data table using AngularJS

CFG

How to Implement Pagination Searching and Sorting of data table using AngularJS

You will figure out how to manufacture search sort and pagination of information table in Angularjs application utilizing php mysql. I will assist with making straightforward application with dynamic information get from database and do it looking through table information, arranging table fields and pagination table information. here we will utilize dirPagination.js for pagination. 

In this instructional exercise, we require to make file document and compose code for format utilizing bootstrap and furthermore compose code for angularjs application. at that point we will make one php programming interface document and compose code for getting all information from database table and return as json information. presently I use code php, you can likewise utilize laravel, codeigniter and so forth php structure. 

Along these lines, essentially we will make little and snappy model for pagination, looking and soring of information table like datatable. I additionally give demo connect so you can perceive what it looks like and what we are assembling now from this instructional exercise. So how about we follow howl essential advance to make. 

Stage 1: Create Database table 

Here in this progression, we have to make database with "labels" table. so I am going to give you sql inquiry for table make as recorded beneath: 

Labels table:

CREATE TABLE IF NOT EXISTS `tags` (

  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,

  `slug` varchar(255) COLLATE utf8_unicode_ci NOT NULL,

  `name` varchar(255) COLLATE utf8_unicode_ci NOT NULL,

  `meta_keyword` text COLLATE utf8_unicode_ci NOT NULL,

  `meta_description` text COLLATE utf8_unicode_ci NOT NULL,

  `created_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',

  `updated_at` timestamp NOT NULL DEFAULT '0000-00-00 00:00:00',

  PRIMARY KEY (`id`)

) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=537 

Step 2: Create index.php file

Here we need to create index.php file add bellow code. i also added dirPagination.js file, so you can download from here: dirPagination.js.

index.php

<!doctype html>

<html>

<head>

    <title>How to Implement Pagination Searching and Sorting of data table using AngularJS</title>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">

</head>

<body>

    <div ng-app="CrowdforGeeks" ng-controller="controller">

        <div class="container">

            <hr/>

            <h2 align="center">How to Implement Pagination Searching and Sorting of data table using AngularJS</h2>

            <hr/>

            <div class="row">

                <div class="col-md-6 pull-right">

                    <label>Search:</label>

                    <input type="text" ng-model="search" ng-change="filter()" placeholder="Please Search" class="form-control" />

                </div>

            </div>

            <hr/>

            <!-- All list of client data list-->

            <div class="row">

                <div class="col-md-12" ng-show="filter_data > 0">

                    <table class="table">

                        <thead>

                            <th>Name<a ng-click="client_sort_data('name');"><i class="glyphicon glyphicon-sort"></i></a></th>

                            <th>Slug<a ng-click="client_sort_data('slug');"><i class="glyphicon glyphicon-sort"></i></a></th>

                        </thead>

                        <tbody>

                            <tr dir-paginate="cdata in client_search = (file | filter:search | orderBy : base :reverse | itemsPerPage:10)">

                                <td>{{cdata.slug}}</td>

                                <td>{{cdata.name}}</td>

                            </tr>

                        </tbody>

                    </table>

                </div>

                <!-- Show message if no found any data records -->

                <div class="col-md-12" ng-show="filter_data == 0">

                    <div class="col-md-12">

                        <h4>No records found..</h4>

                    </div>

                </div>

                <!-- Show pagination data records -->

                <div class="col-md-12">

                    <div class="col-md-6" ng-show="filter_data > 0">

                        <dir-pagination-controls

                           max-size="5"

                           direction-links="true"

                           boundary-links="true" >

                        </dir-pagination-controls>

                    </div>

                </div>

            </div>

        </div>

    </div>



    <!-- Include External Libs -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>

    <script src="dirPagination.js"></script>

    <script src="crowdforgeeks.js"></script>



</body>

</html>

Step 3: Create crowdforgeeks.js file

var CrowdforGeeks = angular.module('CrowdforGeeks', ['ui.bootstrap', 'angularUtils.directives.dirPagination']);



CrowdforGeeks.filter('beginning_data', function() {

    return function(input, begin) {

        if (input) {

            begin = +begin;

            return input.slice(begin);

        }

        return [];

    }

});



CrowdforGeeks.controller('controller', function($scope, $http, $timeout) {



    $http.get('ajax_fetch.php').then(successCallback, errorCallback);

    function successCallback(response){

        //success code

        $scope.file = response.data;

        $scope.gridData = 1;

        $scope.total_limit = 10;

        $scope.filter_data = $scope.file.length;

        console.log($scope.file.length);

        $scope.total_users = $scope.file.length;

    }

    function errorCallback(error){

        //error code

    }



    $scope.pos_page = function(parm_pageno) {

        console.log(parm_pageno);

        $scope.gridData = parm_pageno;

    };

    $scope.filter = function() {

        $timeout(function() {

            $scope.filter_data = $scope.client_search.length;

        }, 20);

    };

    $scope.client_sort_data = function(base) {

        $scope.base = base;

        $scope.reverse = !$scope.reverse;

    };

});

Step 4: Create ajax_fetch.php file

<?php
$conn  = new mysqli('localhost', 'root', 'root', 'angular');
$sqlQuery = "select slug, name from tags order by id";
$sql_result = $conn->query($sqlQuery) or die($conn->error . __LINE__);
$fetch_data = [];
if ($sql_result->num_rows > 0) {
    while ($data_row = $sql_result->fetch_assoc()) {
        $fetch_data[] = $data_row;
    }
}
$sql_resdata = json_encode($fetch_data);
echo $sql_resdata;
?>

Now you are ready to run example.




CFG