How to set the default column sort to "descending" when clicked

How to set the default column sort to "descending" when clicked

measterbromeasterbro Posts: 33Questions: 9Answers: 0

I have tried the following code:

$(document).ready(function () {
    try {
        var t = $('.table_id1').DataTable({
            "columnDefs": [{
                "orderSequence": ["desc", "asc"],
                "searchable": false,
                "orderable": false,
                "targets": 0
            }]
            ,
            "order": [[5, 'desc' ]]
        } );
        t.on( 'order.dt search.dt', function () {
            t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                cell.innerHTML = i+1;
            } );
        }).draw();
        new $.fn.DataTable.FixedColumns(t, {
            leftColumns: 2,
            rightColumns: 0
        });
        }
    catch(err) {
        return true;
    } 
    });

but it doesn't work for me. The line of code that should work is:

"orderSequence": ["desc", "asc"],

Here is a link to a page that is using it:

http://www.citydynasty.com/Baseball/MLB/Standings/Overall/2012-MLB-Standings-Overall.cshtml

I have also tried:

"orderSequence": ["desc", "asc"], "targets":"row-Data2Overall",

since "row-Data2Overall" is the class assigned to each column, hoping that it would work for each column at the same time.

If I change "targets": to anything other than zero it removes the sorting capability completely.

This question has an accepted answers - jump to answer

Answers

  • ThomDThomD Posts: 334Questions: 11Answers: 43

    Thanks for the live link.

    In the docs, the Targets value is an array.

        { "orderSequence": [ "desc" ], "targets": [ 3 ] }
    

    Try that.

    BTW, I like that table styling on the sorted column. Are you using a library for that presentation?

  • measterbromeasterbro Posts: 33Questions: 9Answers: 0

    I do the "sorted column" styling by adding this to jquery.dataTables.css:

    table.dataTable.display tbody tr > .sorting_3 {
        background-color: #cccccc;
        -moz-box-shadow: inset 5px 13px 36px 1px #ABABAB,-5px -2px 8px 0px #242424;
        -webkit-box-shadow: inset 5px 13px 36px 1px #ABABAB,-5px -2px 8px 0px #242424;
        box-shadow: 0 0 10px 4px rgba(119, 119, 119, 0.75);
    }
    
  • measterbromeasterbro Posts: 33Questions: 9Answers: 0

    If I use this code:

    "orderSequence": [ "desc" ], "targets": [ 4 ]
    

    I get the results shown here:

    http://www.citydynasty.com/Baseball/MLB/Standings/Overall/2012-MLB-Standings-Overall%20-%20Copy.cshtml

    Notice the fourth column is no longer sortable.

  • ThomDThomD Posts: 334Questions: 11Answers: 43

    FWIW, I get a 404 on your jquery.ui css files.

  • ThomDThomD Posts: 334Questions: 11Answers: 43

    Your PageBundleStandings.js says it should be 1.10.9, but internally it says 1.10.10-dev. Maybe change that out for a production release of DataTables.

  • ThomDThomD Posts: 334Questions: 11Answers: 43

    Looking at the code, I see that you have this

    orderable:!1
    

    That doesn't have a target column assigned as far as I can tell so that may be part of the problem.

    You got some bad syntex in here

    columnDefs:[
    {
    orderSequence:["desc"],
    targets:[4],
    searchable:!1,
    orderable:!1}
    ]
    

    I think should be

    columnDefs:[
    { orderSequence:["desc"], targets:[4]} ,
    { searchable:!1 },
    {orderable:!1}
    ]
    
    
    

    and those !1 entries probably work, but I'd use a false statement.

  • measterbromeasterbro Posts: 33Questions: 9Answers: 0

    I am using the "dev" version because I needed a fix for something else.

    I am using:

    "searchable": false,
    "orderable": false,

    in my js code. I think it shows that in the code I supplied originally, not sure where you are seeing the "!1".

  • ThomDThomD Posts: 334Questions: 11Answers: 43

    Chrome debugger must be translating false as !1. How geeky.,

  • measterbromeasterbro Posts: 33Questions: 9Answers: 0

    Any further suggestions on this?

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

    Where is your example?

  • measterbromeasterbro Posts: 33Questions: 9Answers: 0

    Anyone have an update?

  • ThomDThomD Posts: 334Questions: 11Answers: 43

    With that new sample, Pct starts sorted desc and then alternates between asc and desc when I click it.

    What do you want it to do?

    I tested the basic orderSequence here and it works for me.

    http://live.datatables.net/bifesupo/1/

    $(document).ready( function () {
      var table = $('#example').DataTable({
        columnDefs: [
        {targets: [ 2 ], orderSequence: [ "desc", "desc", "asc" ]  }
        
        ] 
      } );
    } );
    

    if you set orderable to false this isn't going to work.

  • measterbromeasterbro Posts: 33Questions: 9Answers: 0

    I was able to use your code and get it to work on my example link, for column 4. Apparently the "orderable" value was causing a problem as you said.

    Is there a way to apply this to all the table columns, using some sort of wildcard for the "targets" value?

  • ThomDThomD Posts: 334Questions: 11Answers: 43
    Answer ✓
  • measterbromeasterbro Posts: 33Questions: 9Answers: 0

    Thank you, that is great!

This discussion has been closed.