jQuery/Ajax very simple Sortable table

Faire des tris sur un tableau simplement avec ajax + jquery

Le code Javascript:

$(document).ready(function() {

    $('form#sortable-table-form th').click( function () {

        if($(this).hasClass('table-sort-up')) {

            $('th').removeClass('table-sort-down table-sort-up');
            $(this).addClass('table-sort-down');
            $('input[name=sort_order]').val( 1 );
        }
        else {

            $('th').removeClass('table-sort-down table-sort-up');
            $(this).addClass('table-sort-up');
            $('input[name=sort_order]').val( 0 );
        }

        $('input[name=sort_column]').val( $.trim($(this).text()) );
        submit_form();
    });

    submit_form();
});

var request = null;

function submit_form() {

    if( request != null )
        request.abort();
   
    var search_form = $('form#sortable-table-form');

    request = $.ajax({
        type: search_form.attr('method'),
        url: search_form.attr('action'),
        cache: false,
        data: search_form.serialize(),
        async: true,
        success: function( content ) {
            $('form#sortable-table-form tbody').empty().html( content );
        },
        error: function(e,error){
        }
    });

    return false;
}

Le code HTML:

<form id="sortable-table-form" action="/submit" method="POST">

<input type="hidden" name="sort_column" />
<input type="hidden" name="sort_order" />

    <table class="tableau">
        <thead>
        <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
            <th>Col4</th>
            <th>Col5</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

</form>

Il ne reste plus qu’à coder le script qui permet d’avoir le contenu du tableau