Answers

• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  April 2017

  Have you tried the moment sorting plugin:
  https://datatables.net/plug-ins/sorting/datetime-moment

  Kevin
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  April 2017 Answer ✓

  I'd suggest dropping the hidden p and just have the raw data. The Moment sorting plugin that Kevin mentioned will be able to parse your format (MM/DD/YYYY I think).

  Allan
• Jewell4400 Posts: 7Questions: 1Answers: 0

  April 2017

  okay so i have tried using moment.js along with the datetime.js and it doesnt sort properly ,with out the hidden tag. Below are my attempts. with the date coming in the format of MM/DD/YYYY (12/25/2016)
  Attempt 1
  JS
  <script type="text/javascript" src="/javascript/moment.js"></script>
<script type="text/javascript" src="/javascript/datetime.js"></script>
<script type="text/javascript" >
$(function(){
$('#sample_results').DataTable({
"searching": true,
'paging': false,
dom: 'Bftip',
columnDefs: [ {
targets: 2,
render: $.fn.dataTable.render.moment( 'MM/DD/YYYY' )
} ] ,
buttons: [
'csv', 'excel', 'pdf', 'print'
]
}) ;
})
</script>

  HTML

  <table id="sample_results" >
<thead>
<tr id="header">
<th id="PUD">Sample Date</th>
</thead>
<tbody>
<c:forEach items="${sample_tests}" var="pt" varStatus="i">
<c:set var="background_color" value="#fff"/>
<c:set var="border_color" value="black"/>
<c:set var="v" value=""/>
<tr class="sample_data" id="<c:out value="${i.count}_row"/>" display:block;">
<td><c:out value="${pt.samp_pick_up_date}"/></td>
</tr>
</c:forEach>
</tbody>
</table>

  Result: "Invalid date"
  see result1.png

  result1.PNG 11K
• Jewell4400 Posts: 7Questions: 1Answers: 0

  April 2017 edited April 2017

  Attempt 2
  only changing JS

  <script type="text/javascript" >
$(document).ready(function() {
$.fn.dataTable.moment( 'MM/DD/YYYY' );
$('#sample_results').DataTable({
"searching": true,
'paging': false,
dom: 'Bftip',
buttons: [
'csv', 'excel', 'pdf', 'print'
]
});
} );
</script>

  _Result: _ i lose my sort options and buttons. See result2.png

  result2.PNG 6.9K
• Jewell4400 Posts: 7Questions: 1Answers: 0

  April 2017

  I felt like i was just missing one or two things in why this wasn't working in attempt# 1,
  Changes made have the date come in as 'YYYYMMDD' (which sorts properly) and have this plug in render it differently on the screen. BINGO
  Thanks Allan
  The new incoming HTML for sample date is now 'YYYYMMDD' @ the line below in my html

  <td><c:out value="${pt.samp_pick_up_date}"/></td>
  new JS
  $(function(){
$('#producer_results').DataTable({
"searching": true,
'paging': false,
dom: 'Bftip',
columnDefs: [ {
targets: 2,
render: $.fn.dataTable.render.moment( 'YYYYMMDD','MM/DD/YYYY' )
} ],
buttons: [ 'csv', 'excel', 'pdf', 'print' ]
}); })```