I am working on an AngularJS solution and I am using datatables library to create responsive tables; Some of them should be displayed in Arabic, so when responsive columns must be hidden from left to right; How can I make that?
Below is my code:
<table datatable="ng" dt-options="vmAR.dtOptions" id="TableAR" class="table table-striped table-bordered">
<thead>
<tr>
<th>العمود 1</th>
<th>العمود 2</th>
<th>العمود 3</th>
<th ng-hide="true">test</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="object in List">
<td>{{object.param1}}</td>
<td ng-if="object.param2== '' " ng-bind="object.param3"></td>
<td ng-if="object.param2!= '' " ng-bind="object.param2"></td>
<td>{{object.param4}}</td>
<td ng-hide="true">{{object.param5}}</td>
</tr>
</tbody>
</table>
AngularJS code:
$scope.vmAR.dtOptions = DTOptionsBuilder.newOptions()
.withOption('paging', false)
.withOption('ordering', false)
.withOption('info', false)
.withOption('responsive', true);
Based on this link, I have tried the below, but nothing worked, it is still hiding columns from right to left:
$scope.vmAR.dtOptions = DTOptionsBuilder.newOptions()
//.withPaginationType('full_numbers')
.withOption('paging', false)
.withOption('ordering', false)
.withOption('info', false)
.withOption('responsive', true)
.withOption('columnDefs', [
{ responsivePriority: 1, targets: -1 }
]);
Any suggestion?
Update:
Even with the below code it didn't work:
$scope.vmAR.dtOptions = DTOptionsBuilder.newOptions()
//.withPaginationType('full_numbers')
.withOption('paging', false)
.withOption('ordering', false)
.withOption('info', false)
.withOption('responsive', true)
.withOption('columns', [
{ responsivePriority: 3 },
{ responsivePriority: 2 },
{ responsivePriority: 1 },
{ responsivePriority: 1 }
]);
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; }
So I have a table where I need to show parent deals and on ng-show(clicking parent deal) I want to show child deals.
<table class="table table-hover">
<thead class="thead-dark">
<tr>
<th scope="col">Name</th>
<th scope="col">No_Of_Orders</th>
<th scope="col">Size</th>
<th scope="col">Book_Size</th>
<th scope="col">Remarks</th>
<th scope="col">Price_Guidance</th>
<th scope="col">CONTROL</th>
<th scope="col">Status</th>
<th scope="col">Current_Cut_Off</th>
<th scope="col">Tenor</th>
<th scope="col">Book</th>
<th scope="col">ORDCOLUMN</th>
<th scope="col">PKEY</th>
<th scope="col">Save</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="parentDeal in parentDeals track by $index" ng-click="childShow(parentDeal.PKEY)">
<td>{{parentDeal.Name}}</td>
<td>{{parentDeal.No_Of_Orders}}</td>
<td>{{parentDeal.Size}}</td>
<td>{{parentDeal.Book_Size}}</td>
<td>{{parentDeal.Remarks}}</td>
<td>{{parentDeal.Price_Guidance}}</td>
<td>{{parentDeal.CONTROL}}</td>
<td>{{parentDeal.Status}}</td>
<td>{{parentDeal.Current_Cut_Off}}</td>
<td>{{parentDeal.Tenor}}</td>
<td>{{parentDeal.Book}}</td>
<td>{{parentDeal.ORDCOLUMN}}</td>
<td>{{parentDeal.PKEY}}</td>
<td>{{parentDeal.Save}}</td>
<tr ng-repeat="childDeal in childDeals track by $index" ng-show = "childRowShow_{{childDeal.PKEY}}">
<td>{{childDeal.Name}}</td>
<td>{{childDeal.No_Of_Orders}}</td>
<td>{{childDeal.Size}}</td>
<td>{{childDeal.Book_Size}}</td>
<td>{{childDeal.Remarks}}</td>
<td>{{childDeal.Price_Guidance}}</td>
<td>{{childDeal.CONTROL}}</td>
<td>{{childDeal.Status}}</td>
<td>{{childDeal.Current_Cut_Off}}</td>
<td>{{childDeal.Tenor}}</td>
<td>{{childDeal.Book}}</td>
<td>{{childDeal.ORDCOLUMN}}</td>
<td>{{childDeal.PKEY}}</td>
<td>{{childDeal.Save}}</td>
</tr>
</tr>
</tbody>
</table>
This is the basic data:-
$scope.allDeals = [
{
"ORDCOLUMN":"2017-11-17T05:00:00.000000000Z",
"CONTROL":"N",
"PKEY":"UD0000000000720",
"Name":"rajat10 10:19",
"Tenor":"0Y",
"Size":0,
"Price_Guidance":"43%",
"Remarks":"-",
"Book_Size":20,
"Status":"Open",
"No_Of_Orders":2,
"Current_Cut_Off":2.3,
"Book":"Book#ReOffer",
"Save":"Edit"
},
{
"ORDCOLUMN":"2017-11-17T05:00:00.000000000Z",
"CONTROL":"Y",
"PKEY":"UD0000000000720",
"Name":"rajat10 10:19",
"Tenor":"Multi ...",
"Size":0,
"Price_Guidance":"-",
"Remarks":"-",
"Book_Size":20,
"Status":" Open",
"No_Of_Orders":2,
"Current_Cut_Off":2.3,
"Book":"Book#ReOffer",
"Save":"Edit"
},
{
"ORDCOLUMN":"2017-11-17T05:00:00.000000000Z",
"CONTROL":"N",
"PKEY":"UD0000000000720",
"Name":"rajat10 10:19",
"Tenor":"Perp",
"Size":0,
"Price_Guidance":"19%",
"Remarks":"-",
"Book_Size":0,
"Status":"Open",
"No_Of_Orders":2,
"Current_Cut_Off":2.3,
"Book":"Book#ReOffer",
"Save":"Edit"
}
....and so on
]
So, this data can be grouped by PKEY and parent object has control - "Y", child object has control - "N". Note:- There can be objects where there is only parent deal with no child deals.
In my app.js:-
$scope.parentDeals = $scope.allDeals.filter(function (item,index) {
return item.CONTROL == "Y";
});
$scope.childDeals = [];
$scope.childShow = function (PKEY) {
if($scope["childRowShow_"+PKEY]){
$scope["childRowShow_"+PKEY] = false;
}
else{
$scope.childDeals = $scope.allDeals.filter(function (item,index) {
if(item.PKEY == PKEY && item.CONTROL == "N"){
return item;
}
});
$scope["childRowShow_"+PKEY] = true;
}
};
Here, I am making two arrays:- parentDeals and childDeals.
Right now, I am applying ng-repeat on the separate row so, child deals are showing after all parent deals. Is there any way I can show them below the respective parent deals or can apply a different solution?
Yes, with ng-repeat-start and ng-repeat-end, we can explicitly specify the starting and ending for ng-repeat. So, instead of using the ng-repeat directive on one single DOM element, we can specify the ng-repeat-start and ng-repeat-end on any two DOM elements.
For eg.
<div ng-app="app">
<table ng-controller="TestController">
<tr ng-repeat-start="d in data">
<td><strong>{{d.name}}</strong></td>
</tr>
<tr ng-repeat-end>
<td>{{ d.info }}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('app', []);
app.controller('TestController', function ($scope) {
$scope.data = [{
name: 'ABC',
info: 'Bangalore'
}, {
name: 'XYZ',
info: 'Mumbai'
}];
});
</script>
I use angular and angular-table to display multiple tables on the same page.
I need to create dynamic table with dynamic header and dynamic content.
Plunkr her
This is a working example with non dynamic header but I don't find how to make dynamic
The controller :
angular.module('plunker', ['ui.bootstrap',"angular-table","angular-tabs"]);
function ListCtrl($scope, $dialog) {
$scope.cols= ['index','name','email'];
$scope.list = [
{ index: 1, name: "Kristin Hill", email: "kristin#hill.com" },
{ index: 2, name: "Valerie Francis", email: "valerie#francis.com" },
...
];
$scope.config = {
itemsPerPage: 5,
fillLastPage: true
};
}
HTML
<!-- this work -->
<table class="table table-striped" at-table at-paginated at-list="list" at-config="config">
<thead></thead>
<tbody>
<tr>
<td at-implicit at-sortable at-attribute="name"></td>
<td at-implicit at-sortable at-attribute="name"></td>
<td at-implicit at-sortable at-attribute="email"></td>
</tr>
</tbody>
</table>
<!-- this fail ... -->
<table class="table table-striped" at-table at-paginated at-list="list" at-config="config">
<thead></thead>
<tbody>
<tr>
<td ng-repeat='col in cols' at-implicit at-sortable at-attribute="{{col}}"></td>
</tr>
</tbody>
</table>
I am missing some think or it is not possible with this module ?
Did you know another module where you can have dynamic header and pagination ? ( i try also ngTable but have some bug issu with data not being displayed )
Through the below code, you can generate dynamic header
<table class="table table-hover table-striped">
<tbody>
<tr class="accordion-toggle tblHeader">
<th ng-repeat="(key, val) in columns">{{key}}</th>
</tr>
<tr ng-repeat="row in rows">
<td ng-if="!$last" ng-repeat="col in key(row)" ng-init="val=row[col]">
{{val}}
</td>
</tr>
</tbody>
</table>
Angular Script
var app = angular.module('myApp', []);
app.controller('myControl', function ($scope, $http) {
$http.get('http://jsonplaceholder.typicode.com/todos').success(function (data) {
$scope.columns = data[0];
$scope.rows = data;
}).error(function (data, status) {
});
$scope.key = function (obj) {
if (!obj) return [];
return Object.keys(obj);
}
});
I am trying to implement DataTables server-side processing/pagination for a table in angularjs. I have used the DataTables example but my table does not show. I am pretty sure I am missing one slight thing but can't figure it out....tried many things....
My HTML:
<div class="table-responsive">
<table id="consolidatedPageTable" class="table table-condensed table-striped table-bordered" >
<thead>
<tr>
<th >Source</th>
<th >Mailing Date</th>
<th >Status</th>
<th >CPI</th>
<th >User ID</th>
<th >Program</th>
<th >Customer Number</th>
<th >Customer Name</th>
<th >DL Date</th>
</tr>
</thead>
</table>
My controller:
app.controller('ConsolidatedController', function($scope,$rootScope,$http,$filter,$location,$routeParams) {
createTable();
$location.path('consolidated');
});
function createTable(){
$(function(){
var table = $('#consolidatedPageTable').dataTable({
"destroy": true,
"processing": true,
"serverSide": true,
"ajax": "scripts/consolidationTable.php",
"columnDefs": [
{
"targets": [9],
"visible": false,
"searchable": true
}
]
});
})
}
My php scipt (I replaced server specific information with XXX)
<?php
error_reporting(0);
$table = "consolidated";
$primaryKey = "customerNumber";
$columns = array();
$columns[] = array('db' => 'source' , 'dt' => 0);
$columns[] = array("db"=>"mailingDate","dt"=>1);
$columns[] = array("db"=>"status","dt"=>2);
$columns[] = array("db"=>"cpi","dt"=>3);
$columns[] = array("db"=>"userId","dt"=>4);
$columns[] = array("db"=>"shorttext","dt"=>5);
$columns[] = array("db"=>"customerNumber","dt"=>6);
$columns[] = array("db"=>"customerName","dt"=>7);
$columns[] = array("db"=>"dlDate","dt"=>8);
$sql_details = array("user" => "XXX","pass" => "XXX","db" => "XXX","host" => "XXX");
require("ssp.class.php");
echo json_encode(SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns ));
?>
I can run the php script by itself and it displays the correct data in the format shown in the dataTables example. In my application though, on the screen all I get is the header line and it does not appear to be in a dataTables looking format.
Can anyone see what could be causing no data to show?
I beleive the "columnDefs" object should be an array:
I console logged this after using the DTColumnDefBuilder included in the angular-datatables package. I could be wrong - I am having some difficulty with DT as well.
I am making a table where I can show data from 3 arrays (2 has identical properties, 1 different).
<table class="table table-striped table-condensed table-hover">
<thead>
<tr ng-bind-html="head">
</tr>
</thead>
<tbody>
<tr ng-repeat="item in book[bigCurrentPage]">
<td ng-bind="{{row.item1}}"></td>
<td ng-bind="{{row.item2}}"></td>
<td ng-bind="{{row.item3}}"></td>
<td ng-bind="{{row.item4}}"></td>
<td ng-bind="{{row.item5}}"></td>
<td ng-bind="{{row.item6}}"></td>
<td ng-bind="{{row.item7}}"></td>
</tr>
</tbody>
</table>
$scope.row = { item1: "item.code", item2: "item.name" };
$scope.row = { item1: "item.num", item2: "item.name", item3: "item.category", item4: "item.location.name", item5: "item.toloc.name", item6: "item.department", item7: "item.adm", item8: "item.person.name" };
First array has 7 properties (num,name,category,location,department,adm,person) and other 2 arrays has 2 properties (code,name)
The problem lies in that when I use 2 of cells in a row, then other cells are still visible without any content. Is there a way to have one table which can ngRepeat arrays with different properties and property count?
Solution:
<table class="table table-striped table-condensed table-hover">
<thead>
<tr ng-bind-html="head"></tr>
</thead>
<tbody ng-include=activeTable>
</tbody>
</table>
<script type="text/ng-template" id="assets.html">
<tr ng-repeat="item in book[bigCurrentPage]">
<td ng-bind=item.num></td>
<td ng-bind=item.name></td>
<td ng-bind=item.category></td>
<td ng-bind=item.location.name></td>
<td ng-bind=item.department></td>
<td ng-bind=item.adm></td>
<td ng-bind=item.person.name></td>
</tr>
</script>
<script type="text/ng-template" id="persons.html">
<tr ng-repeat="item in book[bigCurrentPage]">
<td ng-bind=item.code></td>
<td ng-bind=item.name></td>
</tr>
</script>
<script type="text/ng-template" id="locations.html">
<tr ng-repeat="item in book[bigCurrentPage]">
<td ng-bind=item.code></td>
<td ng-bind=item.name></td>
</tr>
</script>
$scope.assetshow = function () {
$scope.asse = true;
$scope.pers = false;
$scope.loca = false;
$scope.bigTotalItems = $scope.copy.data.assets.length;
$scope.book = PageItems($scope.copy.data.assets, 17);
console.log($scope.bigCurrentPage)
$scope.row = { item1: "item.num", item2: "item.name", item3: "item.category", item4: "item.location.name", item5: "item.toloc.name", item6: "item.department", item7: "item.adm", item8: "item.person.name" };
$scope.head = '<th>Asset code</th><th>Asset name</th><th>Category</th>'
+ '<th>Location</th><th>Department</th><th>Administration</th><th>Person in charge</th>';
$scope.activeTable = "assets.html";
},
$scope.locationshow = function () {
$scope.asse = false;
$scope.pers = false;
$scope.loca = true;
//produce pages.
$scope.bigTotalItems = PageItems($scope.copy.data.locations);
$scope.book = PageItems($scope.copy.data.locations, 17);
$scope.head = '<th>Kods</th><th>Nosaukums</th>';
$scope.row = { item1: "item.code", item2: "item.name" };
$scope.activeTable = "locations.html";
},
$scope.personshow = function () {
$scope.asse = false;
$scope.pers = true;
$scope.loca = false;
//produce pages.
$scope.bigTotalItems = PageItems($scope.copy.data.persons);
$scope.book = PageItems($scope.copy.data.persons, 17);
$scope.head = '<th>Kods</th><th>Nosaukums</th></tr>';
$scope.row = { item1: "item.code", item2: "item.name" };
$scope.activeTable = "persons.html";
};
By changing activeTable string value table content changes.
DEMO: plnkr