We Keep Coding

Bootstrap Table: sort by date field

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
});

Displaying "Task" in a particular table cell depending on status. ReactJS

I ran into a problem where I need to output my task objects into a table.
I have created status columns (New, To do, In progress etc), but I have no idea how do I output my tasks into a particular table cell depending on its status and if there are going to be two task objects with the same status then for another one I would like to create a separate row so they won't both be inside the same cell.
Unfortunately, I cannot provide any code example since I've tried it so many ways and none of them worked. Here is how I do it now, but it doesn't work as I need.
<div className="taskboard">
<table className="table" id={'board_'+this.amount}>
<tbody>
<tr>
<th className="0">Story</th>
<th className="1">New</th>
<th className="2">To do</th>
<th className="3">Pending</th>
<th className="4">In progress</th>
<th className="5">Internal Review</th>
<th className="6">Customer Review</th>
<th className="7">Done</th>
<th className="8">Reject</th>
</tr>
<tr>
{this.tasks.map((task, i) => <td key={i}><Task task={task}/></td>)}
</tr>
</tbody>
</table>
</div>

how about this? the idea is that for each task you create a <tr/>, then inside of it you decide whether or not to display a <Task /> inside of a <td /> based on the Status of the task (new, pending, etc).
< div className = "taskboard" >
<table className="table" id={'board_' + this.amount}>
<tbody>
<tr>
<th className="0">Story</th>
<th className="1">New</th>
<th className="2">To do</th>
<th className="3">Pending</th>
<th className="4">In progress</th>
<th className="5">Internal Review</th>
<th className="6">Customer Review</th>
<th className="7">Done</th>
<th className="8">Reject</th>
</tr>
{this.tasks.map((task, i) =>
<tr>
// maybe here insert some cells that are common for all task states. like name, date, etc.
// then choose which state to put the task into:
<td>
{ task.status === "New" &&
<Task task={task}/>
}
</td>
<td>
{ task.status === "Pending" &&
<Task task={task}/>
}
</td>
// more <td />
</tr>
)
}
</tbody>
</table>
< /div>
eventually you can refactor the whole <tr /> into a new component that receives a task object and displays a row with the relevant cells

This can also be rendered with a little div - css styling as well.
Here is a working fiddle on ReactJS.
Hope this helps.
JSFiddle
var data = {
"new_item": ['Story 10', 'Story 11'],
"to_do": ['Story 1', 'Story 5'],
"pending": ['Story 2', 'Story 3', 'Story 7'],
"in_progress": ['Story 4', 'Story 6', 'Story 8', 'Story 9']
};
var Container = React.createClass({
render() {
return <div className='divTableBody'>
< StatusColumn name = 'New'
id = 'new_item' ></StatusColumn>< StatusColumn name = 'To Do'
id = 'to_do' > < /StatusColumn> < StatusColumn name = 'Pending'
id = 'pending' > < /StatusColumn> < StatusColumn name = 'In Progress'
id = 'in_progress' > < /StatusColumn> < /div > ;
}
});
var StatusColumn = React.createClass({
render() {
var _this = this;
var items = [];
for( var item in data){
data[item].map(function(x) {
if(item === _this.props.id)
items.push(<div className='divTableCell'>{x}</div>);
})
}
return <div className='divTableRow'>
<div className='divTableHeading'>{this.props.name}</div>
<div>{items}</div>
< /div>
}
});
ReactDOM.render( < Container / > , document.getElementById('root'));

How to Get Data from checkbox selected row in dataTables

I'm using this data table.
I need to get both ProductID & ProductStatus from the selected row where ProductID is embedded in the TR ID of each row.
I'm not displaying the productStatus in the table. But I need to get the status when the row is selected. Where can i add them ?
Please Guide me ....
CODE
function loadClick() {
const databaseRef = firebase.database().ref('S01/Products');
var query = databaseRef.orderByKey().startAt("C09M03S03").endAt("C09M03S04").limitToFirst(6);
query.once("value")
.then(function (snapshot) {
snapshot.forEach(function (childSnapshot) {
var t = $('#products_table').DataTable();
var key = childSnapshot.key;
var MID = childSnapshot.child("productMID").val();
var SID = childSnapshot.child("productSID").val();
var ProductID = childSnapshot.child("productID").val();
var name = childSnapshot.child("productName").val();
var unit = childSnapshot.child("productUnit").val();
var productMRP = childSnapshot.child("productMRP").val();
var price = childSnapshot.child("productSellingPrice").val();
var buying_price = childSnapshot.child("productBuyingPrice").val();
var productstatus = childSnapshot.child("productStatus").val();
var row = "";
t.row.add(['<td class="cell-60 responsive-hide"></td><td class="cell-300"><a class="avatar" href="javascript:void(0)"><img class="img-responsive" src="../../../global/portraits/1.jpg"alt="..."></a></td>', '<td>' + name + '</td>',
'<td>' + unit + '</td>', '<td tabindex="1">' + productMRP + '</td>', '<td tabindex="2">' + price + '<\/td>',
'<td tabindex="3">' + buying_price + '<\/td>']).node().id = ProductID;
t.draw(false);
});
});
}
function EditProdStatus(ProductID, ProductStatus) {
var statusRef = firebase.database().ref('S01/Products').child(ProductID).child("productStatus");
statusRef.set(!ProductStatus);
console.log("Product Status changed to " + ProductStatus);
}
$(document).ready(function () {
loadClick();
var table = $('#products_table').DataTable({
'columnDefs': [{
orderable: false,
className: 'select-checkbox',
targets: 0
},
{
'targets': 3,
'createdCell': function (td, cellData, rowData, row, col) {
$(td).attr('tabindex', '1');
}
},
{
'targets': 4,
'createdCell': function (td, cellData, rowData, row, col) {
$(td).attr('tabindex', '2');
}
},
{
'targets': 5,
'createdCell': function (td, cellData, rowData, row, col) {
$(td).attr('tabindex', '3');
}
}
],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[1, 'asc']]
});
});
function productDisable() {
var oTable = $('#products_table').dataTable();
$(".select-checkbox:checked", oTable.fnGetNodes()).each(function () {
console.log($(this).val());
});
}
HTML
<table id="products_table" class="table is-indent tablesaw" cellspacing="0" width="100%">
<thead>
<tr>
<th class="pre-cell"></th>
<th class="cell-300" scope="col" data-tablesaw-sortable-col data-tablesaw-priority="3">Product Name</th>
<th class="cell-300" scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Product Unit</th>
<th class="cell-300" scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Product MRP</th>
<th class="cell-300" scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Selling Price</th>
<th class="cell-300" scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Buying Price</th>
</tr>
</thead>
</table>
jsFiddle Demo

