Reputation: 87

Data Table plugin using Angular JS

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>

Upvotes: 0

Answers (2)

codewriter

Reputation: 87

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>

Upvotes: 0

Vicky Tripathy

Reputation: 11

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>

Upvotes: 1

Data Table plugin using Angular JS

Answers (2)

Related Questions