Most of the default DataTable options gone after declaring moment() to sort YYYY-MMM-DD column.

dpeerenboom

I am just learning DataTables and am not a Javascript or jQuery expert, either. I am using a DataTable with data populated from Coldfusion 11. The first column is a date column formatted YYYY-MMM-DD. I suspect this is a very fix, likely going to result in a Duh at my end, but I am stuck nonetheless.

I am using Bootstrap 3.3.5, DataTables 1.10.10, jQuery 2.1.4, and moment 2.10.6:

<link rel="stylesheet" type="text/css" href="bootstrap-3.3.5-dist/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.5-dist/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="datatables-1.10.10/media/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="editor-1.5.3/media/css/jquery.dataTables.min.css">

<script type="text/javascript" src="jquery-2.1.4/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="datatables-1.10.10/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="datatables-1.10.10/media/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="moment-2.10.6/moment-locales.js"></script>

Here's a copy of the table html:

<table id="SearchResultsDataTable" class="table table-striped compact">
<thead>
    <tr>
        <th>Create Date</th>
        <th>Project Number</th>
        <th>Type</th>
        <th>Source</th>
        <th>Num</th>
        <th>Rev</th>
        <th>Description</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>2015-Nov-27</td>
        <td>1234567890</td>
        <td>DWG</td>
        <td>T</td>
        <td>0001</td>
        <td>01</td>
        <td>test test test</td>
    </tr>   
    <tr>
        <td>2015-Nov-26</td>
        <td>1234567890</td>
        <td>DWG</td>
        <td>T</td>
        <td>0001</td>
        <td>00</td>
        <td>test</td>
    </tr>   
    <tr>
        <td>2015-Nov-13</td>
        <td>1234567890</td>
        <td>RFI</td>
        <td>R</td>
        <td>0001</td>
        <td>00</td>
        <td>RFI LOG 1</td>
    </tr>   
    <tr>
        <td>2015-Nov-13</td>
        <td>1234567890</td>
        <td>DRR</td>
        <td>R</td>
        <td>0001</td>
        <td>00</td>
        <td>REVIEW</td>
    </tr>   
    <tr>
        <td>2015-Nov-04</td>
        <td>1234567890</td>
        <td>TRR</td>
        <td>R</td>
        <td>0002</td>
        <td>00</td>
        <td>USER GUIDE CAPTURE 2</td>
    </tr>   
    <tr>
        <td>2015-Oct-29</td>
        <td>2015-Oct-29</td>
        <td>TRR</td>
        <td>R</td>
        <td>0001</td>
        <td>00</td>
        <td>USER GUIDE 1</td>
    </tr>   
    <tr>
        <td>2015-Oct-27</td>
        <td>1234567890</td>
        <td>DOC</td>
        <td>G</td>
        <td>0001</td>
        <td>A</td>
        <td>EXAMPLE DOCUMENT 1</td>
    </tr>   

<tbody>
</table>

The DataTable renders perfectly fine when I create the DataTable using:

var tbl = $("#SearchResultsDataTable");
$(document).ready( function () {
   tbl.dataTable();
});

I see the column sorting up/down triangles, show n entries, search input, previous/next, etc.

However, the date column is not sorted correctly. I researched and found the moment.js plugin to solve this. My code then became:

var tbl = $("#SearchResultsDataTable");
$.fn.dataTable.moment("YYYY-MMM-DD", "en");
$(document).ready( function () {
   tbl.dataTable();
});

When I run it, the rows of data still have odd/even background colors and bold column headings, but the rest of the DataTable features are gone, such as column up/down sorting triangles, show n entries, search input field, prev/next buttons, etc. I tried to manually turn these options on within tbl.dataTable(); but nothing worked. Why would declaring the the moment() method affect the rendering of the DataTable? Or, do I have to do more coding? If so, what do I do?

allan

Sounds like there is a Javascript error occurring. Can you link to the page showing the issue please?

It seems slightly unusual to select the DOM element outside the document ready function and then use it inside, but that won't be causing a Javascript error, just possibly the table not being found.

Allan

dpeerenboom

Hi Allan. Thanks for responding.

I am developing locally (ColdFusion 11 Enterprise Developer edition installed on my desktop) with a connection to a SQL Server on our company WAN. There is no more JavaScript other than what I've already included, so I am stumped. I am wondering if there is a missing reference to a JavaScript file?! I moved the moment() call inside the ready function, but no change as expected.

In the code below, the DataTable does not get rendered, but the date column is sorted correctly.

var tbl = $("#SearchResultsDataTable");

$(document).ready( function () {
    $.fn.tbl.moment("YYYY-MMM-DD");
    tbl.dataTable();
});

If I put the moment() call after the dataTable() initialization, then the DataTable renders correctly, but the date column is not sorted correctly. I.e.

var tbl = $("#SearchResultsDataTable");

$(document).ready( function () {
    tbl.dataTable();
    $.fn.tbl.moment("YYYY-MMM-DD");
});

And it doesn't matter if I put in "tbl" or "dataTable" in the moment() call.

I tried changing/removing the class specified for the table, but nothing changed as long as the code was as follows:

var tbl = $("#SearchResultsDataTable");

$(document).ready( function () {
    $.fn.tbl.moment("YYYY-MMM-DD");
    tbl.dataTable();
});

I am using IE 11 32-bit on Windows 7 64-bit. Any other ideas?

allan

I think you should be getting a Javascript error shown in your browser's error console. You most certainly should if you use $.fn.tbl.moment.

It doesn't appear that the Moment plug-in for DataTables is being included on your page.

I would suggest you use:

$.fn.dataTable.moment("YYYY-MMM-DD");

$(document).ready( function () {
    $("#SearchResultsDataTable").DataTable();
});

Selecting the element outside of the document ready function don't seem to make much sense to me - you'd be as well not having the document ready function at all.

Allan