How to reorder columns in angularjs - javascript

this is my html
<table class="table table-bordered table-responsive mar0 tablebg table-width">
<thead>
<tr>
<th ng-repeat="field in jsonData.fieldsNameList track by $index" class="field-name">
<span ng-click="onclicktableHeader(field)">{{field.fieldName}}</span>
<span class="check-align" ng-if="field.fieldType=='field'"><i ng-click="enableFilter(field)" tooltip="Enable Filtering" tooltip-append-to-body="true" tooltip-placement="up" ng-class="{'fa fa-check-square-o': !field.enableFiltering, 'fa fa-plus-circle': field.enableFiltering}"></i></span>
<span class="check-align" ng-if="field.fieldType=='field'"><i ng-click="enableSort(field)" tooltip="Enable Sorting" tooltip-append-to-body="true" tooltip-placement="up" ng-class="{'fa fa-check-square-o': !field.enableSorting, 'fa fa-plus-circle': field.enableSorting}"></i></span>
<i ng-click="deleteColumn(field)" class="fa fa-times"></i>
</th>
</tr>
</thead>
<tbody>
<tr>
<td ng-repeat="field in jsonData.fieldsNameList track by $index">
{{field.fieldName}}
</td>
</tr>
<tr>
<td ng-repeat="field in jsonData.fieldsNameList track by $index">
{{field.fieldName}}
</td>
</tr>
<tr>
<td ng-repeat="field in jsonData.fieldsNameList track by $index">
{{field.fieldName}}
</td>
</tr>
</tbody>
</table>
and this is my array which i am repeating
$scope.jsondata.fieldsNameList = [{ "enableFiltering": false, "enableSorting": false, "fieldId": "56adc5276e65744a03ed0c00", "fieldName": "fnamev2", "fieldType": "field" }, { "enableFiltering": false, "enableSorting": false, "fieldId": "56adc5276e65744a03ed0d21", "fieldName": "fnamev1", "fieldType": "field" }];
i want to reorder the columns of table by dragging it left and right, how to do this, and is their any way using angularjs or javascript

Related

How to expand a table using html / angular / javascript

I'm new in angular 2+. I have created a table in angular web api. I need to do it like this - when I press the button (icon) expand the table with the data from my web api.
I did it that way but it's not working. Could someone help me with a solution?
app.component.html
<div class="card-body">
<table datatable class="table table-striped table-bordered hover" [dtOptions]="dtOptions" style="width:100%">
<thead>
<tr>
<th width="2%" class="text-center"></th>
<th width="8%" class="text-center">Name</th>
<th width="8%" class="text-center">Price</th>
</tr>
</thead>
<tbody>
<tr *ngIf="empty">
<td colspan="8" class="text-center" translate>shared.table.not-found</td>
</tr>
<tr *ngFor="let product of products; index as i" (click)="onSelectLine(i)"
[ngClass]="{'tr-selected': selectedIndex === i}">
<td class="text-left">
<a type="button" (click)="onProductComponent(product)">
<i class="fa fa-chevron-right"></i>
</a>
</td>
<td class="text-left">{{product.name}}</td>
<td class="text-left">{{product.price}}</td>
</tr>
<thead>
<tr>
<td colspan="12" >
<div *ngIf="isShown" class="row container-fluid" id="divshow" >
<td class="text-left">{{product.name}}</td>
<td class="text-left">{{product.price}}</td>
</div>
</td>
</tr>
</thead>
</tbody>
</table>
</div>
</div>
app.component.ts
isShown = false;
onProductComponent(product: Product) {
this.isShown = ! this.isShown;
this._product = product;
this.productComponentService.getProduct(this._product.id)
.subscribe(element => {
});
}
It would be like this

