Sortable Table

<< Click to Display Table of Contents >>

Navigation:  Miscelânea >

Sortable Table

Previous pageReturn to chapter overviewNext page

Tela

 

ATENÇÃO: tem outro tópico de table sortable que parece melhor que este

 

sortable_table

 

Html

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <title>Sortable table example</title>

    <link rel="stylesheet" type="text/css" href="example.css" />

    <script type="text/javascript" src="sortable.js"></script>

</head>

 

<body>

    <table class="sortable" id="anyid" cellpadding="0" cellspacing="0">

        <tr>

            <th>Numbers</th>

            <th>Alphabet</th>

            <th>Dates</th>

            <th>Currency</th>

            <th class="unsortable">Unsortable</th>

        </tr>

        <tr>

            <td>1</td>

            <td>Z</td>

            <td>01-01-2006</td>

            <td>&euro; 5.00</td>

            <td>Unsortable</td>

        </tr>

        <tr>

            <td>2</td>

            <td>y</td>

            <td>04-13-2005</td>

            <td>&euro; 6.70</td>

            <td>Unsortable</td>

        </tr>

        <tr>

            <td>3</td>

            <td>X</td>

            <td>08-17-2006</td>

            <td>&euro; 6.50</td>

            <td>Unsortable</td>

        </tr>

        <tr>

            <td>4</td>

            <td>w</td>

            <td>01-01-2005</td>

            <td>&euro; 4.20</td>

            <td>Unsortable</td>

        </tr>

        <tr>

            <td>5</td>

            <td>V</td>

            <td>05-12-2006</td>

            <td>&euro; 7.15</td>

            <td>Unsortable</td>

        </tr>

        <tr class="sortbottom">

            <td>15</td>

            <td></td>

            <td></td>

            <td>&euro; 29.55</td>

            <td></td>

        </tr>

    </table>

</body>

</html>

 

Figuras

 

 

arrow-down

 

 

arrow-none

 

arrow-up

 

Tem uma figura na parte central (são 3)

 

Observações

 

Fonte: http://yoast.com/articles/sortable-table/