Getting Sorting Order of Table - javascript

I want to save the sorting order of the table and when refreshed it should sort on the saved status.
I am using the Tablesorter jquery plugin for sorting of table
I used javascript to store them in the localstorage but it is storing entire table
javascript Code :
$("#videoTable").on("sortEnd", function SaveSortOrder() {
var table_layout = $('#videoTable')[0].innerHTML;
localStorage.setItem("tableLayout",table_layout);
});
HTML Code:
<table class="table sortable" id="videoTable">
<thead>
<tr valign="middle">
<th data-sort="name" class="tooltipPoint col-lg-4" style="text-align:left;">Name <i class="fa fa-sort" aria-hidden="true"></i></th>
<th data-sort="name" class="tooltipPoint text-center" nowrap>Status <i class="fa fa-sort" aria-hidden="true"></i></th>
<th class="unclickable text-center">Action</th>
</tr>
</thead>
<tbody>
The body will be generated dynamically.
</tbody>
</table>
Is there any way to retrieve only the headers or only the column (Index of the column in a table) we are sorting so that I can modify the class based on the result.
Sorry for bad English. Thanks in advance.

Sort column. Save only what column how sorted (dont know how to get current sort from tablesorter)
On page load check if any sort is saved in local storage.
If so, apply it with sortList.
You should consider new data may be added. Thats why your solution is not right.

I am not sure if I understood your question correctly, but if you want to add a class to the column that was sorted you could manage that at the table header level, something along the lines of this:
jQuery("#videoTable th.tooltipPoint").on("click",function(){
jQuery("#videoTable th.tooltipPoint").removeClass("sorted");
jQuery(this).addClass("sorted");
});

Related

hide an item in the parent based on the data in the child loop in Angular

I have the following HTML code snippet where i am looping through my json response to display the data. It is a nested loop with *ngIf as in the HMTL below. What i need is based on the value of one of the items in the child loop i want to hide/show an item in the parent loop.
Basically i have mtr.eu inside the child loop which is an input type.Initially it will be empty and when the user enter any value in it, i want to show the item in the parent shown below. What would be the best suitable way to achieve this.
<div class="row accordian-head" accordion-heading>
<span class="w20">MPRN: {{header.gpr}}</span>
<span class="w20">Meter ID: {{header.num}}</span>
<span class="w20" *ngIf="mtr.eu">New data added</span>
</div>
<div class="accordian-inner-content">
<table class="table table-borderless">
<thead>
<tr class="meter-reading-header">
<th scope="col">Last read date</th>
<th scope="col">Last meter read</th>
<th scope="col">New reading (kWh)</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let mtr of header.mtrs" class="meter-reading-content">
<td>{{mtr.lrd}}</td>
<td>{{mtr.lrv}}</td>
<td>
<input type="number" name="newReading" class="form-control new-reading-input"
placeholder="eg. 12345" [(ngModel)]="mtr.eu">
</td>
</tr>
</tbody>
</table>
</div>
</accordion-group>
You can not use the child variables in the parent node. Instead, you can make a getter where you can check the records which has mu value. based on that getter value you can show the record on the parent element.
The only thing you need to do is write a function and pass your list of items into it. inside that use filter to check for required data(in your case its mt.mu). then return the data. Based on returned data you can show the element.
But when you call any function from the template it calls the function recursively.
So as a best practice I would prefer using pipes to do the same logic. Which makes my code much better.
I hope this helps you to achieve your need.

Trying to get the json variable where bootstrap tables save data