You can add isShown property to every product. And change only that value.
If you want to have multiple rows opened than just remove the this.products.map() part from onProductComponent
public products = [
{ name: "Product 1", price: 101, isShown: false },
{ name: "Product 2", price: 102, isShown: false },
{ name: "Product 2", price: 103, isShown: false },
{ name: "Product 3", price: 104, isShown: false },
{ name: "Product 5", price: 105, isShown: false }
];
onProductComponent(product) {
this.products.map(p => {
if (product !== p) {
p.isShown = false;
}
});
product.isShown = !product.isShown;
}
This will lead to change in HTML because you can move the hidden section inside of the loop. Because you don't need to save product.
<div class="card-body">
<table datatable class="table table-striped table-bordered hover" style="width:100%">
<thead>
<tr>
<th width="2%" class="text-center"></th>
<th width="8%" class="text-center">Name</th>
<th width="8%" class="text-center">Price</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let product of products; index as i">
<tr>
<td class="text-left">
<a type="button" (click)="onProductComponent(product)">
<i class="fa fa-chevron-right"></i>
Open
</a>
</td>
<td class="text-left">{{product.name}}</td>
<td class="text-left">{{product.price}}</td>
</tr>
<thead>
<tr>
<td colspan="12">
<div *ngIf="product.isShown" class="row container-fluid" id="divshow">
<span class="text-left">{{product.name}}</span>
<span class="text-left">{{product.price}}</span>
</div>
</td>
</tr>
</thead>
</ng-container>
</tbody>
</table>
</div>
You can check a working example here

How Can I wrap a Column in Datatable

I am creating a DataTable and it has Column which displays hospital name and in some rows he hospital name is too big and the text is not wrapping, I wanted to wrap that column elements.
My Table HTML looks like:
<table id="example" class="table datatable table-responsive-md table-hover wrap" cell-spacing="0" data-id-field="code" data-sort-name="value1" data-sort-order="desc" data-pagination="false" data-show-pagination-switch="false">
<thead>
<tr>
<th data-field="code" class="" data-sortable="true">Name</th>
<th data-field="code" class="" data-sortable="true"><i class="fa fa-map-marker"></i></th>
<th data-field="code" class="" data-sortable="true">Type</th>
<th data-field="code" class="" data-sortable="true">Total</th>
<th data-field="code" class="" data-sortable="true">Available</th>
<th data-field="code" class="" data-sortable="true">Isolation</th>
<th data-field="code" class="" data-sortable="true">Oxygen</th>
<th data-field="code" class="" data-sortable="true">ICU/HDU</th>
<th data-field="code" class="" data-sortable="true">Contact1</th>
<th data-field="code" class="" data-sortable="true">Contact2</th>
<th data-field="code" class="" data-sortable="true">Contact3</th>
<th data-field="code" class="" data-sortable="true">Last Updated</th>
</tr>
</thead>
<tbody>
{% for hospital in data %}
<tr>
<td class="" style=" ">{{hospital['hospitalName']}}</td>
<td class=" "><i class="fa fa-map-marker "></i> </td>
<td class=" ">{{hospital['hospitalType']}}</td>
<td class=" ">{{hospital['bedStatus'].split('/')[0]}}</td>
<td class=" ">{{hospital['bedStatus'].split('/')[1]}}</td>
<td class=" ">-</td>
<td class=" ">-</td>
<td class=" ">-</td>
<td class=" ">Coming Soon<br>1234567890</td>
<td class=" ">Coming Soon<br>1234567890</td>
<td class=" ">Coming Soon<br>1234567890</td>
<td class=" ">{{hospital['lastUpdated']}}</td>
</tr>
{% endfor %}
</tbody>
</table>
And JS initialization for that
$(document).ready(function() {
$('#example').DataTable({
autoWidth: false,
columnDefs: [{
// "className": "dt-center",
"targets": "_all"
}],
paging: false,
responsive: true,
scrollX: true,
// responsive: true,
info: false,
// rowReorder: {
// // selector: 'td:nth-child(2)'
// },
});
});
The Table now looks like
and I wanted this something like this, but the First column text must be wraped, but here text is hidden through overflow:hidden, but it must be wrap

smart table get displayedCollection in the controller

