JQuery

Cabeçalho de tabelas

Publicado por antlou em 03/09/2017

Este objeto pode tornar qualquer tabela HTML selecionável usando cabeçalhos clicáveis.

É preciso um determinado elemento de tabela HTML e adiciona elementos de seta clicáveis nos cabeçalhos da tabela. Os cabeçalhos de tabela com a classe noSort são excluídos.

O objeto pode ordenar as linhas da tabela na ordem ascendente ou decrescente, dependendo da seta de ordenação.

Resultado:

ID	Nome	Apelido	Email
1	Jorge	Ganso	jorge.ganso@example.com
2	Sandro	Batista	sandro.batista@example.com
3	Joana	Pereira	joana.pereira@example.com
4	Isabel	Patricio	isabel.patricio@example.com

Apresentação do ficheiro sortableTable.html.

sortableTable.html



<html>
<head>
    <!--
     ************************************
     * SortableTable.html                                     
     * Author:antlou                            
     * Version:1.0                              
     * Date:03/09/2017                         
     ************************************
     -->
        
    <script src="jquery-2.1.3.min.js"> </script>
    <script language="javascript" src="sortableTable_class.js"> </script>    
    <link rel="stylesheet" href="sortableTable_css.css">
    
</head>
<body>

<table class="sortable">
<tr>
    <th> ID </th> <th> NOME </th> <th> APELIDO </th> <th> EMAIL </th>
</tr>
<tr>
    <td> 1 </td> <td> Jorge </td> <td> Ganso </td> <td> jorge.ganso@example.com </td>
</tr>
<tr>
    <td> 2 </td> <td> Sandro </td> <td> Batista </td> <td> sandro.batista@example.com </td>
</tr>
<tr>
    <td> 3 </td> <td> Joana </td> <td> Pereira </td> <td> joana.pereira@example.com </td>
</tr>
<tr>
    <td> 4 </td> <td> Isabel </td> <td> Patricio </td> <td> isabel.patricio@example.com </td>
</tr>    
</table>
         
    <script>
        var sTable = new sortableTable();
        sTable.init('.sortable');
    </script >
    
</body>   
</html>

O arquivo sortableTable_class.js deve ser chamado no html entre as tags head.
Não esquecer também a inclusão do ficheiro jquery-2.1.3.min.js para que tudo funcione corretamente.

sortableTable_class.js



function sortableTable() {

    //Sorting Function
    this.sort = function(pointer, sortDirection) {
        var $table = pointer.closest('table');
        var $arrows = pointer.find('.sortableTable_Arrow');
        var columnNum = pointer.index() + 1;

        //This check is for in case you want to sort the table without initializing it.
        if (sortDirection == undefined && $table.hasClass('sortableTableInit')) {
            //Logic to see which way to sort and which arrow to display
            if ($arrows.hasClass('sorting')) {
                if ($arrows.html().charCodeAt(0) == 9650) {
                    $arrows.html('&#9660;');
                    sortDirection = 'down';
                } else {
                    $arrows.html('&#9650;');

                }
            } else {
                $table.find('.sortableTable_Arrow').removeClass('sorting').html('&#9650; &#9660;');
                $arrows.addClass('sorting').html('&#9650;');
                sortDirection = 'up';
            }
        } else if (sortDirection == undefined) {
            sortDirection = 'up';
        }


        //Sorting
        var sortingArray = [];
        var htmlArray = [];
        $table.find('tr:not(:first-child)').each(function() {
            var sortedValue = $(this).find('td:nth-child(' + columnNum + ')').text();
            sortingArray[$(this).index()] = sortedValue + " " + $(this).index();
            htmlArray[$(this).index()] = $(this).html();
        });

        if (sortDirection == 'up') {
            sortingArray.sort();
        } else {
            sortingArray.reverse();
        }
        for (var i=0; i<sortingArray.length - 1; i++) {
            var tempArray = sortingArray[i].split(" ");
            var originalRow = tempArray[tempArray.length - 1];
            $table.find('tr:nth-child('+ +(i+2) +')').html(htmlArray[originalRow]);
        }
    };

    //Sets up some things on table
    this.init = function(ptr) {
        var $pointer;
        var obj = this;
        if (typeof ptr == "string") {
            $pointer = $(ptr);
        } else if (typeof ptr == "object") {
            $pointer = ptr;
        }

        //Checks to see if table is already initialized
        if($pointer.hasClass('sortableTableInit')){
            return false;
        }
        $pointer.addClass('sortableTableInit');

        //Adds arrows and click listener
        var $thead = $pointer.find('tr:first-child');
        $thead.find('td:not(.noSort), th:not(.noSort)')
            .append('<div class="sortableTable_Arrow">&#9650; &#9660;</div>')
            .click(function() { obj.sort($(this)); });
    };
};

sortableTable.css


/*
table, td, th{
    border-collapse: collapse;
    border: 1px solid gray;
    }
*/    
.sortableTable_Arrow{
    max-width: 20px;
    float: right;
    font-size: 15px;
    padding-left: 5px;
    cursor: pointer;
    -webkit-user-select: none;
    color:blue;
}
.sortableTable_Arrow.sorting{
    font-size: 13px;
}

voltar para o topo ↑

Download Código

Espero ter sido útil e motivados a fazer mais experiências. Deixe aqui a sua avaliação.

1 votos - 5 pontos - 21 downloads
Média : 5,000

Infoscript - Desenvolvimento de websites, e-commerce e programação

Infoscript tem soluções para desenvolvimento web e programação para aproximar os seus clientes às necessidades atuais do mercado.
O design de produto, a criação de websites e lojas online entre outros, são os principais serviços que temos para lhe oferecer.
Contate-nos através do endereço geral@infoscript.pt
Nós teremos uma solução para si à medida.