I have knockout binding on table with columns. I was trying to achieve table sorting for each column.
The view looks like:
<table id="notes" class="notes_table">
<tr class="head">
<th data-bind='click: function() { SortItems("CreatedDate")}'>
<span>Date</span>
</th>
<th data-bind='click: function() { SortItems("Type")}'>
<span>Type</span>
</th>
<th data-bind='click: function() { SortItems("Category")}'>
<span>Category</span>
</th>
<th data-bind='click: function() {SortItems("AddedBy")}'>
<span>Added by</span>
</th>
</tr>
<tbody data-bind="template: { name: 'StudentNote', foreach: notes }"></tbody>
</table>
<script type="text/html" id="StudentNote">
<tr class="even">
<td><span data-bind="text: CreatedDate"></span></td>
<td><span data-bind="text: Type"></span></td>
<td><span data-bind="text: Category"></span></td>
<td><span data-bind="text: AddedBy"></span></td>
</tr>
</script>
and the javascript is like:
function notesViewModel() {
var _this = {};
_this.colName = "CreatedDate";
_this.sortOrder = "desc";
_this.notes = ko.observableArray();
_this.SortItems = function (ColumnName) {
var newNotes = _this.notes();
if (_this.sortOrder === "desc") {
this.notes(newNotes.sort(notesViewModel._getSortFunction = function (a, b) {
_this.sortOrder = "asc";
return a[ColumnName] < b[ColumnName] ? -1 : 1;
}));
} else {
this.notes(newNotes.sort(notesViewModel._getSortFunction = function (a, b) {
_this.sortOrder = "desc";
return a[ColumnName] > b[ColumnName] ? -1 : 1;
}));
}
};
ko.applyBindings(_this, $("body").get(0));
return _this;
Even though it does sorting, it just switches between ascending and descending sort on each of the column, but not recognises which column it is sorting.. How to do sorting by each column..
Try this:
function notesViewModel() {
var _this = {};
_this.colName = "CreatedDate";
_this.sortOrder = 1;
_this.notes = ko.observableArray();
_this.SortItems = function (ColumnName) {
if(ColumnName == _this.colName)
_this.sortOrder = _this.sortOrder * -1;
else
_this.colName = ColumnName;
_this.notes.sort(function (a, b) {
return (a[ColumnName] < b[ColumnName] ? -1 : 1) * _this.sortOrder;
});
};
ko.applyBindings(_this, $("body").get(0));
return _this;
}
Related
Hi I am new to jquery and HTML I am trying to sort my table by currency but its not sorting properly if its currency but if its alphabetical sorting its working anyone can help me or guide me I will realy appreciate thank you in advance.My currency format has thousand separator and decimal. whenever the th is clicked the row will be sort
function sortTable(f, n) {
var rows = $('#mytable tbody tr').get();
rows.sort(function(a, b) {
var A = getVal(a);
var B = getVal(b);
if (A < B) {
return -1 * f;
}
if (A > B) {
return 1 * f;
}
return 0;
});
function getVal(elm) {
var v = $(elm).children('td').eq(n).text().toUpperCase();
if ($.isNumeric(v)) {
v = parseInt(v, 10);
}
return v;
}
$.each(rows, function(index, row) {
$('#mytable').children('tbody').append(row);
});
}
var f_sl = 1;
var f_nm = 1;
$("#sl").click(function() {
f_sl *= -1;
var n = $(this).prevAll().length;
sortTable(f_sl, n);
});
$("#nm").click(function() {
f_nm *= -1;
var n = $(this).prevAll().length;
sortTable(f_nm, n);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable">
<thead>
<tr>
<th id="sl">VAL</th>
<th id="nm">name</th>
</tr>
</thead>
<tbody>
<tr>
<td>RM 1,000.00</td>
<td>AINA (W)</td>
</tr>
<tr>
<td>RM 20,000.00</td>
<td>HEYZA</td>
</tr>
<tr>
<td>RM 5,000.15</td>
<td>ANA</td>
</tr>
<tr>
<td>RM 5,000.16</td>
<td>ZED</td>
</tr>
</tbody>
</table>
You can use localeCompare, along with it's numeric option
Instead of:
if (A < B) {
return -1 * f;
}
if (A > B) {
return 1 * f;
}
return 0;
You would use:
if (f === 1) {
return A.localeCompare(B, 'en', {numeric: true});
} else {
return B.localeCompare(A, 'en', {numeric: true});
}
Also, localeCompare can handle the numerical values as Strings, so you don't need to parseInt() in your getVal function - The only additional change for handling Numbers is to use a Regex to remove all the , seperaters from your numbers while sorting; it won't have any affect after sorting, or on words
function sortTable(f, n) {
var rows = $('#mytable tbody tr').get();
rows.sort(function(a, b) {
var A = getVal(a).replace(/(\d),(?=\d)/g, '$1');
var B = getVal(b).replace(/(\d),(?=\d)/g, '$1');
if (f === 1) {
return A.localeCompare(B, 'en-UK', {
numeric: true
});
} else {
return B.localeCompare(A, 'en-UK', {
numeric: true
});
}
});
function getVal(elm) {
return $(elm).children('td').eq(n).text().toUpperCase();
}
$.each(rows, function(index, row) {
$('#mytable').children('tbody').append(row);
});
}
var f_sl = 1;
var f_nm = 1;
$("#sl").click(function() {
f_sl *= -1;
var n = $(this).prevAll().length;
sortTable(f_sl, n);
});
$("#nm").click(function() {
f_nm *= -1;
var n = $(this).prevAll().length;
sortTable(f_nm, n);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable">
<thead>
<tr>
<th id="sl">VAL</th>
<th id="nm">name</th>
</tr>
</thead>
<tbody>
<tr>
<td>RM 6,533.00</td>
<td>AINA (W)</td>
</tr>
<tr>
<td>RM 20.00</td>
<td>HEYZA</td>
</tr>
<tr>
<td>RM 1,174.00</td>
<td>ANA</td>
</tr>
<tr>
<td>RM 50.16</td>
<td>ZED</td>
</tr>
</tbody>
</table>
I have a table in html, I have set for each td an id that I will need to sort the table with a Jquery code.
Sorting works with the FireFox browser, but with Chrome it does not work ... do you know how to help me?
$(function() {
$(".table-user-th").click(function() {
var o = $(this).hasClass('asc') ? 'desc' : 'asc';
$('.table-user-th').removeClass('asc').removeClass('desc');
$(this).addClass(o);
var colIndex = $(this).prevAll().length;
var tbod = $(this).closest("table").find("tbody");
var rows = tbod.find("tr");
rows.sort(function(a, b) {
var A = $(a).find("td").eq(colIndex).attr('id');;
var B = $(b).find("td").eq(colIndex).attr('id');;
if (!isNaN(A)) A = Number(A);
if (!isNaN(B)) B = Number(B);
return o == 'asc' ? A > B : B > A;
});
$.each(rows, function(index, ele) {
tbod.append(ele);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
<thead>
<tr>
<th class="table-user-th">Firstname</th>
<th class="table-user-th">Lastname</th>
</tr>
</thead>
<tbody>
<tr>
<td id="Mark">Mark</td>
<td id="Red">Red</td>
</tr>
<tr>
<td id="Nick">Nick</td>
<td id="Sid">Sid</td>
</tr>
<tr>
<td id="Alex">Alex</td>
<td id="Nirv">Nirv</td>
</tr>
</tbody>
</table>
It seems like there is no purpose of using ids here.
Actually the problem was in you sort function. It should return not just true/false but the numeric difference between two values. As usual it is return -1/0/1
So here I wrote comparator func that does just that. And depending on sort type I just multiply it on -1 or 1.
I've also refactored a little bit your code not to use classes or ids. Using jquery you can use data method that stores data on element by key/value.
$(function() {
function cmp(a,b) {return a < b ? 1 : a > b ? -1 : 0}
$(".sortable-table").on('click', 'th', function() {
var th = $(this);
var colIndex = th.data('column');
if(typeof colIndex === 'undefined') {
return;
}
var sortType = th.data('sort') === 'asc' ? 'desc' : 'asc';
th.data('sort', sortType);
var table = $(this).closest("table");
table.find('thead th').removeClass('asc desc');
th.addClass(sortType);
var tbody = table.find("tbody");
var rows = tbody.find("tr");
rows.sort(function(a, b) {
var A = $(a).find("td").eq(colIndex).text();
var B = $(b).find("td").eq(colIndex).text();
return cmp(A,B) * (sortType === 'asc' ? -1 : 1);
});
$.each(rows, function(index, ele) {
tbody.append(ele);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" class="sortable-table">
<thead>
<tr>
<th data-column="0">Firstname</th>
<th data-column="1">Lastname</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Red</td>
</tr>
<tr>
<td>Nick</td>
<td>Sid</td>
</tr>
<tr>
<td>Alex</td>
<td>Nirv</td>
</tr>
</tbody>
</table>
Update
Added
var table = $(this).closest("table");
table.find('thead th').removeClass('asc desc');
th.addClass(sortType);
The table with the data-bindings currently looks like below:
Source Calls ChargeableCalls
Car Insurance
08434599111 3 2
08934345122 2 1
Home Insurance
08734599333 3 2
08034345555 2 1
The desired output should be like in the bellow example, The table should contain total values for Calls and ChargeableCalls grouped by Division, and total values for all Calls and ChargeableCalls within the table.
Source Calls ChargeableCalls
Car Insurance
08434599154 3 2
08934345555 2 1
Total Calls 5 Total CC 3
Home Insurance
08434599154 6 3
08934345555 1 0
Total Calls 7 Total CC 3
Total Calls All 24 Total CC All 12
Here are the bindings within the table:
<table class="table table-condensed" id="reportData">
<thead>
<tr>
<th>Source</th>
<th>TotalCalls</th>
<th>ChargeableCalls</th>
</tr>
</thead>
<tbody data-bind="foreach: groups">
<!-- ko foreach: $root.getGroup($data) -->
<tr data-bind="if: $index() == 0">
<td colspan="3" data-bind="text: division" class="division"></td>
</tr>
<tr>
<td data-bind="text: source"></td>
<td data-bind="text: totalCalls"></td>
<td data-bind="text: chargeableCalls"></td>
</tr>
<!-- /ko -->
</tbody>
Here's my ViewModel:
function GroupedReportingViewModel() {
var self = this;
self.results = ko.observableArray();
self.groupedResults = {};
self.getGroup = function (group) {
return self.groupedResults[group];
};
self.groupedResultsC = ko.computed(function () {
self.groupedResults = {};
ko.utils.arrayForEach(self.results(), function (r) {
if (!self.groupedResults[r.division]) self.groupedResults[r.division] = [];
self.groupedResults[r.division].push(r);
});
return self.groupedResults;
});
self.groups = ko.computed(function () {
var g = [];
for (x in self.groupedResultsC())
g.push(x);
return g;_
});
}
var model = new GroupedReportingViewModel();
ko.applyBindings(model);
The results observableArray gets populated from an ajax response, like below:
success: function (jsondata) {
model.results(jsondata["Data"]["Report"]);
}
The jsondata object looks like below:
{"Data":
{"Report":[ {"source":"08434599494","division":"Car Insurance","totalCalls":5, "chargeableCalls":23},
{"source":"08434599172","division":"Car Insurance","totalCalls":512,"chargeableCalls":44},
{"source":"08434599129","division":"Home Insurance","totalCalls":4, "chargeableCalls":2},
{"source":"08434599215","division":"Home Insurance","totalCalls":234, "chargeableCalls":54},
{"source":"08434599596","division":"Car Insurance","totalCalls":332, "chargeableCalls":266}
]
}
}
Q: How can I achieve the desired output?
In your example, groupedResults is a list of arrays. Instead of this, try making a ViewModel for a group. This ViewModel can then be used for working out the totals. For example...
function GroupViewModel(division) {
var self = this;
self.Division = division;
self.Items = ko.observableArray();
self.Count = ko.computed(function() {
var count = 0;
ko.utils.arrayForEach(self.Items(), function(r) { count += r.totalCalls; });
return count;
});
self.ChargeableCount = ko.computed(function() {
var count = 0;
ko.utils.arrayForEach(self.Items(), function(r) { count += r.chargeableCalls; });
return count;
});
}
You can simplify your main Viewmodel too, and push the items into the GroupViewModel instead:
function GroupedReportingViewModel() {
var self = this;
self.results = ko.observableArray();
self.groupedResults = ko.computed(function() {
var groups = [];
ko.utils.arrayForEach(self.Results(), function(r) {
var g = ko.utils.arrayFirst(groups, function(g) { return g.Division === r.division; });
if (!g) {
g = new GroupViewModel(r.division);
groups.push(g);
}
g.Items.push(r);
});
return groups;
});
self.TotalCount = ko.computed(function() {
var count = 0;
ko.utils.arrayForEach(self.results(), function(r) { count += r.totalCalls; });
return count;
});
self.TotalChargeableCount = ko.computed(function() {
var count = 0;
ko.utils.arrayForEach(self.results(), function(r) { count += r.chargeableCalls; });
return count;
});
}
Finally in your view, iterate through the groups, and then the items:
<tbody>
<!-- ko foreach: groupedResults -->
<tr>
<td colspan="3" data-bind="text: Division" class="division"></td>
</tr>
<!-- ko foreach: Items -->
<tr>
<td data-bind="text: source"></td>
<td data-bind="text: totalCalls"></td>
<td data-bind="text: chargeableCalls"></td>
</tr>
<!-- /ko -->
<tr>
<td>Total Calls</td>
<td data-bind="text: Count"></td>
<td>Total Chargeable:</td>
<td data-bind="text: ChargeableCount"></td>
</tr>
<!-- /ko -->
<tr>
<td>Total Calls All</td>
<td data-bind="text: TotalCount"></td>
<td>Total Chargeable All</td>
<td data-bind="text: TotalChargeableCount"></td>
</tr>
</tbody>
I have this angular app, where I display a table based on the records, with filters, but the problem is when I eneter a value in filter the records get filter but after removing filter value, it doesnt get updated, and also pagination keeps when we click next numbers keep reducing, I am new to angularjs any help would be greatly appreciated.
This is my html code:
<input type="search" placeholder="Search By Any..." ng-model="search.$" />
table-striped table-bordered">
<thead>
<tr>
<th>User</th>
<th>Content Type</th>
<th>Content Name</th>
<th>Start Time</th>
<th>End Time</th>
<th>Duration(In Secs)</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in filteredRecords
| filter: search
| offset: currentPage*itemsPerPage
| limitTo: itemsPerPage
| orderBy:sort:reverse track by $index">
<td>{{record.user}}</td>
<td>{{record.contentType}}</td>
<td>{{record.contentName}}</td>
<td>{{record.startTime}}</td>
<td>{{record.endTime}}</td>
<td>{{record.duration}}</td>
</tr>
</tbody>
<tfoot>
<td colspan="6">
<div class="pagination pull-left">
<ul>
<li ng-class="prevPageDisabled()"><a href
ng-click="prevPage()">« Prev</a></li>
<li ng-repeat="n in range()"
ng-class="{active: n == currentPage}" ng-click="setPage(n)">
{{n+1}}
</li>
<li ng-class="nextPageDisabled()"><a href
ng-click="nextPage()">Next »</a></li>
</ul>
</div>
</td>
</tfoot>
This is angular code:
angular.module("contentViewStatusApp")
.controller("contentViewStatusController", function($scope,
$filter,contentViewStatusService)
{
var records = contentViewStatusService.list();
$scope.changeSort = function(value)
{
if ($scope.sort == value)
{
$scope.reverse = !$scope.reverse;
return;
}
$scope.sort = value;
$scope.reverse = false;
}
$scope.itemsPerPage = 8;
$scope.currentPage = 0;
$scope.filteredRecords = [];
$scope.items = [];
$scope.range = function()
{
var rangeSize = 5;
var ret = [];
var start;
start = $scope.currentPage;
if (start > $scope.pageCount() - rangeSize && $scope.pageCount() > rangeSize)
{
start = $scope.pageCount() - rangeSize + 1;
}
if($scope.pageCount() > rangeSize)
for (var i = start; i < start + rangeSize; i++)
{
ret.push(i);
}
else
for (var i = start; i < $scope.pageCount()+1; i++)
{
ret.push(i);
}
return ret;
};
var filterBy = $filter('filter');
$scope.$watch('search', function(newValue)
{
$scope.filteredRecords = filterBy(records, newValue);
}, true);
$scope.prevPage = function()
{
if ($scope.currentPage > 0)
{
$scope.currentPage--;
}
};
$scope.prevPageDisabled = function()
{
return $scope.currentPage === 0 ? "disabled" : "";
};
$scope.pageCount = function()
{
return Math.ceil($scope.filteredRecords.length / $scope.itemsPerPage) - 1;
};
$scope.nextPage = function()
{
if ($scope.currentPage < $scope.pageCount())
{
$scope.currentPage++;
}
};
$scope.nextPageDisabled = function()
{
return $scope.currentPage === $scope.pageCount() ? "disabled" : "";
};
$scope.setPage = function(n)
{
$scope.currentPage = n;
};
});
#Mckenzie, for your scenario already plugin available where you can get more out of it.
Check out this plugin: ng-table ( https://github.com/esvit/ng-table )
See this example it does all your job that you require.
ng-table combining sorting and filtering
Stuck, I need to sort a table based off a custom attribute in the table row for each level then based off the text in the td itself. So for all levels go through and sort a higher level
So I have:
<table>
<tbody>
<tr data-level="1" data-parent="0"><td>3</td></tr>
<tr data-level="1" data-parent="0"><td>1</td></tr>
<tr data-level="2" data-parent="1"><td>1b</td></tr>
<tr data-level="2" data-parent="1"><td>1c</td></tr>
<tr data-level="2" data-parent="1"><td>1a</td></tr>
<tr data-level="1" data-parent="0"><td>2</td></tr>
</tbody>
</table>
my expectation would look like this:
<table>
<tbody>
<tr data-level="1" data-parent="0"><td>1</td></tr>
<tr data-level="2" data-parent="1"><td>1a</td></tr>
<tr data-level="2" data-parent="1"><td>1b</td></tr>
<tr data-level="2" data-parent="1"><td>1c</td></tr>
<tr data-level="1" data-parent="0"><td>2</td></tr>
<tr data-level="1" data-parent="0"><td>3</td></tr>
</tbody>
</table>
I have tried this:
function sortMultilevel(level){
var $sort = this;
var $table = $('table');
var $rows = $('tbody > tr[data-level="'+level+'"]',$table);
$rows.sort(function(a, b){
var keyA = $('td',a).text();
var keyB = $('td',b).text();
if($($sort).hasClass('asc')){
return (keyA > keyB) ? 1 : 0;
} else {
return (keyA < keyB) ? 0 : 1;
}
});
$.each($rows, function(index, row){
$table.append(row);
});
}
function doMultilevelSort(){
if($("tr").length > 0){
$("tr").not(".sorted").each(function(){
$(this).addClass("sorted");
var level = $(this).attr("data-level");
sortMultilevel(level);
console.log("sorting: " + level);
});
}
}
doMultilevelSort(); // call the function
I may be way over thinking this. If I am I am your student and I am all ears. Appreciate the look.
DEMO
$('#sort').click(function (e) {
var $table = $('#sort_me');
var $rows = $('tbody > tr', $table);
$rows.sort(function (a, b) {
var keyA = $('td', a).text();
var keyB = $('td', b).text();
return (keyA > keyB) ? 1 : 0;
});
$.each($rows, function (index, row) {
$table.append(row);
});
e.preventDefault();
});