I have a list of dates coming from API and one such date is like "2017-07-05T10:53:24.000Z"
Am displaying dates in first column in datatable. In controller am defining the column like
$scope.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(0).withOption('type', 'date'),
DTColumnDefBuilder.newColumnDef(1).notSortable(),
....
];
HTML
<table datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs">
<thead>
<tr class="table-header-color-yellow">
<th class="table-head-style">Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="review in reviews">
<td>{{review.date | date}}</td>
</tr>
</tbody>
</table>
How can i sort the dates in descending order as it is sorting in ascending order as of now?
Just set the order option :
$scope.dtOptions = DTOptionsBuilder.newOptions()
.withOption('order', [[0, 'desc']])
Your usage of columnDefs is a little bit wrong. It should be
$scope.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(0).withOption('type', 'date').notSortable()
];
Convert date part into dd/MM/yyyy
Then in controller use
$scope.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef([1]).withOption('type', 'date')
];
and Html should be like this
<table class="table table-hover" datatable="ng" dt-column-defs="dtColumnDefs">
Related
i'm working on the datatable column visibility but i don't want all the table columns should shown in the visibility dropdown, only few need to be shown
I have tried with DTColumnDefBuilder.newColumnDef(0).withTitle('Name').notVisble() but it removed the column didn't solved it
html code
<table class="table table-striped dataTable no-footer dtr-inline" datatable="ng" dt-options="dataDtOptions" dt-instance="dataDtInstance" width="100%" dt-columns="dataDtColumns" dt-column-defs="dataDtColumnDefs">
<thead>
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
<th>column5</th>
<th>column6</th>
</tr>
</thead>
<tbody>
<tr style="cursor:pointer" ng-repeat="data in datas" >
<td>{{data[0]}}</td>
<td>{{data[1]}}</td>
<td>{{data[2]}}</td>
<td>{{data[3]}}</td>
<td>{{data[5]}}</td>
<td>{{data[6]}}</td>
</tr>
</tbody>
</table>
angulajs code
$scope.dataDtOptions = DTOptionsBuilder.newOptions()
.withDOM("<'row'<'col-sm-5'l><'col-sm-2 width-200 pull-right'B><'col-sm-5 pull-right'f>>" +"<'row'<'col-md-12't>>" +"<'row'<'col-sm-5'i><'col-sm-7'p>>")
.withPaginationType('full_numbers')
.withButtons([
'colvis',
{
extend: 'collection',
text: 'Export',
buttons: [
'csv',
'pdf'
]
}
]);
$scope.dataDtColumnDefs = [
DTColumnDefBuilder.newColumnDef(0).withTitle('column1'),
DTColumnDefBuilder.newColumnDef(1).withTitle('column2'),
DTColumnDefBuilder.newColumnDef(2).withTitle('column3'),
DTColumnDefBuilder.newColumnDef(3).withTitle('column4'),
DTColumnDefBuilder.newColumnDef(4).withTitle('column5'),
DTColumnDefBuilder.newColumnDef(5).withTitle('column6'),
]
so i don't want the first and last column in column visibilty dropdown
You can do the following:
DTColumnBuilder.newColumnDef(0).withClass('hidden')
And in CSS if you don't already have bootstrap installed
.hidden { display: none; }
Unlike other JSON data , I have simple arrays of two.
$scope.land = [ elephant, tiger, zebra ];
$scope.water = [ fish , octopus, crab];
I want to put up the array in table using ng-repeat. I tried this but data is not showing in proper format.
<table class="table table-dark">
<thead>
<tr>
<th scope="col">LAND</th>
<th scope="col">WATER</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="l in land track by $index">
<td>{{l}}</td>
<td>fish</td>
</tr>
</tbody>
</table>
EDIT:-
err in data showing vertical in table
enter image description here
new data :-
$scope.land = [ 'tiger in zoo', 'tiger in jungle', 'zebra'];
$scope.water = [ 'fish in pond'];
I think you are trying to display elements of two arrays next to each other (correct me if i'm wrong).
Here is a simple way to do that :
angular.module('myApp', [])
.controller('TestCtrl', function ($scope) {
$scope.land = [ 'tiger in zoo', 'tiger in jungle', 'zebra'];
$scope.water = [ 'fish in pond'];
$scope.combined = [];
var maxLength = ($scope.land.length > $scope.water.length) ? $scope.land.length : $scope.water.length;
//length is to be determined
for(var index = 0; index < maxLength ; index++) {
$scope.combined.push({
land: ($scope.land[index]) ? $scope.land[index] : '',
water: ($scope.water[index]) ? $scope.water[index] : ''
});
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="TestCtrl">
<table class="table table-dark">
<thead>
<tr>
<th scope="col">LAND</th>
<th scope="col">WATER</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in combined">
<td>{{item.land}}</td>
<td>{{item.water}}</td>
</tr>
</tbody>
</table>
</div>
I'm using two ng-repeats to display all the details in one table. The two lists are noway related to each other. I want to display first list(customers and their Ids) in left side and second list(sales and it's Ids) in right side of the table.
The output should be like this.
Customers Id Sales Id
----------------------------------
cust 1.1 1 site 2.1 4
cust 1.2 2 site 2.2 5
cust 1.3 3
cust 1.4 7
Plunker
Here you can find the solution for your question
Solved Plunker
$scope.resList = $scope.customers.map(function(value, index) {
return {
cust: value,
sal: $scope.sales[index]
}
});
Use table Following way
<table>
<tbody >
<tr >
<td valign='top'>
<table>
<tr><th>Customers</th> <th>Id</th> </tr>
<tr ng-repeat="customer in customers">
<td>{{customer.name}}</td><td>{{ customer.id}}</td>
</tr>
</table>
</td>
<td valign='top'>
<table>
<tr><th>Sites</th> <th>Id</th></tr>
<tr ng-repeat="site in sales" >
<td>{{site.name}}</td><td>{{ site.id}}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
Try this code it may help you
<tbody>
<tr ng-repeat="customer in customers">
<td>{{customer.name}}</td><td>{{ customer.id}}</td>
<td>{{sales[$index].name}}</td><td>{{sales[$index].id}}</td>
</tr>
</tbody>
angular.module('myApp', []).controller('MainController', function($scope){
$scope.haha = "wow";
$scope.customers = [
{name: 'cust 1.1',id:"1"},
{name: 'cust 1.2',id:"2"},
{name: 'cust 1.3',id:"3"},
{name: 'cust 1.4',id:"7"}
];
$scope.sales = [
{name: 'Site 2.1',id:"4"},
{name: 'Site 2.2',id:"5"}
];
});
/*
output something like this.(customers)
Customers Id Sales Id
----------------------------------
cust 1.1 1 site 2.1 4
cust 1.2 2 site 2.2 5
cust 1.3 3
cust 1.4 7
*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp" ng-controller="MainController">
<table>
<th>Customers</th>
<th>Id</th>
<th>Sites</th>
<th>Id</th>
<tbody>
<tr ng-repeat="customer in customers">
<td>{{customer.name}}</td>
<td>{{ customer.id}}</td>
<td>{{sales[$index].name}}</td>
<td>{{sales[$index].id}}</td>
</tr>
</tbody>
</table>
</body>
Using map function, you can combine the two arrays into single one like below
$scope.resultArray = $scope.customers.map(function(value, index) {
return {
data1: value,
data2: $scope.sales[index]
}
});
and you can loop it using ng-repeat.
Here is the Working fiddle
Hope this helps :)
I got a json of table which has columns and rows as below
$scope.table = {
Columns: [{Header:"22-Jul-15",SubHeaders: ["10:33 AM"]}
, {Header:"21-Jul-15",SubHeaders: ["03:40 AM"]}
, {Header:"17-Jul-15",SubHeaders: ["01:05 PM", "12:06 PM"]}]
, Rows:[{Items:[{Value:1},{Value:5},{Value:8},{Value:""}]}
,{Items:[{Value:2},{Value:6},{Value:9},{Value:""}]}
,{Items:[{Value:3},{Value:7},{Value:10},{Value:15}]}]
} //end of table
I want to display Columns.SubHeaders as Sub header row of a table.
Here what I tried, but did not work
<table class="table table-stripped table-bordered">
<thead>
<tr>
<th ng-repeat="col in table.Columns" colspan="{{col.SubHeaders.length}}">{{col.Header}}</th>
</tr>
<tr>
<td class="center text-black" ng-repeat="head in table.Columns[0].SubHeaders">{{head}}</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in table.Rows">
<td ng-repeat="item in row.Items">
{{item.Value}}
</td>
</tr>
</tbody>
</table>
I used head in table.Columns[0].SubHeaders just to show it is working for hard-coded index value.
How can I achieve this using single ng-repeat? I can use two ng-repeats but it will lead to unnecessary html markup.
Here is the complete fiddle
I created this fiddler (forked from yours):
https://jsfiddle.net/b50hvzef/1/
The idea is to join the subheaders as they are they actual columns:
<td class="center text-black" ng-repeat="head in subHeaders">{{head}}</td>
and the code looks like this:
var app = angular.module("app",[]);
app.controller("MyController", function ($scope, $http) {
$scope.table = {
Columns: [{Header:"22-Jul-15",SubHeaders: ["10:33 AM"]}
, {Header:"21-Jul-15",SubHeaders: ["03:40 AM"]}
, {Header:"17-Jul-15",SubHeaders: ["01:05 PM", "12:06 PM"]}]
,Rows:[{Items:[{Value:1},{Value:5},{Value:8}]}
,{Items:[{Value:2},{Value:6},{Value:9}]}
,{Items:[{Value:3},{Value:7},{Value:10}]}]
};
var subHeaders = [];
$scope.table.Columns.forEach(function(col) {
col.SubHeaders.forEach(function(subHeader) {
subHeaders.push(subHeader);
});
});
$scope.subHeaders = subHeaders;
});
Note that there is still a mismatch between columns and data. But it's up to you how to solve it.
Hope this helps.
I have used ng-scrollbar like this :
<tbody ng-scrollbar rebuild-on="rebuild:me" class="scrollme" id ="tempID">
and in ng table , included the broadcast
getData: function($defer, params) {
$scope.$broadcast('rebuild:me');
Now the ng-repeat is populating the tr in thead after first th instead of appending/loading it correctly in tbody
how to correctly display my results?
did you try this
getData: function($defer, params) {
$defer.promise.then(function(){
$scope.$broadcast('rebuild:me');
};
...
right after updating table
Edit 1
tbody is replacing by div and thus how layout became messy,check plunk
Edit 2
Here some workaround about this,need some editing,i will update later
Edit 3(final)
Finally get working example of ngtable and ngscrollbar together,but its not most beautiful solution but still:
1.
you need separate thead from rest of table into new table which locate right above main table
<thead>
<tr >
<th class="sortable" ng-class="{
'nameasc':'sort-asc' ,
'namedesc':'sort-desc'
}[sortTableParam]"
ng-click="SortBy('name')">
<div>name</div>
</th>
<th class="text-center sortable" ng-class="{
'ageasc':'sort-asc' ,
'agedesc':'sort-desc'
}[sortTableParam]"
ng-click="SortBy('age')">
<div>Age</div>
</th>
</tr>
</thead>
</table>
2.
second - hide thead in main table and wrap table into div tag,which will be processing by directive:
<div style="height:300px" ng-scrollbar rebuild-on="rebuild:me" class="scrollme">
<table ng-table="tableParams" show-filter="true" class="table">
<thead><tr><th ></th><th ></th></tr></thead>
<tbody >
<tr ng-repeat="user in $data">
<td data-title="'Name'" filter="{ 'name': 'text' }" sortable="name">
{{user.name}}
</td>
<td data-title="'Age'" sortable="age">
{{user.age}}
</td>
</tr>
</tbody>
</table>
</div>
3.
Clicks from header will trigger reloading data with sorting option,by binding SortBy function
var sorting = $scope.tableParams.$params.sorting;
var dir = sorting != null ? (sorting[param.toString()] == 'asc' ? 'desc' : 'asc') : 'asc';
var sort={};
sort[param.toString()]=dir;
$scope.tableParams.sorting(sort);
//edit classes in header for rows imaging(check plunk)
updatesorting(param);
};