I am trying to do pagination for scope object in angularjs,for that am using jquery data table plugin.
But am getting Cannot read property 'insertBefore' of null error,Table datas are also not displaying.
What is the meaning for this error?Is anything wrong in my code?
var app= angular.module('myApp',[])
app.controller('myController',function($scope){
$scope.details=[
{
'name':'aaa',
'age':'20'
},
{
'name':'aaa',
'age':'20'
},
{
'name':'aaa',
'age':'20'
},
{
'name':'aaa',
'age':'20'
},
{
'name':'aaa',
'age':'20'
},
{
'name':'aaa',
'age':'20'
},
{
'name':'aaa',
'age':'20'
},
{
'name':'aaa',
'age':'20'
}
]
$scope.init = function(){
$('#myData').dataTable();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div ng-app="myApp" ng-controller="myController" ng-init="init()">
<table id="myData">
<thead>
<td>S.no</td>
<td>Name</td>
<td>Age</td>
</thead>
<tbody>
<tr ng-repeat="data in details">
<td>{{$index+1}}</td>
<td>{{data.name}}</td>
<td>{{data.age}}</td>
</tr>
</tbody>
</table>
</div>
Can anybody let me know what am wrong?Please correct me if am wrong.Thanks!!:-)
for perform jquery object in controller you can create an directive in this way
but for pagination in table you can download angular-table and add angular-table module to your app.and then use angular table in bellow way
angular table in your view :
<table id="myData" at-config="config" at-table at-list="details">
<tbody>
<tr >
<td at-implicit at-title='S.no'>{{$index+1}}</td>
<td at-implicit at-attribute="name" at-title='Name'></td>
<td at-implicit at-attribute="age" at-title='Age'></td>
</tr>
</tbody>
</table>
<at-pagination at-config="config" at-list="details"></at-pagination>
add config in your controller:
$scope.config = {
itemsPerPage: 10,
maxPages: 5,
currentPage: 0,
orderBy: 0,
fillLastPage: false
};
you can also use pagination directive for your purpose
Related
I have an array of object, which I am showing in table through ng-repeat.
<table>
<thead>
<tr>
<th ng-repeat="col in columnHeaders">{{col}}</th> //['Name', 'Bank Name','Code', 'Type','Status'];
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data track by $index">
<td ng-repeat="col in columnRows">{{row[col]}}</td> //['name', 'bankName','code', 'type','isActive'];
</tr>
</tbody>
</table>
I am using ng-repeat in <th></th> and <td></td> too. But my columnHeaders name and row property(columnRows) names are different. I want to change my property name to same as column header name while using ng-repeat on <td></td> tag.
I am thought of using alias 'as' but not sure how to use it for each element.
Can anyone help me?
Instead of using two columnRows and header rows(array of string) , make a single array of keyHash(column data key and header string )
check running fiddle for this
and code be like :-
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<table>
<thead>
<tr>
<th ng-repeat="col in columnRows">{{col.displayStr}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in data track by $index">
<td ng-repeat="col in columnRows">{{row[col.key]}}</td>
</tr>
</tbody>
</table>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.columnRows = [
{key:'name',displayStr:'Name'},
{key:'bankName',displayStr:'Bank Name'},
{key:'code',displayStr:'Code'},
{key:'type',displayStr:'Type'},
{key:'isActive',displayStr:'Status'}
]
$scope.data = [
{
name:'James',
bankName:'RBL',
code:'1234',
type:'Saving',
isActive:true
},
{
name:'Riyan',
bankName:'DSB',
code:'1234',
type:'Current',
isActive:true
}
];
});
</script>
</body>
</html>
I am using angular data table where i am generating table every time user selects an option.For the first input the data table render successfully but after that when user select onther option the data table disappear from the view.The problem can be solved if i place the data table options vm.dtOptions and vm.dtColumnDefs outside the function.But i need to solve the issue keeping the options inside the function as my $scope.ln is dynamically generated inside the function and i need this value to limit the loop.So how can i achieve my goal so that instead of disappearing multiple table can be showed based on user input?
var app = angular.module('myApp',['datatables']);
app.controller('MyCtrl', function($scope,DTOptionsBuilder,DTColumnBuilder,DTColumnDefBuilder) {
$scope.department = [
{value : "1", name : "sales"},
{value : "2", name : "admin"},
{value : "3", name : "other"}
];
$scope.dep=$scope.selected_dep;
$scope.depshow=function(){
$scope.dep=$scope.selected_dep;
if($scope.dep==1)
{
$scope.list = [
{"eid":"10","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"},
{"eid":"20","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"},
{"eid":"30","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"}
];
}
else if($scope.dep==2)
{
$scope.list = [
{"eid":"40","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"},
{"eid":"50","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"},
{"eid":"60","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"}
];
}
if($scope.dep==3) {
$scope.list = [
{"eid":"70","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"},
{"eid":"80","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"},
{"eid":"0","dyn1":"dval1","dyn2":"dval2","dyn3":"dval3","sales":"20"}
];
}
$scope.vm = {};
$scope.vm.dtOptions = DTOptionsBuilder.newOptions()
.withOption('order', [0, 'asc']);
$scope.ln=4;
$scope.vm.dtColumnDefs = [
];
for(var i=1;i<$scope.ln;i++){
$scope.vm.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef(i).notSortable());
}
}
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://phpflow.com/demo/angular_datatable_demo/angular-datatables.min.js"></script>
<script src="https://phpflow.com/demo/angular_datatable_demo/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://phpflow.com/demo/angular_datatable_demo/datatables.bootstrap.css">
</head>
<div class="container">
<div ng-app="myApp" ng-controller="MyCtrl">
Select <select ng-model="selected_dep" ng-change="depshow()" ng-options="item.value as item.name for item in department">
<option value="">select a department</option>
</select>
{{selected_dep}}
<table class="table table-striped table-bordered" dt-options="vm.dtOptions" dt-column-defs="vm.dtColumnDefs" datatable="ng">
<thead>
<tr>
<th>Employee ID</th>
<th>dynamic clm1</th>
<th>dynamic clm2</th>
<th>dynamic clm3</th>
<th>sales</th>
</thead>
<tbody>
<tr ng-repeat="data in list">
<td> {{ data.eid }} </td>
<td> {{ data.dyn1 }} </td>
<td> {{ data.dyn2 }} </td>
<td> {{ data.dyn3 }} </td>
<td> {{ data.sales }} </td>
</tr>
</tbody>
</table>
</div>
The reason for this is that you dont have brackets on the
else if($scope.dep==2)
Hello guys so i was running this simple HTML,Angular code and i can not get the movies title and url display in my html....but the $scope.test is displayinmg....HELP!!
angular.module('clientApp')
.controller('MoviesCtrl', function ($scope) {
$scope.test = "tester";
$scope.movies = [
{
title:"Green Card",
url:"https://www.youtube.com/watch?v=_i8C9gO91ts"
},
{
title: "Fidelawit ፊደላዊት",
url: "https://www.youtube.com/watch?v=B4u4A7CF3N0"
},
{
title: "Heran ሔራን",
url: "https://www.youtube.com/watch?v=_TlRGhOdLJ0"
},
{
title: "Lela Mafia ሌላ ማፊያ",
url: "https://www.youtube.com/watch?v=_i8C9gO91ts"
}
];
});
<table class="table table-striped">
<thead>
<th>Title</th>
<th>URL</th>
</thead>
<tbody>
<tr ng-repeat="movie in movies">
<td>{{ movie.title }}</td>
<td>{{ movie.url }}</td>
</tr>
</tbody>
</table>
Add the AngularJS and if it is the first place where you have worked with module, you need define it with empty brackets angular.module('clientApp', [])
angular.module('clientApp', [])
.controller('MoviesCtrl', function ($scope) {
$scope.test = "tester";
$scope.movies = [
{
title:"Green Card",
url:"https://www.youtube.com/watch?v=_i8C9gO91ts"
},
{
title: "Fidelawit ፊደላዊት",
url: "https://www.youtube.com/watch?v=B4u4A7CF3N0"
},
{
title: "Heran ሔራን",
url: "https://www.youtube.com/watch?v=_TlRGhOdLJ0"
},
{
title: "Lela Mafia ሌላ ማፊያ",
url: "https://www.youtube.com/watch?v=_i8C9gO91ts"
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='clientApp' ng-controller='MoviesCtrl'>
<table class="table table-striped">
<thead>
<th>Title</th>
<th>URL</th>
</thead>
<tbody>
<tr ng-repeat="(key, movie) in movies">
<td>{{ movie.title }}</td>
<td>{{ movie.url }}</td>
</tr>
</tbody>
</table>
</div>
You probably forgot to load angular.js.
So just add this file on above of all the script files.
<script src="angular.min.js"></script>
You can download this file from here.. https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js
And update angular.module('clientApp') to angular.module('clientApp', [])
Hence the modified code will look like this...
Controller file (.js)
angular.module('clientApp', [])
.controller('MoviesCtrl', function ($scope) {
$scope.test = "tester";
$scope.movies = [
{
title:"Green Card",
url:"https://www.youtube.com/watch?v=_i8C9gO91ts"
},
{
title: "Fidelawit ፊደላዊት",
url: "https://www.youtube.com/watch?v=B4u4A7CF3N0"
},
{
title: "Heran ሔራን",
url: "https://www.youtube.com/watch?v=_TlRGhOdLJ0"
},
{
title: "Lela Mafia ሌላ ማፊያ",
url: "https://www.youtube.com/watch?v=_i8C9gO91ts"
}
];
});
Html file
<script src="angular.min.js"></script>
<div ng-app='clientApp' ng-controller='MoviesCtrl'>
<table class="table table-striped">
<thead>
<th>Title</th>
<th>URL</th>
</thead>
<tbody>
<tr ng-repeat="(key, movie) in movies">
<td>{{ movie.title }}</td>
<td>{{ movie.url }}</td>
</tr>
</tbody>
</table>
</div>
The problem does not seems too big. Only two things I have done
Added to body to initialise the angular app. B
<body ng-app='clientApp'>
Added ng-controller to table tag
<table class="table table-striped" ng-controller="MoviesCtrl">
However this is must. Must make an [] for zero dependencies.
angular.module('clientApp', [])
Here it goes
angular.module('clientApp', [])
.controller('MoviesCtrl', function ($scope) {
$scope.test = "tester";
$scope.movies = [
{
title:"Green Card",
url:"https://www.youtube.com/watch?v=_i8C9gO91ts"
},
{
title: "Fidelawit ፊደላዊት",
url: "https://www.youtube.com/watch?v=B4u4A7CF3N0"
},
{
title: "Heran ሔራን",
url: "https://www.youtube.com/watch?v=_TlRGhOdLJ0"
},
{
title: "Lela Mafia ሌላ ማፊያ",
url: "https://www.youtube.com/watch?v=_i8C9gO91ts"
}
];
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
</head>
<body ng-app='clientApp'>
<table class="table table-striped" ng-controller="MoviesCtrl">
<thead>
<th>Title</th>
<th>URL</th>
</thead>
<tbody>
<tr ng-repeat="movie in movies">
<td>{{ movie.title }}</td>
<td>{{ movie.url }}</td>
</tr>
</tbody>
</table>
</body>
</html>
I have a simple Angular.js application that grabs tabular data from a mysql database and shows it in a simple bootstrap table. I’m using this code below to show the table column names without hardcoding them individually…
HTML:
<table class="table">
<thead>
<tr style="background:lightgrey">
<th ng-repeat="column in columns"> {{ column }} </th>
</tr>
</thead>
and in the controller I create ’$scope.columns’ with something like this…
var columnNames = function(dat) {
var columns = Object.keys(dat[0]).filter(function(key) {
if (dat[0].hasOwnProperty(key) && typeof key == 'string') {
return key;
}
});
return columns;
};
DataFactory.getTables(function(data) {
$scope.columns = columnNames(data);
$scope.tables = data;
});
And this works as expected and it’s great, but what about the the rest of the data.. So for example, the body of my table currently looks like this…
HTML:
<tbody>
<tr ng-repeat="x in tables ">
<td> {{ x.id}} </td>
<td> {{ x.name }} </td>
<td> {{ x.email }} </td>
<td> {{ x.company }} </td>
</tbody>
I’ve tried using two loops like this…
HTML:
<tbody>
<tr ng-repeat="x in tables">
<td ng-repeat=“column in columns”> {{ x.column }} </td>
</tr>
</tbody>
But this code doesn’t work, So is it possible to populate a table with angular without hardcoding the column names in HTML, and if so whats the most efficient way to do so?
You might want to try this https://jsfiddle.net/8w2sbs6L/.
<div data-ng-app="APP">
<table ng-controller="myController" border=1>
<thead>
<tr>
<td ng-repeat="column in columns">{{column}}</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in tables">
<td ng-repeat="column in columns">{{x[column]}}</td>
</tr>
</tbody>
</table>
</div>
<script>
'use strict';
angular.module('APP', [])
.controller('myController', ['$scope', function($scope){
$scope.tables = [
{
"column1":"row1-column1",
"column2":"row1-column2",
"column3":"row1-column3",
"column4":"row1-column4"
},
{
"column1":"row2-column1",
"column2":"row2-column2",
"column3":"row2-column3",
"column4":"row2-column4"
}
];
$scope.columns = [
"column1",
"column2",
"column3",
"column4"
];
}]);
</script>
There are two tables using the same source. These tables are using source binding of kendo templates. At present the source for both these tables are employees. Both these tables are displaying the same data.
Now, we need to modify it to show only check-box selected records in the result table. Also, when user clicks on the delete button on the result table, the check-box should be un-selected in the section table.
What modification do we need to do to make it work in MVVM?
Head
<head>
<title>MVVM Test</title>
<script type="text/javascript" src="lib/kendo/js/jquery.min.js"></script>
<script type="text/javascript" src="lib/kendo/js/kendo.web.min.js"></script>
<!----Kendo Templates-->
<script id="row-template" type="text/x-kendo-template">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: age"></td>
<td><button type="button" data-bind="click: deleteEmployee">Delete</button></td>
</tr>
</script>
<script id="selection-table-template" type="text/x-kendo-template">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: age"></td>
<td>
<input type="checkbox" name="selection" value="a">
</td>
</tr>
</script>
<!--MVVM Wiring using Kendo Binding-->
<script type="text/javascript">
$(document).ready(function () {
kendo.bind($("body"), viewModel);
});
</script>
</head>
MVVM
<script type="text/javascript">
var viewModel = kendo.observable({
// model definition
employees: [
{ name: "Lijo", age: "28" },
{ name: "Binu", age: "33" },
{ name: "Kiran", age: "29" }
],
personName: "",
personAge: "",
//Note: Business functions does not access any DOM elements using jquery.
//They are referring only the objects in the view model.
//business functions (uses "this" keyword - e.g. this.get("employees"))
addEmployee: function () {
this.get("employees").push({
name: this.get("personName"),
age: this.get("personAge")
});
this.set("personName", "");
this.set("personAge", "");
},
deleteEmployee: function (e) {
//person object is created using "e"
var person = e.data;
var employees = this.get("employees");
var index = employees.indexOf(person);
employees.splice(index, 1);
}
});
</script>
Body
<body>
<table id="selectionTable">
<thead>
<tr>
<th>
Name
</th>
<th>
Age
</th>
</tr>
</thead>
<tbody data-template="selection-table-template" data-bind="source: employees">
</tbody>
</table>
<br />
<hr />
<table id="resultTable">
<thead>
<tr>
<th>
Name
</th>
<th>
Age
</th>
</tr>
</thead>
<!--The data-template attribute tells Kendo UI that the employees objects should be formatted using a Kendo UI template. -->
<tbody data-template="row-template" data-bind="source: employees">
</tbody>
</table>
</body>
REFERENCES
set method - ObservableObject - Kedo API Reference
set method - kendo Model - Kedo API Reference
Filtering source in a Kendo Template
Kendo-UI grid Set Value in grid with Javascript
First things first.
If you remove the object from the viewModel when you delete it, it will be removed from your source table as well. You would need two arrays to handle this if you wanted it to be the way you describe. But based on the first part of your question, I thought I would post a solution.
HTML
<script id="row-template" type="text/x-kendo-template">
<tr data-bind="visible: isChecked">
<td data-bind="text: name"></td>
<td data-bind="text: age"></td>
<td>
<button type="button" data-bind="click: deleteEmployee">Delete</button>
</td>
</tr>
</script>
<script id="selection-table-template" type="text/x-kendo-template">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: age"></td>
<td>
<input type="checkbox" name="selection" data-bind="checked: isChecked"/>
</td>
</tr>
</script>
<table id="selectionTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody data-template="selection-table-template" data-bind="source: employees"/>
</table>
<br />
<hr />
<table id="resultTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody data-template="row-template" data-bind="source: employees"/>
</table>
JAVASCRIPT
var viewModel = kendo.observable({
employees: [
{ name: "Lijo", age: "28", isChecked: true },
{ name: "Binu", age: "33", isChecked: true },
{ name: "Kiran", age: "29", isChecked: true }
],
personName: "",
personAge: "",
addEmployee: function () {
this.get("employees").push({
name: this.get("personName"),
age: this.get("personAge")
});
this.set("personName", "");
this.set("personAge", "");
},
deleteEmployee: function (e) {
var person = e.data;
var employees = this.get("employees");
var index = employees.indexOf(person);
var employee = employees[index];
//set
employee.set('isChecked', false);
}
});
$(document).ready(function () {
kendo.bind($("body"), viewModel);
});
JSFiddle
Fiddle
Summary
Use data-bind="visible: isChecked" in "row-template" to show only selected records in the bottom table.
Make template for checkbox as
<input type="checkbox" name="selection" data-bind="checked: isChecked"/>
In the delete function, use following
employee.set('isChecked', false);
Use a dictionary to store [employee, boolean] to store employee and the checkbox state, and bind the dictionary to the view
Check this