Hello guys I hope you can help me, I'm using bootstrap table to order the data from json query, specially this source example and I'm using chrome:
<link href="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.js"></script>
<table
id="table"
data-toggle="table"
data-flat="true"
data-search="true"
data-url="http://127.0.0.0:8000/hello">
<thead>
<tr>
<th data-field="field.name" data-sortable="true">Name</th>
<th data-field="field.count" data-sortable="true">Stargazers</th>
<th data-field="field.count.forks" data-sortable="true">Forks</th>
<th data-field="field.description" data-sortable="true">Description</th>
</tr>
</thead>
</table>
This works fine, the problem is that If I try to re order data that previously I edit the dome with a for it shows again the data in the json object and order the row.
I think, for some reason I need to append data to the json object the server responses, the issue is that I can not see where is or which is the variable name where boostap table storage this information, I can see the json in the network option "in chrome" but I need to get the name variable to append more data.
It would help me a lot to know how to get this, any idea ?

dynamic column headers in a sorted table

I'm trying to loop through an array in order to print some column headers dynamically. I see that the array values are inserted into the HTML code, but I'm unable to sort my table whenever I click on one of the column headers.
Strange thing is: when I replace the {{ colHeader }} variable with plaintext html the tablesorter is functioning normally. So does anyone know what I'm doing wrong, and how to fix it?
<script type="text/javascript">
$scope.colHeaders = {
'id' ,
'name' ,
'symbol',
};
$scope.sortType = 'id'; // specifies column to sort
</script>
<table class="table">
<thead>
<tr>
<th ng-repeat="colHeader in colHeaders">
<a href="#" ng-click="sortType = '{{ colHeader }}'">
column header
</a>
</th>
</tr>
</thead>
</table>
Using inline functions in html templates is a bad idea.
Try using a function from your controller like this: <th ng-repeat="colHeader in colHeaders" ng-click="sortBy(colHeader)">
Here is a working plunker: https://plnkr.co/edit/NTgjVpKoKhrjyP1YuN2n

How to replicate a HTML table code when clicked on a button using angular js?

I have whole table created in a Html but I want to implement the functionality where if I click on a text I need to replicate the same table (Html) code in my application.
My HTML:
<th class="bx--table-header bx--table-sort" data-event="sort" ng-click="vm.addTowerTable()">
<a class="text-decoration-none"><i class="fa fa-plus-circle" aria-hidden="true" style="padding-right:10px;"></i>Add Tower</a>
</th>
I have a ADD TOWER as my text when I click on it I need to add a whole table... How can I implement it using angularjs?
You could use ng-repeat to loop over a dummy array whose length is the number of tables you need:
<table ng-repeat="table in vm.tables">
...
<th ng-click="vm.addTowerTable()">
...
</th>
</table>
And then in your controller:
// Right now I am just pushing null since we need something in the
// array. You could push some data about each table.
vm.tables = [null];
vm.addTowerTable = function() {
vm.tables.push(null);
};
If you don't like using a dummy array, check out some other solutions people have come up with to make it look a little nicer.

JQuery update table cell and add new table rows

A newbie question,really.
Suppose I have a html table like this:
<div id="div1">
<table id="table1" border="1">
<tr>
<th bgcolor="#eee"><strong>ID</strong></th>
<th bgcolor="#eee"><strong>Price</strong></th>
</tr>
<tr>
<td id='id1'>1111</td>
<td id='id2'>2222</td>
</tr>
</table>
</div>
Now I am using Jquery to get data in json format from server, like this:
id1,19.99
id2,29.99
id3,39.00
What I want to achieve is: Look at the data, if the id already exist in table, update the cell value. If id doesn't exist in the table, add a new row. How do I do that in JQuery? I just started to learn JQuery. Now I can use ajax call to get the data, but don't know how to update the table. Any help is appreciated.
To see if a cell exists, you must test the .length of its selector:
$('#'+str).length; // zero if there is no such ID
Or you can just update the contents of that cell with .text(), which will fail if the ID doesn't exist:
$('#'+str).text(newvalue);
To create a new row, you can .append() it to the table:
$('table tr#id_of_row').append('<td id="'+str+'">'+newvalue+'</td>');
You can get a cell by id like this
$('#'+id).length //length will be 0 if not found or 1 if found
Update the value using
$('#'+id).text(new_value);

Categories