I am using this Bootstrap table plugin. But sorting by date is not working properly.
Here is the code:
<table class=" table-striped" id="table" data-toggle="table"
data-search="true"
data-filter-control="true"
data-click-to-select="true"
data-escape="false">
<thead>
<tr>
<th data-field="expiry_date" data-sortable="true" scope="col"><?= 'expiry date' ?></th>
</tr>
</thead>
Date is in this format: d/m/y (17/7/14)
How I can fix it in order to sort dates properly?
You must use a custom sorter with "data-sorter" attribute like data-sorter="datesSorter"
Then to fit your needs :
function datesSorter(a, b) {
if (new Date(a) < new Date(b)) return 1;
if (new Date(a) > new Date(b)) return -1;
return 0;
}
Put at the begining of <td> content the date translate to number like this
<span style="display:none">{{strtotime($date)}}</span>
I use a function with a short syntax, with the 'data-sorter' option:
<table
id="table"
data-toggle="table"
data-height="460"
data-url="json/data1.json">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Item Name</th>
<th data-field="date" data-sortable="true" data-sorter="dateSorter">Item Date</th>
</tr>
</thead>
</table>
<script>
function dateSorter(a, b){
return(new Date(a).getTime() - new Date(b).getTime());
}
</script>
You must use a custom sorter with "data-sorter" attribute like data-sorter="datesSorter".
Then to fit your needs:
function datesSorter(a, b) {
return Date.parse(a) - Date.parse(b);
}
I got it working like this....
I added a new column (numerical) and set it to hidden. You could do that easily by converting that date to a number.
$('#mainTable').bootstrapTable({
sortStable: true,
pagination: true,
pageSize: 100,
toolbar:"#toolbar",
search: true,
searchOnEnterKey: false,
sortOrder: "desc",sortOrder: "desc",
// here we determine the column that will sort the table
sortName: "rel0",
columns: [
{
// this is the hidden numeric column that works as sorter
field: 'rel0',
title: 'rel0',
visible:false,
},
{
// this is the visible column
field: 'rel',
title: 'Date / hour',
},
],
data: objetoData
});
Related
I data in this format in my angular controller. These are dummy datas and will be fetched from some sort of services later.
$scope.attendanceLog =
{
attendances:
[
{
date:'12.12.17',
entries:
[
{
time:'12PM',
device:'1212',
location:'katabon'
},
{
time:'1PM',
device:'1212',
location:'katabon'
},
{
time:'2PM',
device:'1321',
location:'katabon'
}
]
},
{
date:'13.12.17',
entries:
[
{
time:'12PM',
device:'1212',
location:'katabon'
},
{
time:'1PM',
device:'1212',
location:'katabon'
},
{
time:'2PM',
device:'1321',
location:'katabon'
},
{
time:'5PM',
device:'1321',
location:'katabon'
}
]
}
]
};
Now I designed the table to view this data like this. Here is the html code
for the table
<table class="table table-bordered">
<thead>
<th>Date</th>
<th class="text-center">Time</th>
<th class="text-center">Device</th>
<th class="text-center">Location</th>
</thead>
<tbody>
<tr ng-repeat-start="attendance in attendanceLog.attendances">
<td rowspan="{{attendance.entries.length}}" class="date">{{attendance.date}}</td>
<td>{{attendance.entries[0].time}}</td>
<td>{{attendance.entries[0].device}}</td>
<td>{{attendance.entries[0].location}}</td>
</tr>
<tr ng-repeat-end ng-repeat="entries in attendance.entries" ng-if="$index>0">
<td>{{entries.time}}</td>
<td>{{entries.device}}</td>
<td>{{entries.location}}</td>
</tr>
</tbody>
I want to make every other instance of the highlighted sections' background a diffrent color.Here is the reference image.
So if there are 5 dates then the 1st, 3rd and 5th date cell and all the other cells on their right side would have a different color.
Now is there any way to do this with angular. I am sorry if its a stupid question. I am new to front end development.
You could change it to have one expression for the table entries and use ng-class-odd and ng-class-even:
<tbody>
<tr ng-repeat="..."
ng-class-odd="'someOddClass'" ng-class-even="'someEvenClass'">
</tr>
</tbody>
Then you'd just need to change your styling.
Instead of printing new rows in the table I created a new table for every date. And then I applied the css class on every odd numbered table.
<table class="table table-bordered" ng-repeat="...." class =
ng-class ="$index % 2 == 0 ? 'table table-bordered striped':'table table-bordered'" >
.......
.......
</table>
Here striped is the class I used to highlight the odd numbered records background a different color
My HTML code:
<table class="table table-hover nowrap margin-bottom-0" width="100%">
<thead style="background: #CACCD4;">
<tr>
<th>IN Number</th>
<th>Date</th>
<th>Due Date</th>
<th>Gross Amount</th>
<th>Currency</th>
<th>Order Number</th>
</tr>
</thead>
<tbody id="invoiceListOutput"></tbody>
</table>
My JS Code:
invoiceListTemplate+=`<tr width=100%>
<td>${a.Id}</td>
<td>${a.Dt}</td>
<td>${a.Dt}</td>
<td>${a.Amt}</td>
<td>${a.CurrencyCd}</td>
<td>${a.OId}</td></tr>`;
Uses this to display: $("#invoiceListOutput").html(invoiceListTemplate);
124124142124-235325 2016-10-07 2016-10-07 -5551.86 USD 0000100738
TEST-2332432-SDFSF 2016-10-06 2016-11-05 200 USD **null**
xml with s 2016-10-05 2016-10-05 100 USD 0000105153
In my table, for some of the Order number is 'null' and display as null in the table. I want it to be displayed as 'No Order Number'
Thanks in Advance!
In your loop, you could simply check if the value of this field evaluates to false. If so, just set it's value to the desired display message.
Just add a few lines of code:
const NOT_DEFINED = 'No Order Number';
if(!a.OId) {
a.OId = NOT_DEFINED;
}
Alternatively, if you really just want to check if the value is null, use this code (the above if statement evaluates to true also if the value equals to 0 or to an empty string):
const NOT_DEFINED = 'No Order Number';
if(a.OId == null) {
a.OId = NOT_DEFINED;
}
if(a.OId == null) {
a.OId = NOT_DEFINED;
}
listTemplate+=`<tr width=100%>
<td>${a.Id}</td>
<td>${a.Dt}</td>
<td>${a.Dt}</td>
<td>${a.Amt}</td>
<td>${a.CurrencyCd}</td>
<td>${a.OId}</td></tr>`;
I'm use table JSon. But I have encode it from php to Json.
So I just call file pin.php from tables.
example my HTML tables:
HTML:
<table
data-url="../../tables/pin.php"
data-row-style="rowStyle"
data-toggle="table"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-search="true"
data-select-item-name="toolbar1"
data-pagination="true"
data-sort-name="name"
data-sort-order="desc">
<thead>
<tr>
<th data-field="id_pin" data-sortable="true" data-align="center">ID PIN</th>
<th data-field="no_meja" data-sortable="true" data-align="center">Nomor Meja</th>
<th data-field="status" data-sortable="true" data-align="center">Status</th>
<th data-field="action" data-sortable="true" data-align="center">Input Pemesanan</th>
</tr>
</thead>
<tr>
</tr>
</table>
Script table :
<script>
$(function () {
$('#hover, #striped, #condensed').click(function () {
var classes = 'table';
if ($('#hover').prop('checked')) {
classes += ' table-hover';
}
if ($('#condensed').prop('checked')) {
classes += ' table-condensed';
}
$('#table-style').bootstrapTable('destroy')
.bootstrapTable({
classes: classes,
striped: $('#striped').prop('checked')
});
});
});
function rowStyle(row, index) {
var classes = ['info', 'info', 'info', 'info', 'info'];
if (index % 2 === 0 && index / 2 < classes.length) {
return {
classes: classes[index / 2]
};
}
return {};
}
</script>
Question: I want this table is auto refresh.
please help me this one.
It looks like you're using Bootstrap Tables. According to the documentation, you can refresh the table, so just set a timer to do it periodically:
(function(){
function refreshTable() {$('#table-style').bootstrapTable('refresh', {silent: true});}
setInterval(refreshTable, 5000);
})()
I am having real trouble understanding what is happening with Data Tables. I create a DataTable as follows
var dTable = $('#sessionReport').dataTable({
"bInfo" : false,
"bFilter" : false,
"aaData" : data,
"bDestroy" : true,
"fnFooterCallback" : function(nRow, aaData, iStart, iEnd, aiDisplay){
var totalAttendees = 0;
var totalTime = 0;
var avgSatisfaction = 0;
for(var i=0; i<aaData.length; i++){
avgSatisfaction = avgSatisfaction + ((aaData[i][7]*1)+3*1)/aaData.length; // range is from -2 to + 2; have added 3 to each result to make range of positive numbers only
totalAttendees = totalAttendees + aaData[i][5]*1;
startTime = new Date(aaData[i][0]);
endTime = new Date(aaData[i][1]);
totalTime = totalTime + (endTime - startTime)/10000;
}
//alert(secondsToString(totalTime));
//$('#tfAttendees').innerHTML = parseInt(totalAttendees);
var nCells = nRow.getElementsByTagName('th');
nCells[5].innerHTML = parseInt(totalAttendees);
nCells[7].innerHTML = parseFloat(avgSatisfaction.toFixed(2));
}
});
return dTable;
My data is formatted like this:
[ 0: "2012-10-24 09:43:03"
1: "2012-10-24 09:49:47"
2: "5002028"
3: "Eamonn"
4: "Dannys Memories"
5: "7"
6: ""
7: "0" ],
[O:....],
But I run into problems when I want to add a column with an icon to each row like in this solution
http://datatables.net/blog/Drill-down_rows
I have tried using aoColumns and aoColumnsdef. But not really sure how. My problem is that table html is being built by the data. So if there are only 7 items in the data array there will only be 7 columns in my Html Table. How can I add an eighth column. I want the beginning on each row to have a clickable icon.
And my html looks like this...
<table id="sessionReport" class="table table-striped fTable">
<thead>
<tr>
<td>Start Session</td>
<td>End Session</td>
<td>Session Id</td>
<td>Facilitator</td>
<td>Group Name</td>
<td>No. Attendees</td>
<td>Assistant</td>
<td>Satisfaction</td>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th id="tfStartSession">
Total Hours
</th>
<th id="tfEndSession">
</th>
<th id="tfSessionId">
</th>
<th id="tfFacilitator">
</th>
<th id="tfGroupName">
TOTAL ATTENDEES :
</th>
<th id="tfAttendees">
</th>
<th id="tfAssistant">
AVG SATISFACTION :
</th>
<th id="tfSatisfaction">
</th>
</tr>
</tfoot>
</table>
Any ideas. I'm a bit stumped by DataTables documentation and they don't seem to provide any usage examples of either aoColumns or aoColumnsDef.
Many thanks
I am using tablesorter to sort the table content. My table is as below.
<table class="results" border="1">
<thead>
<tr>
<th class="header">No</th>
<th class="header">Distance</th>
<th class="header">Diagnostic Fee</th>
<th class="header">Regular Price </th>
<th class="header">Company Price</th>
<th class=""> </th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td class="distance"><a>16.50 kms.</a></td>
<td class="brand"><a>Credited</a></td>
<td><a>$5</a></td>
<td><a>$5<small>after 5% cash back</small></a></td>
</tr>
<tr>
<td>2</td>
<td class="distance"><a>6.30 kms.</a></td>
<td class="brand"><a>Credited</a></td>
<td><a>$8</a></td>
<td><a>$8<small>after 5% cash back</small></a></td>
</tr>
<tr>
<td>3</td>
<td class="distance"><a>10.25 kms.</a></td>
<td class="brand"><a>Credited</a></td>
<td><a>$2</a></td>
<td><a>$2<small>after 5% cash back</small></a></td>
</tr>
</tbody>
</table>
I want to sort the table using distance and price.
I am facing difficulty is solving table with distance, because distance is displayed in alphanumeric like "12 kms". So, The table is not getting sorted.
Can anyone advise how to parse the content by taking only digits?
here is the jsfiddle demo
Tablesorter provides a way of defining additional parsers for cells in which it can't obtain data correctly. You need to define 2 parsers for the 2 columns you're interested in.
So you might have:
$.tablesorter.addParser({
id: 'distance',
is: function(s) {
return false;
},
format: function(text, table, cell) {
return parseFloat(text.replace('kms.', ''));
},
type: 'numeric'
});
for distance, and:
$.tablesorter.addParser({
id: 'price',
is: function(s) {
return false;
},
format: function(text, table, cell) {
return parseFloat(text.replace('$', ''));
},
type: 'numeric'
});
for price. You then tell tablesorter which columns to use the parses on, so:
$("table").tablesorter({
debug:false,
sortList: [[0, 0], [2, 0]],
headers: {
1: {
sorter: 'distance'
},
3: {
sorter: 'price'
}
}
});
Tablesorte has an option 'textExtraction', so you can define a function to go through the text before sorting. Example:
$("table").tablesorter({
debug:false,
sortList: [[0, 0], [2, 0]],
textExtraction: function(node) {
var $node = $(node)
var text = $node.text();
if ($node.hasClass('distance')) {
text = text.replace('kms', '');
};
return text;
}
});
Updated fiddle