0

I have a very simple HTML table that renders in the order that I want it to without any call to 'DataTable()' in the '$document ready()' function call.

Old output

<table id="mytable" class="display">
    <thead>
         <tr>
             <th>Title</th>
             <th>Value</th>
         </tr>
    </thead>
    <tbody>
         <tr>
             <td>Item1</td>
             <td>1</td>
         </tr>
         <tr>
             <td>Item2</td>
             <td>2</td>
         </tr>
         <tr>
             <td>Item3</td>
             <td>3</td>
         </tr>
         <tr>
             <td>Item4</td>
             <td>4</td>
         </tr>
    </tbody>
</table>

However, after calling 'DataTable()' the ordering is seemingly random.

New output

<table id="mytable" class="display">
    <thead>
         <tr>
             <th>Title</th>
         </tr>
         <tr>
             <th>Value</th>
         </tr>
    </thead>
    <tbody>
         <tr>
             <td>Item4</td>
             <td>4</td>
         </tr>
         <tr>
             <td>Item3</td>
             <td>3</td>
         </tr>
         <tr>
             <td>Item1</td>
             <td>1</td>
         </tr>
         <tr>
             <td>Item2</td>
             <td>2</td>
         </tr>
    </tbody>
</table>

DataTable call

    <script>
            $(document).ready(function() {
                    $('#mytable').DataTable({
                            "stripeClasses": [],
                            "pageLength": 25,
                            "rowReorder": {
                                    enable: false
                            }
                    });
            });
    </script>

Why does DataTables do this? Is there anyway I can preserve my ordering (1,2,3,4)? I've taken a look at the documentation options, specifically Row ReOrder, but to no avail.

I realize I should be calling DataTable with ajax and all that jazz, but that is a little beyond what I'd like to be doing right now. I'd just like to square this away first.

Scott Skiles
  • 3,647
  • 6
  • 40
  • 64
  • Please provide a [MCVE] so we can see exactly what you are doing. – Jon P Oct 26 '18 at 00:13
  • Added the DataTable call. Anything else that would be helpful here? – Scott Skiles Oct 26 '18 at 00:15
  • Your table is badly formed.... you have no `tr` (rows) in the head and only `tr` .... no cells, `td` in the body. Do you want 2 colums of 4 rows, or 2 rows and 4 columns? – Jon P Oct 26 '18 at 00:19
  • Sorry, I totally screwed the table up. The table is fine (in my rendering). I'll edit to reflect. – Scott Skiles Oct 26 '18 at 00:49
  • Your code as posted works fine: http://jsfiddle.net/dpj3rq96/1/ . There must be something else going on. Please provide enough code to replicate the problem. – Jon P Oct 26 '18 at 01:14
  • Do you have any white space characters that may be affecting the sort order, either before, after, on in the middle of the the first column data? – Jon P Oct 26 '18 at 01:20
  • I will dig into this further and figure out what could be causing the discrepancy. Thank you, Jon. – Scott Skiles Oct 26 '18 at 03:01
  • 2
    Possible duplicate of [Is there a way to disable initial sorting for jquery DataTables?](https://stackoverflow.com/questions/4964388/is-there-a-way-to-disable-initial-sorting-for-jquery-datatables) – Rich Oct 26 '18 at 13:30
  • @Rich perfect!!! Thank you. `"aaSorting": []` worked like a charm. We can close this. Or should I delete? – Scott Skiles Oct 26 '18 at 13:36
  • 2
    The updated option setting for version 1.10 and above is ["order"](https://datatables.net/reference/option/order) – Joe McCarty Oct 26 '18 at 20:33

0 Answers0