Sort HTML table data with two columns

Question

Vector  VectorMode          VectorBaseDate
5       4                       2012-06-16
5       3                       2013-06-16
5       2                       2012-06-16
5       1                       2012-06-16
5       1                       2013-06-16
5       2                       2013-06-16
5       3                       2012-06-16
5       4                       2013-06-16

This is the html table I am creating by reading some xml file with an jquery ajax call. First I want to sort by date and then sort by mode. So the result should look like.

Vector  VectorMode          VectorBaseDate
5       1                       2012-06-16
5       2                       2012-06-16
5       3                       2012-06-16
5       4                       2012-06-16
5       1                       2013-06-16
5       2                       2013-06-16
5       3                       2013-06-16
5       4                       2013-06-16

I tried table sorter plugin but no luck.

$("table").tablesorter();
        $.ajax({
        type: "GET",
        url: "vector.xml",
        dataType: "xml",
        success: function(xml) {
                            $('#showVelocity').append('<table cellspacing="1" id="myTable" class="tablesorter">');
                            $('#showVelocity').append('<thead><tr><th>VectorType</th><th>VectorMode</th><th>InitialValue</th><th>VectorBaseDate</th></tr></thead>');
                            $('#showVelocity').append('<tbody>');
                            $(xml).find('Vector').each(function() {
                            var intialVal = $(this).find('InitialValue').text();
                            var vectorBaseDate = $(this).find('VectorBaseDate').text();
                            var attrValType = $(this).find('VectorType').attr('tc');
                            var attrValMode = $(this).find('VectorMode').attr('tc');
                            if (attrValType=='5') {
                                //$('#someElement').append(intialVal+'<br/>');  
                                var tr = '<tr><td>'+attrValType+'</td><td>'+attrValMode+'</td><td>'+intialVal+'</td><td>'+vectorBaseDate+'</td></tr>';
                                $('#showVelocity').append(tr);
                            };

                            $('#showVelocity').append('</tbody></table>');
                            $("table").trigger("update");
                            var sorting = [[1,0],[3,0]]; 
                            $("table").trigger("sorton",[sorting]);
                        }); 
                }
            });

Answer 1

Without seeing your code, it's a bit hard to tell what you're doing wrong, but i've written a fiddle that does what you want.

If you post a bit more code I can modify it to suit your needs.

Here's the code:

<table class="tablesorter">
    <thead>
        <tr>
            <th>Vector</th>
            <th>VectorMode</th>
            <th>VectorBaseDate</th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td>5</td>
          <td>1</td>
          <td>2012-06-16</td>
        </tr>
        <tr>
          <td>5</td>
          <td>2</td>
          <td>2012-06-16</td>
        </tr>
        <tr>
          <td>5</td>
          <td>3</td>
          <td>2012-06-16</td>
        </tr>

    </tbody>
</table>

And JS

$('table').tablesorter({
        // *** Appearance ***
        // fix the column widths
        widthFixed : true,
        // include zebra and any other widgets, options:
        // 'uitheme', 'filter', 'stickyHeaders' & 'resizable'
        // the 'columns' widget will require custom css for the
        // primary, secondary and tertiary columns
        widgets    : [ 'uitheme', 'zebra' ],

        // *** Functionality ***
        // starting sort direction "asc" or "desc"
        sortInitialOrder : "asc",


        // jQuery selectors used to find the header cells.
        selectorHeaders : 'thead th',

        // *** css classes to use ***
        cssAsc        : "headerSortUp",
        cssChildRow   : "expand-child",
        cssDesc       : "headerSortDown",
        cssHeader     : "header",
        tableClass    : 'tablesorter',


        // pick rows colors to match ui theme
        widgetZebra: { css: ["ui-widget-content", "ui-state-default"] },

        // *** prevent text selection in header ***
        cancelSelection : true,

        // *** send messages to console ***
        debug : false
    });

Fiddle

Answer 2

First create a collation from your ajax result(data) and use the Array.Sort function to sort based on a particular value and create a table tag. take a look this post Sorting Select Option in Javascript - Based on multiple values in same row