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

Alterner les couleurs des lignes d’un tableau en jQuery/CSS

En 2 lignes de code

$(function() {
    $('table.alternate tr').each(function(k,v) {
        $(v).addClass((k%2) ? 'impaire' : 'paire');
    });
});

Full code:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
table{width:100%;}
table .paire{background-color:#eee;}
table .impaire{background-color:#ccc;}
</style>
<script>
$(function() {
    $('table.alternate tr').each(function(k,v) {
        $(v).addClass((k%2) ? 'impaire' : 'paire');
    });
});
</script>
</head>
<body>
    <table class="alternate">
        <tr><td>-</td></tr>
        <tr><td>-</td></tr>
        <tr><td>-</td></tr>
        <tr><td>-</td></tr>
        <tr><td>-</td></tr>
        <tr><td>-</td></tr>
        <tr><td>-</td></tr>
        <tr><td>-</td></tr>
        <tr><td>-</td></tr>
        <tr><td>-</td></tr>
        <tr><td>-</td></tr>
        <tr><td>-</td></tr>
        <tr><td>-</td></tr>
        <tr><td>-</td></tr>
        <tr><td>-</td></tr>
    </table>
</body>
</html>