For those td which you don't want to display in DataTable, you just need to provide Visible:false in your columnDefs. They will be hidden but you can retrieve their data if they are in selected rows.
$('#example').DataTable({
columnDefs: [{
orderable: false,
className: 'select-checkbox',
targets: 0
}, {
"targets": [2],
"visible": false,
"searchable": false
}]
})
Another thing is you are using fnGetNodes which is a legacy function for datatable v1.9 on selection which is not going to work for DataTable 10.1. You can get selected rows as follow:
table.rows('.selected').data();
This is going to return selected rows even if you have selected multiple rows in different pages.
You can find a Demo here.
As you can see in demo that for Employees data, their position column in not visible in DataTable but its data is available while retrieving data of selected rows.
Documentation here for Hidden columns
Update
I have updated your Fiddle. Updated Fiddle .

Try this, it helps you
var table = $('#example').DataTable();
$('#example tbody').on( 'click', '.checkbox', function () {
if(this.checked==true)
{
console.log( table.row( this.closest('tr') ).data() );
}
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.5/js/jquery.dataTables.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.5/css/jquery.dataTables.css" rel="stylesheet"/>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>check</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="checkbox" ></td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td><input type="checkbox" class="checkbox" ></td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
</tbody>
</table>

Try this ...
Add your productStatus column to the HTML :
'<td>' + productStatus + '</td>'
Let's say that's at column index 8. So add the following to the dataTables columnDefs :
{
'targets': 8,
'visible': false,
}
Now, in productDisable(), you can get productID & productStatus from each selected row as follows :
function productDisable() {
table.rows(".selected").every(function() {
var row = this.node();
var productID = row.id;
var productStatus = this.data()[8];
console.log(productID, productStatus);
// do whatever with productID and productStatus
});
}
Demo

I a using Datatable 1.10 and this Code is Working for me
"btnSubmit" is the Id of the Button when you click on the button selected checkbox data you will get
// Handle form submission event
$('#btnSubmit').on('click', function() {
//Hold the Object Data what are the checkbox selected
var tblData = table.api().rows('.selected').data();
var tmpData;
//Iterate the Object and extract you one one by one row data With Hidden Id Also
$.each(tblData, function(i, val) {
tmpData = tblData[i];
alert(tmpData);
});
})

//You can use this one.
$( $('#example').DataTable().$('.checked').map(function ()
{
return $(this).closest('tr');
//want to get attribute
//var id = $(this).closest('tr').find('td.Select').attr('id');
}));

How to display custom message when the value in the list is null

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>`;

Settimeout in jquery for dynamic table creation

I was trying to create a dynamic table with contents from jQuery. Also I have enabled a setTimeout in order for the data to be refreshed and updated in the html page.`
$(document).ready(function update_data() {
$.ajax({
dataType: "json",
url: "/wirelessSensor/dag",
success: updateForData,
error: errorOnAjax
});
setTimeout(function() {
update_data();
}, 5000);
});
function updateForData(data) {
// Updates DAG
console.log("Wirless nodes details");
var hasData = true;
if (data.result && data.result && data.result == "none") {
console.log('No data in result');
hasData = false;
} else if (!data.devices || !data.status) {
console.log('Devices not found in result');
hasData = false;
}
if (hasData) {
console.log('Creating Table');
var trHTML = '';
$.each(data.devices, function(index) {
trHTML += "<tr><td>" + data.devices[index] + "</td><td>" + data.lifetime[index] + "</td><td>" + data.status[index] + "</td></tr>";
});
$("#location").append(trHTML);
}
}
function errorOnAjax(jqxhr, status, errorstr) {
var errText = (errorstr == null) ?
'' : ', error: ' + errorstr;
console.log('Ajax error: ' + status + errText);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="location" border='1' width='100%'>
<tr>
<th align='center'> Devices </th>
<th align='center'> Lifetime </th>
<th align='center'> Status </th>
</tr>
</table>
Here since am using setTimeout my dynamic table is getting duplicated. The entries already existing are been repeated. How can I avoid this?

You can restructure your HTML to include <thead> and <tbody> elements, and the set the contents of the <tbody> to the results (rather than appending results to entries that might already be present).
<table id="location" border='1' width='100%'>
<thead>
<tr>
<th align='center'> Devices </th>
<th align='center'> Lifetime </th>
<th align='center'> Status </th>
</tr>
</thead>
<tbody id="location-content"></tbody>
</table>
Then do $("#location-content").html(trHTML); (note: html instead of append, to destroy old results instead of keeping them)