Data Table plugin using Angular JS

Question

I am trying create a datatable plugin which reflect same as jQuery datatable plugin with single search box. My Data table plugin code using ngTable is not displaying any data and there there is no error on console also. Please help. Here is my code:

<html>
<head>
<title>Insert title here</title>
<script src="js/angular.min.js"></script>
<link rel="stylesheet" href="js/ng-table.min.css">
<script src="js/ng-table.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="dataTable">
<input type="text" ng-model="searchUser">
<table ng-table="vm.tableParams" class="table">
<tr ng-repeat="user in $data">
    <td title="'Name'"  sortable="'name'">
        {{user.name}}</td>
    <td title="'Age'" sortable="'age'">
        {{user.age}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
angular.module("myApp",["ngTable"])   .controller('dataTable',function(NgTableParams,$scope,$filter){
 var self = this;
 var data = [{name: "Moroni", age: 50},
     {name: "Simon", age: 43},
     {name: "Jacob", age: 27},
     {name: "Nephi", age: 29},
     {name: "Christian", age: 34},
     {name: "Tiancum", age: 43},
     {name: "Jacob", age: 27}
 ];
 self.tableParams = new NgTableParams({ count: 5}, { counts: [5, 10, 25],dataset: data});
 var usersData =  []; // initial data

 self.tableParams = new NgTableParams({
     page: 1,           
     count: 5
 }, {
 counts : [5, 10, 25],          
 getData: function($defer, params) {
     var searchedData = searchData();
     params.total(searchedData.length);
     $scope.users = searchedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
     $defer.resolve($scope.users);                           
 },
 $scope: { $data: {} }
});


    $scope.$watch("searchUser", function () {
     self.tableParams.reload();
    });

    var searchData = function(){
     if($scope.searchUser)
        return $filter('filter')(usersData,$scope.searchUser);
     return usersData;
    }; 
});
</script>
</body>
</html>

Vicky Tripathy · Accepted Answer · 2017-01-30 14:01:32Z

Look into this

<html>
<head>
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="dataTable">
<input type="text" ng-model="searchUser">
<table ng-table="vm.tableParams" class="table">
<tr ng-repeat="user in data">
    <td title="'Name'"  sortable="'name'">
        {{user.name}}</td>
    <td title="'Age'" sortable="'age'">
        {{user.age}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
angular.module("myApp",["ngTable"])   .controller('dataTable',function(NgTableParams,$scope,$filter){
 var self = this;
    $scope.data = [{name: "Moroni", age: 50},
     {name: "Simon", age: 43},
     {name: "Jacob", age: 27},
     {name: "Nephi", age: 29},
     {name: "Christian", age: 34},
     {name: "Tiancum", age: 43},
     {name: "Jacob", age: 27}
 ];
 self.tableParams = new NgTableParams({ count: 5}, { counts: [5, 10, 25],dataset: $scope.data});
 var usersData =  []; // initial data

 self.tableParams = new NgTableParams({
     page: 1,           
     count: 5
 }, {
 counts : [5, 10, 25],          
 getData: function($defer, params) {
     var searchedData = searchData();

     if (params) {
        params.total(searchedData.length);
        $scope.users = searchedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
        $defer.resolve($scope.users);
    }
                                
 },
 $scope: { $data: {} }
});


    $scope.$watch("searchUser", function () {
     self.tableParams.reload();
    });

    var searchData = function(){
     if($scope.searchUser)
        console.log($scope.searchUser);
        return $filter('filter')(usersData,$scope.searchUser);
     return usersData;
    }; 
});
</script>
</body>
</html>

Its loading data but pagination is not working if I add more than 10 records to data

codewriter · Accepted Answer · 2017-02-10 13:10:29Z

Following code works fine for me using init().

<html>
<head>
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="introController">
<br>
Search: <input type="text" ng-model="searchUser"/>
<table ng-table="tableParams" class="table table-striped">
<tr ng-repeat="user in $data">
    <td title="'Name'"  sortable="'name'">
        {{user.name}}</td>
    <td title="'Age'"  sortable="'age'">
        {{user.age}}</td>
     <td title="'Company'"  sortable="'company'">
        {{user.company}}</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var app=angular.module("myApp", ["ngTable"]);
app.controller('introController',function(NgTableParams,$scope,$filter){
 $scope.data = [{name: "Moroni", age: 50,company:"ABC"},
     {name: "Simon", age: 43,company:"ABC"},
     {name: "Jacob", age: 27,company:"ABC"},
     {name: "Nephi", age: 29,company:"ABC"},
     {name: "Christian", age: 34,company:"ABC"},
     {name: "Tiancum", age: 43,company:"ABC"},
     {name: "Jacob", age: 27,company:"ABC"}];

 var tempData=$scope.data;

 init();
 function init() {
        $scope.flag=false;
         $scope.tableParams = new NgTableParams({
             page: 1,
             count: 10,
             filter: {
                 message: ''
             },
             sorting: {
                 timestamp: 'asc'
             }
         },{
             getData: function ($defer, params) {

                 if(params)
                     {
                        var orderedData = params.sorting() ?
                        $filter('orderBy')($scope.data, params.orderBy()) : $scope.data;
                        params.total(orderedData.length);
                        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                     }             
             }
        });
  };
 $scope.tableParams = new NgTableParams({ count: 5}, { counts: [5, 10, 25], dataset: $scope.data});

 //search filter code
var searchData = function(){
    if($scope.searchUser)
        return $filter('filter')(tempData,$scope.searchUser);
    return tempData;
 };      
 $scope.$watch("searchUser", function (newValue,oldValue) { 
    if (oldValue !== undefined) {  
            var filterData=searchData();
            $scope.tableParams = new NgTableParams({ count: 10}, { counts: [5, 10, 25,100,1000], dataset:filterData}); 
        } 
 });
 });
</script>
</body>
</html>

Collectives™ on Stack Overflow

Data Table plugin using Angular JS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related