I am using DataTables and moment and have custom date format on my table.
How can I sort the column by moment?
Here you can see that sorting does not work correctly updated_at column.
I am using Datatable moment. Update_at format already changed by Carbon on Model.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<div class="table-responsive">
<table id="tickets-table" class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>User name</th>
<th>Last update</th>
</tr>
</thead>
<tbody>
<tr>
<td>saddsfdsafdfsafsa</td>
<td>Sqe Begush</td>
<td>1 hour ago</td>
</tr>
<tr>
<td>testing</td>
<td>User name</td>
<td>8 hours ago</td>
</tr>
<tr>
<td>another</td>
<td>another user</td>
<td>4 days ago</td>
</tr>
<tr>
<td>another testing</td>
<td>user user</td>
<td>1 week ago</td>
</tr>
<tr>
<td>another testingsss</td>
<td>user user11</td>
<td>1 year ago</td>
</tr>
<tr>
<td>another test</td>
<td>user userqww11</td>
<td>4 months ago</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js">
</script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.12/sorting/datetime-moment.js"></script>
<script>
$(document).ready(function() {
//$.fn.dataTable.moment("YYYY/MM/DD");
$('.table').DataTable();
});
</script>
The origin of the dates is unclear. If you pass moment().fromNow() yourself then just stop doing it when the display type is sort (see below). If you get already formatted data from a source you can use a library like chrono, which can parse "human dates" into "system dates":
var table = $('#tickets-table').DataTable({
columnDefs: [
{ targets: 2,
render: function(data, type) {
if (type == 'sort') {
var date = chrono.parseDate(data)
return new Date(date).valueOf()
}
return data
}
}
]
})
demo with the <table> above -> http://jsfiddle.net/mw0c3f91/
you have to convert the column dates to required format and then Sort the table.
moment(col[0]).fromNow();
Related
When generating the pdf with page-break-before after 3rd rows the design is breaking down. Here is my code
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM-PDF</title>
</head>
<body>
<table style="width:100%;">
<thead>
<tr>
<th>Serial</th>
<th>Name</th>
<th>Roll</th>
<th>Info</th>
</tr>
</thead>
<tbody>
#php
$n = 0;
for($i=0;$i<10;$i++){
#endphp
<tr style="text-align:center;">
<td>1</td>
<td>Rashedul Hasan</td>
<td>1208039</td>
<td>I am an employee.</td>
</tr>
#php
if($n==3){
echo "<i style='page-break-before:always;'></i> ";
}
$n++;
}
#endphp
</tbody>
</table>
</body>
</html>
This is the pdf view of page 1
This is the pdf view of page 2
In page 2 second row is moving to the right. How to fix it?
What about using chunks instead of breaking the table?
{{-- Replace collect()->times(10) with a collection when you're getting the actual data from DB --}}
#foreach (collect()->times(10)->chunk(3) as $chunk)
<table style="width:100%;">
<thead>
<tr>
<th>Serial</th>
<th>Name</th>
<th>Roll</th>
<th>Info</th>
</tr>
</thead>
<tbody>
#foreach($chunk as $result)
<tr style="text-align:center;">
<td>{{ $result }}</td>
<td>Rashedul Hasan</td>
<td>1208039</td>
<td>I am an employee.</td>
</tr>
#endforeach
</tbody>
</table>
<i style='page-break-before:always;'></i>
#endforeach
The onclick event is complaining that the java script function is not defined.
<body>
<div layout:fragment="content" th:remove="tag">
<div class="container">
<h6 class="mb-3">Restaurant Order Details</h6>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th scope="col">Order Id</th>
<th scope="col">Order Details</th>
<th scope="col">Date</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr th:each="order : ${orders}" style="cursor: pointer"
th:attr="onclick=|getOrderItems('${order.orderId}')|">
<td scope="row" th:text="${order.orderId}"></td>
<td th:text="${order.orderDetais}"></td>
<td th:text="${order.orderDate}"></td>
<td th:text="${order.amount}"></td>
</tr>
<tr>
<td colspan="3">Total</td>
<td th:text="${grandTotal}"></td>
</tr>
</tbody>
</table>
<div class="mb-4"></div>
</div>
</div>
<script>
function getOrderItems(orderId) {
alert("order details here");
}
</script>
</body>
When I click on the table row I get
Uncaught ReferenceError: getOrderItems is not defined
at HTMLTableRowElement.onclick
When I replace getOrderItems with a simple alert instead, the alert is fired. How do I fix this?
I know this is probably not the answer you looking for, it's just a suggestion:
In JavaScript, you can actually use the thymeleaf variables like this:
var myVar = [[${order.orderId}]];
The issue here was I declared my <script> outside the <div layout:fragment="content" th:remove="tag"> tag. Since this is a fragment, thymeleaf only rendered everything within this scope. Putting the script tag inside this solved the issue.
You are not passing thymeleaf variable to javascript. You can issue <script> outside your (just above </body>) and still pass variable to JS.
<script th:inline="javascript">
/*<![CDATA[*/
var orders = [[${orders}]];
function getOrderItems(orders) {
alert("order details here ");
}
/*]]>*/
</script>
Then you can call JS method on your html onclick event.
<tr th:each="order : ${orders}" style="cursor: pointer"
th:attr="onclick=|getOrderItems(orders)}')|">
<td scope="row" th:text="${order.orderId}"></td>
<td th:text="${order.orderDetais}"></td>
<td th:text="${order.orderDate}"></td>
<td th:text="${order.amount}"></td>
</tr>
However, I still see a challenge if you wish to pass every single order to javascript. I haven't used <script> inside the th:each loop.
Say I get a list of rows like this
var table_stop_rows = (from r in doc.Descendants("TR").Cast<HtmlNode>()
where r.Attributes["name"]?.Value == "laneStop"
select r).ToList();
Now, for each of those "laneStop" rows, I want to refer back to the smaller table containing the "shipment_number" field and read its corresponding node value, eg "abc_123_florida-4". However, I cant simply get a list of all rows where there is a shipment_number, each one has to be in a table that precedes the "laneStop" row in the row collection I'm getting.
I suppose my question then is - if I have a collection of rows, can I then use an xpath statement relative to each row to get back to this shipment_number field in the table preceding?
Here is the html doc, note there would be dozens of these "table pairs". Since I can't control the structure of these files, I need a way to extract the data from the existing structure
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>Date</td>
<td>11/15/2019</td>
</tr>
<tr>
<td>shipment number</td>
<td>abc_123_florida-45</td>
</tr>
<tr>
<td>Departure time:</td>
<td>0430</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td>Time arrival</td>
<td>1715</td>
</tr>
<tr>
<td>customer</td>
<td>bob smith</td>
</tr>
<tr>
<td>box type</td>
<td>square</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table border="1">
<tbody>
<tr>
<td>
<table>
<tbody>
<tr name="laneStop">
<td>box1</td>
<td>23.45</td>
<td>lane1</td>
<td>south</td>
</tr>
<tr name="laneStop">
<td>box2</td>
<td>17.14</td>
<td>lane1</td>
<td>south</td>
</tr>
<tr name="laneStop">
<td>box3</td>
<td>17.18</td>
<td>lane1</td>
<td>north</td>
</tr>
<tr name="laneStop">
<td>box2</td>
<td>199.14</td>
<td>lane1</td>
<td>west</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Try this xpath expression:
(//tr[#name="laneStop"]/ancestor::table/preceding-sibling::table//tr[2]/td[2])[1]
I've created a kendo grid based on a html table. I want the number in the grid to display only 2 decimals, but I can not figure out how to do this. Please help. See my code below.
<table id='test'>
<tr>
<th data-field='field1' data-type='number' data-template='#= kendo.toString(field1, "n2") #'>
ColumnHeader
</th>
</tr>
<tr>
<td>2.2579</td>
</tr>
</table>
<script>
$(document).ready(function(){
$("#plStatsGrid").kendoGrid({});
});
</script>
This is a basic scripting error. Your script is looking for table with id plStatsGrid, but your table has id test. Working fiddle.
<table id='plStatsGrid'>
<tr>
<th data-field='field1' data-type='number' data-template='#= kendo.toString(field1, "n2") #'>
ColumnHeader
</th>
</tr>
<tr>
<td>2.2579</td>
</tr>
</table>
<script>
$(document).ready(function(){
$("#plStatsGrid").kendoGrid({});
});
</script>
I'm building a mobile real estate website for my wife's business using Tablesorter to sort by price. It works fine for 6 digit numbers (including $s and commas), e.g. $600,000. However it fails when confronting a 7 digit number, e.g. $1,295,000.
In my
<script type="text/javascript" id="js">$(document).ready(function() {
$("table").tablesorter({
// sort on the second column, order asc
sortList: [[1,0]],
headers: {
1: { sorter: 'digit' } // column number, type
}
});
});
<table cellspacing="2" class="tablesorter { 0: { sorter: false}, 1: {sorter: true} }">
<thead>
<tr>
<th width="158" class="headerempty">Property</th>
<th width="130" class="{'sorter':'currency'}">Sort by Price</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><img src="../sales/29 Laurel Way/prepped_images/29lw-for_mobile.jpg" title="Tap for Details" alt="29 Laurel Way" width="150" height="100" border="0"></td>
<td class="{'sorter':'currency'}">$329,000</td>
</tr>
<tr class="odd">
<td><img src="../sales/Aetna Lane/al_for_Mobile.jpg" width="150" height="100"></td>
<td class="{'sorter':'currency'}">$175,000</td>
</tr>
<tr class="odd">
<td><img src="../sales/Atop Smith Hill/prepped/ash_mobile.jpg" width="150" height="100"></td>
<td class="{'sorter':'currency'}">$1,295,000</td>
</tr>
<tr class="odd">
<td><img src="../sales/Beech Hill/bh_mobile.jpg" width="150" height="100"></td>
<td class="{'sorter':'currency'}">$595,000</td>
</tr>
<tr class="odd">
<td class="{'sorter':'currency'}"><img src="../sales/Bluefield/b_mobile.jpg" width="150" height="100"></td>
<td>$299,000</td>
</tr>
</tbody>
</table>
Any thoughts on solving this one? Many thanks in advance, clpix
Constructions like td class="{'sorter':'currency'}" make me scary. You probaly should define table with class sortable and init table sorted in JS using this class, and define sorting parameters in constructor:
$(".sortable").tablesorter({
// sort on the second column, order asc
sortList: [[1,0]],
headers: {
1: { sorter: 'currency' } // column number, type
}
});
<table class='sortable'>
<tr>
<td>$1.000.000</td>
</tr>
......
</table>
And check out delimeter . or ,
This code work fine.