I am using smart-table and I would like to get the value of displayedCollection in my controller.
<table id="oldUsersTable" st-table="displayedCollection" st-safe-src="allOldUsers" class="table table-striped">
<thead>
<tr>
<th class="table-width-auto">{{'oldUsers.tableTh_selected' | translate}}</th>
<th class="table-width-auto">{{'oldUsers.tableTh_firstName' | translate}}</th>
<th class="table-width-auto">{{'oldUsers.tableTh_lastName' | translate}}</th>
</tr>
<tr>
<th colspan="3">
<input class="form-control width-max" placeholder="{{'common.searchPlaceholder' | translate}}"
dom-search dom-search-timeout="800" dom-search-table-id="'oldUsersTable'" dom-search-page-size="pageSize"/>
</th>
</tr>
</thead>
<tbody>
<tr class="oldUsersTableTr" ng-repeat="row in displayedCollection" ng-class="selectedUserClass(row)" ng-click="selectUser(row)">
<td class="align-center">
<checkbox model="row.selected" classes="'margin-left-right-auto'"></checkbox>
</td>
<td>
{{row.firstName}}
</td>
<td>
{{row.lastName}}
</td>
<td style="width: 100px !important; height: 50px;">
<button class="btn btn-sm blue-steel oldUserDeleteButton" ng-click="deleteUser(row.uuid)">
{{'oldUsers.deleteUser' | translate}}
<i class="fa fa-trash-o"></i>
</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" class="text-center">
<div id="oldUsersPagination" st-pagination="" st-template="templates/fragments/smartTablePagination.html" st-items-by-page="pageSize" st-displayed-pages="10"></div>
</td>
</tr>
</tfoot>
In the controller I have tried to get the displayedCollection using (in according to this comment https://stackoverflow.com/a/42073243/13057292):
$scope.displayedCollection is undefined.
I have tried implementing this solution without success: https://stackoverflow.com/a/30294098/13057292
A Plunker with an example: http://plnkr.co/edit/DwYTmgaO2fiJjzap?preview
AngularJS v1.5 and smart-table v. 2.1.8

rowspan for 3 columns using angularJS

I have a category list that contains name and subject list.
The subject list contains name and course list.
The course list contain name.
I want to display this data in table that will rowspan category or subject if they are the same. For example:
Category Subject Course
cat1 sub1 ''
sub2 cour1
cour2
sub3 ''
cat3 ''
Currently I have it working for two columns using this:
<table class="curvetable5" style="width:99%">
<thead>
<tr>
<th width="30%">Category</th>
<th width="30%">Subject</th>
</tr>
</thead>
<tbody ng-repeat="category in organization">
<td rowspan="{{category.subjectList.length+1}}">{{category.categoryName}}</td>
<tr ng-repeat="subject in category.subjectList">
<td>{{ subject.name }}</td>
</tr>
</tbody>
</table>
However, I am having trouble doing it for 3 columns. This is the code I have that is not working. The course name are not being displayed and subject name become listed in column order instead of row order. Any suggestion:
<table class="curvetable5" style="width:99%">
<thead>
<tr>
<th width="30%">Category</th>
<th width="30%">Subject</th>
<th width="40%">Course</th>
</tr>
</thead>
<tbody ng-repeat="category in organization">
<td rowspan="{{category.subjectList.length+1}}">{{category.categoryName}}</td>
<tr ng-repeat="subject in category.subjectList">
<td rowspan="{{subject.courseList.length+1}}">{{ subject.name }}</td>
<tr ng-repeat="course in subject.courseList">
<td>{{ course.name }}</td>
</tr>
</tr>
</tbody>
</table>
Sample Data:
[
{"id":95,"categoryName":"A new catagory",
"subjectList":[{"id":112,"subjectname":"2ndnewcat","curcount":0,
"courseList":"[{\"name\":\"-\",\"curcount\":0}]"},
{"id":76,"subjectname":"ZZZZZZZZZZZZZZZZZZ_class","curcount":0,
"courseList":[{"coursename":"thiswillbenew111111111112","curcount":1}]}]},
{"id":93,"categoryName":"David Test",
"subjectList":[{"id":75,"subjectname":"This is a test","curcount":1,
"courseList":[{"coursename":"newewst1","curcount":0}]}]},
{"id":116,"categoryName":"New Category",
"subjectList":[{"id":79,"subjectname":"New Subject","curcount":2,
"courseList":[{"coursename":"ISO training part 2","curcount":0}]}]},
{"id":0,"categoryName":"cat1",
"subjectList":[{"id":15,"subjectname":"test","curcount":4,
"courseList":"[{\"name\":\"-\",\"curcount\":0}]"}]},
{"id":11,"categoryName":"cat2",
"subjectList":[{"id":68,"subjectname":"asdasd","curcount":5,
"courseList":[{"coursename":"david1","curcount":0},{"coursename":"thisisatest","curcount":0}]}]},
{"id":12,"categoryName":"cate3",
"subjectList":[{"id":12,"subjectname":"newest1","curcount":6,
"courseList":[{"coursename":"cous1","curcount":0}]}]},
{"id":163,"categoryName":"emptylist",
"subjectList":"[{\"name\":\"-\",\"curcount\":0}]"}
]
This is current code I am testing. It will will rowspan the category, display each subject once and then display all the courses for each subject in list in a single cell. I would prefer to rowspan subject too, but this is what I got working so far.
<table class="curvetable5" style="width:99%">
<thead>
<tr>
<th width="30%">Category</th>
<th width="30%">Subject</th>
<th width="40%">Course</th>
</tr>
</thead>
<tbody ng-repeat="category in organization">
<td rowspan="{{category.subjectList.length+1}}">{{category.categoryName}}</td>
<tr ng-repeat="subject in category.subjectList">
<td>{{ subject.subjectname }}</td>
<td> <li ng-repeat="course in subject.courseList" >{{ course.coursename }} </li></td>
</tr>
<td ng-if="category.subjectList.length==27"> </td>
<td ng-if="category.subjectList.length==27"> </td>
</tbody>
</table>
Thanks,
AB

The two column case should be:
<tbody ng-repeat="dept in org.deptList">
<tr ng-repeat="subj in dept.subjList">
<td rowspan="dept.subjList.length+1">
{{dept.name}}
</td>
<td>
{{subj.name}}
</td>
</tr>
</tbody>
For the three column case, nest a <table> in the <td> element:
<tbody ng-repeat="dept in org.deptList">
<tr ng-repeat="subj in dept.subjList">
<td rowspan="dept.subjList.length+1">
{{dept.name}}
</td>
<td>
<table>
<tr ng-repeat="class in subj.classList">
<td rowspan="subj.classList.length+1">
{{subj.name}}
</td>
<td>
{{class.name}}
</td>
</tr>
</table>
</td>
</tr>
</tbody>

how can i place a specific row(based on column value) always at bottom of table with ng-table?

I am new to AngularJs and ng-table, I tried to sort the ng-table with the sortable attribute its working fine but I had a row with the final result, here how can I use sortable with out impact on a specific row?
<table ng-table="tableParams" ng-model="Controller.data" class="table" show-filter="true">
<tr ng-if="entry.task_name!='Totals'" ng-class="{info: $even, active: $odd}" ng-repeat="entry in $data">
<td data-title="'Task Name'" sortable="'taskName'" filter="{ 'taskName': 'text' }"><div ng-show="entry.taskName!=false">{{entry.taskName}}</div></td>
<td data-title="'Planned Hours'" sortable="'plannedHours'">{{entry.plannedHours}}</td>
<td></td>
</tr>
<tr ng-if="entry.task_name ==='Totals'" ng-class="{info: $even, active: $odd}" ng-repeat="entry in $data">
<td data-title="'Task Name'" >{{entry.taskName}}</td>
<td data-title="'Planned Hours'">{{entry.plannedHours}}</td>
<td></td>
</tr>
<tr>
<td ng-show="repCtrl.noData" ng-bind="repCtrl.noData"></td>
</tr>
</table>

did you try to put this row in <tfoot>?
<table ng-table="tableParams" ng-model="Controller.data" class="table" show-filter="true">
<tbody>
<tr ng-class="{info: $even, active: $odd}" ng-repeat="entry in $data | filter: myFilter">
<td data-title="'Task Name'" sortable="'taskName'" filter="{ 'taskName': 'text' }">
<div ng-show="entry.taskName!=false">{{entry.taskName}}</div>
</td>
<td data-title="'Planned Hours'" sortable="'plannedHours'">{{entry.plannedHours}}</td>
<td></td>
</tr>
<tr>
<td ng-show="repCtrl.noData" ng-bind="repCtrl.noData"></td>
</tr>
</tbody>
<tfoot>
<tr ng-repeat="entry in $data | filter: {taskName:'Totals'}">
<td>{{entry.taskName}}</td>
<td>{{entry.plannedHours}}</td>
<td></td>
</tr>
</tfoot>
</table>
<script>
$scope.myFilter = function (item) {
return item.taskName !== 'Totals';
};
</script>
my plnkr with different data, but working as you expected: http://plnkr.co/edit/Rx7Kqp?p=preview

Categories

Resources