Below is the html I have used to show data in the table, its working fine.
Now I want to convert it to jQuery Datatables.
HTML:-
<table cellpadding="3" class="table table-bordered">
<thead>
<tr class="success">
<th style="cursor: pointer;" ng-click="sort('DOB')"><b>DOB</b> <span class="glyphicon sort-icon" ng-show="sortKey=='DOB'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
<th style="cursor: pointer;" ng-click="sort('StateName')"><b>State</b> <span class="glyphicon sort-icon" ng-show="sortKey=='StateName'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
<th style="cursor: pointer;" ng-click="sort('FileId')"><b>Image</b> <span class="glyphicon sort-icon" ng-show="sortKey=='FileId'" ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span></th>
<th><b>Actions</b></th>
</tr>
</thead>
<tbody>
<tr dir-paginate="employee in employees|orderBy:sortKey:reverse|filter:search|itemsPerPage:5" ng-model="search">
<td>{{employee.DOB | date:'MM/dd/yyyy' }}
<td>{{employee.StateName}}
</td>
<td>
<img ng-src="UploadedFiles/{{employee.FilePath}}" class="img-circle" style="max-width: 50px" alt='Employee Image Missing' />
</td>
</tr>
</tbody>
</table>
Related
I am using Angular DataTables in my application and trying to create nested datatables with dynamic headers.
Here is my Html code.
<table datatable="ng" class="table table-striped table-bordered table-hover" dt-instance="dtInstance2" id="dtInvoicingData2" dt-options="dtOptions2" dt-column-defs="dtColumnDefs2">
<thead>
<tr>
<th ng-repeat="col in dtColumnDefs2">{{col.aTargets[0].sTitle | translate}} </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(index,client) in lstInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
<td ng-repeat="col in headerList2" ng-switch="col">
<span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span>
<span ng-switch-default>{{ client[col] }}</span>
</td>
</tr>
<tr ng-show="showViewDetail">
<div class="span12 pull-right" ng-show="showViewDetail">
<table datatable="ng" class="table table-striped table-bordered table-hover" dt-instance="dtInstance3" id="dtInvoicingData3" dt-options="dtOptions3" dt-column-defs="dtColumnDefs3">
<thead>
<tr>
<th ng-repeat="col3 in dtColumnDefs3">{{col3.aTargets[0].sTitle | translate}} </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(index,client) in lstInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
<td ng-repeat="col3 in headerList3" ng-switch="col">
<span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span>
<span ng-switch-default>{{ client[col3] }}</span>
</td>
</tr>
</tbody>
</table>
</div>
</tr>
</tbody>
</table>
Here is javascript Code
function makeDetailTable(data) {
var header = data[0],
dtColumns = [];
$scope.headerList2 = [];
var i = 0;
var key = "";
//create columns based on first row in Parent Datatable
for (var key in header) {
dtColumns.push(DTColumnDefBuilder.newColumnDef(i).withTitle(key));
$scope.headerList2.push(key);
i = i + 1;
}
$scope.dtColumnDefs2 = dtColumns;
$scope.dtOptions2 = DTOptionsBuilder.newOptions()
.withPaginationType('full_numbers')
.withButtons([
'excel',
{
text: 'Reset',
action: function (e, dt, node, config) {
$("#dtInvoicingData2").DataTable().search("").draw();
}
}
]);
}
$scope.btnViewDetails_Click = function (rowIndex) {
var detailList = $scope.lstInvoiceDetail[rowIndex]['lstDetail'];
var header3 = detailList[0],
dtColumns3 = [];
$scope.headerList3 = [];
var i = 0;
var key = "";
//create columns based on first row in child datatable
for (var key in header3) {
dtColumns3.push(DTColumnDefBuilder.newColumnDef(i).withTitle(key));
$scope.headerList3.push(key);
i = i + 1;
}
$scope.dtColumnDefs3 = dtColumns3;
$scope.dtInstance2 = null;
$scope.dtOptions3 = DTOptionsBuilder.newOptions()
.withPaginationType('full_numbers')
.withButtons([
'excel',
{
text: 'Reset',
action: function (e, dt, node, config) {
$("#dtInvoicingData3").DataTable().search("").draw();
}
}
]);
$scope.showViewDetail = true;
when I try to add child datatable it doesn't work and show console error
TypeError: Cannot set property '_DT_CellIndex' of undefined
I did search on this error but i have not find proper solution
Here is a little info related to this error
it says the problem is
Basically this issue came out because of miss matching count of th to td. be sure for number of th matches to td. hope this will help you.
Update:
Now i have trying this.
<table datatable="ng" class="table table-striped table-bordered table-hover" dt-instance="dtInstance2" id="dtInvoicingData2" dt-options="dtOptions2" dt-column-defs="dtColumnDefs2">
<thead>
<tr>
<th ng-repeat="col in dtColumnDefs2">{{col.aTargets[0].sTitle | translate}} </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(index,client) in lstInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
<td ng-repeat="col in headerList2" ng-switch="col">
<span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span>
<span ng-switch-default>{{ client[col] }}</span>
</td>
</tr>
<tr>
<td colspan="3">
<table class="table table-striped table-bordered table-hover" dt-instance="dtInstance3" id="dtInvoicingData3" dt-options="dtOptions3" dt-column-defs="dtColumnDefs3">
<thead>
<tr>
<th ng-repeat="col3 in headerList3">{{col3 | translate}} </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(index,client) in lstChildInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
<td ng-repeat="col3 in headerList3" ng-switch="col">
<!-- <span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span> -->
<span ng-switch-default>{{ client[col3] }}</span>
</td>
</tr>
</tbody>
</table>
</td>
<td style="display:none;"> </td>
<td style="display:none;"></td>
</tr>
</tbody>
</table>
Child Table is created on first row, i want to created on each row.
Do you have any idea about it?
Because you are trying to create two rows with different structures instead of nested tables.
Row 1 :
<tr ng-repeat="(index,client) in lstInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
<td ng-repeat="col in headerList2" ng-switch="col">
<span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span>
<span ng-switch-default>{{ client[col] }}</span>
</td>
</tr>
And Row 2 :
<tr ng-show="showViewDetail">
<div class="span12 pull-right" ng-show="showViewDetail">
<table datatable="ng" class="table table-striped table-bordered table-hover" dt-instance="dtInstance3" id="dtInvoicingData3" dt-options="dtOptions3" dt-column-defs="dtColumnDefs3">
<thead>
<tr>
<th ng-repeat="col3 in dtColumnDefs3">{{col3.aTargets[0].sTitle | translate}} </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(index,client) in lstInvoiceDetail" class="clickableRow" style="cursor: pointer;" title="Click to toggle collapse/expand day summaries for this store.">
<td ng-repeat="col3 in headerList3" ng-switch="col">
<span ng-switch-when="lstDetail"> <button type="button" ng-click="btnViewDetails_Click(index)" class="btn btn-sm btn-info">+</button></span>
<span ng-switch-default>{{ client[col3] }}</span>
</td>
</tr>
</tbody>
</table>
</div>
</tr>
and as far error states, data in both rows has different count for header and columns. It means your lists dtColumnDefs2, headerList2, dtColumnDefs3, and headerList3 have different counts.
I have a bootstrap table with expanding rows. Each row can expand into multiple rows, and those can too expand in multiple rows (3 levels in total).
The search does find items on the 3rd level but it doesn't display them correctly.
This is an example code on codepen.
https://codepen.io/anon/pen/gGOOBz
My HTML code is:
<table st-table="displayedCollection" st-safe-src="domains" class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr>
<th st-sort="name">Domains</th>
</tr>
<tr>
<th colspan="5"><input st-search="" class="form-control" placeholder="Search ..." type="text" /></th>
</tr>
</thead>
<tbody ng-cloak>
<tr ng-repeat-start="row in displayedCollection">
<td id="package1-{{$index}}" class="accordion-toggle data-exists cursor-pointer" data-toggle="collapse" data-parent="#OrderPackages-{{$index}}" data-target=".packageDetails1-{{$index}}">{{row.name}}
</td>
</tr>
<tr ng-repeat-end>
<td id="package2-{{$index}}" colspan="3">
<div class="accordion-body collapse packageDetails1-{{$index}} + 1">
<table st-table="beansCollection" st-safe-src="types" class="table table-condensed" style="border-collapse:collapse;">
<!--<thead>
<tr>
<th st-sort="name">Types</th>
</tr>
</thead>-->
<tbody>
<tr ng-repeat-start="beanType in row.beans">
<td id="type1-{{$index}}" class="accordion-toggle" data-toggle="collapse" data-parent="#typePackages-{{$index}}" data-target=".typesDetails1-{{$index}}">
{{beanType.name}}
</td>
<td align="right">
<button ng-click="getBeanName(beanType.name, null, beanType)" data-toggle="modal" data-target="#myModal" type="button" class="btn btn-default" ng-if="showButton(beanType.beans)">
Display
</button>
</td>
</tr>
<!---->
<tr ng-repeat-end ng-visible="false">
<td id="typeId2-{{$index}}" colspan="3">
<div class="accordion-body collapse typesDetails1-{{$index}} + 1">
<table class="table table-condensed">
<tbody>
<tr ng-repeat="leafBean in beanType.beans">
<td>
{{leafBean.name}}
</td>
<td align="right">
<button ng-click="getBeanName(beanType.name, leafBean.name, leafBean)" data-toggle="modal" data-target="#myModal" type="button" class="btn btn-default">Display</button>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
I want that when I search something under a certain row it would be displayed with the row above already expanded.
PHOTO:
Say I want to search for TBLEXCHANGEMEMBERSHIPS which is on the 3rd level.
When I input it into the search bar, it finds it but doesn't display it correctly.
What should I do?
I have this table:
<table class="table tenant-table text-center">
<thead>
<tr>
<th class="text-center">
<i class="fa fa-per"></i> Date
</th>
<th class="text-center">
<i class="fa fa-calendar"></i> Result
</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(k, v) in loanapps track by $index">
<td data-th="Date">{{v.ApplicationDate | date:'yyyy-MM-dd HH:mm:ss'}}</td>
<td data-th="Result">
<a ng-if="v.LoanStatus == 'Approved'" ui-sref="approved({loanid: {{v.ApplicationId}}})" class="btn dark btn-sm btn-outline sbold uppercase">
<i class="fa fa-share"></i> View
</a>
</td>
</tr>
</tbody>
</table>
I'm trying to include a parameter, the application id for the approved redirect but I'm not able to include that value in the url. Is the ui-sref approach I'm taking correct or I need to do some tweak?
Just had the same issue. Hopefully I figure out a better way to do it, but for now this will work:
approved({loanid: '{{v.ApplicationId}}'})
I am implementing bootstrap dropdown in my Angular application using accordion. When I click on accordion toggle, it is not sliding down and up.
This is my code:
<div class="container-fluid mt100 mr5 ml5">
<div class="row">
<table class='table s12'>
<tr style="background: #e4e9eb;">
<td>Name</td>
<td>Address</td>
<td>City</td>
<td>Edit</td>
<td></td>
</tr>
<tr ng-repeat="listItem in Items">
<td>
{{listItem.name}}
</td>
<td>
{{listItem.address}}
</td>
<td>
{{listItem.city}}
</td>
<td>
<a class="dropdown-toggle" ng-click="isCollapsed = !isCollapsed" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</a>
</td>
</tr>
<tr>
<td colspan="3" class="hiddenRow">
<div class="collapse" collapse="isCollapsed">
<table class="table display" style="border-collapse:collapse;">
<thead>
<tr class='pix2' style="background: #e4e9eb;">
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='item in listItem.subItems'>
<td>{{item.first}}</td>
<td>{{item.second}}</td>
<td>{{item.third}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
What is causing the issue?
how to select date from calendar pop up? There's a text field which is in disabled mode. When you click on the calendar icon at the corner of the text field the calendar pops up which displays the current date. I need to select the date which is two years back. How do i go about doing that in selenium java?
below is the html code:
<div class="datepicker datepicker-dropdown dropdown-menu" style="display: block; top: 429.1px; left: 234.5px;">
<div class="datepicker-days" style="display: block;">
<table class=" table-condensed">
<thead>
<tr>
<th class="prev" style="visibility: visible;">
<i class="icon-arrow-left"></i>
</th>
<th class="switch" colspan="5">February 2009</th>
<th class="next" style="visibility: visible;">
<i class="icon-arrow-right"></i>
</th>
</tr>
<tr>
<th class="dow">Su</th>
<th class="dow">Mo</th>
<th class="dow">Tu</th>
<th class="dow">We</th>
<th class="dow">Th</th>
<th class="dow">Fr</th>
<th class="dow">Sa</th>
</tr>
</thead>
<tbody>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
</tbody>
<tfoot>
</table>
</div>
<div class="datepicker-months" style="display: none;">
<table class="table-condensed">
<thead>
<tbody>
<tr>
<td colspan="7">
<span class="month">Jan</span>
<span class="month">Feb</span>
<span class="month">Mar</span>
<span class="month">Apr</span>
<span class="month">May</span>
<span class="month">Jun</span>
<span class="month">Jul</span>
<span class="month">Aug</span>
<span class="month">Sep</span>
<span class="month">Oct</span>
<span class="month">Nov</span>
<span class="month">Dec</span>
</td>
</tr>
</tbody>
<tfoot>
</table>
</div>
<div class="datepicker-years" style="display: none;">
</div>
use try catch statement
In try u can search for the element to be present in the page (any unique element related to the date to be selected)
In catch block you can click on the back button .
so in this case it will keep clicking on back/previous button in the calender to go to the previuos year .