GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

Criar lista ordenavel

#1

Boa tarde,

Eu tenho um blogue e queria criar uma lista ordenavel. Não sei se é em html ou css

Alguem me pode ajudar?

Era tipo isto:

Muito obrigado,
Filipe

0 Likes

#2

Eu utilizo esse plugin no trabalho, gostaria de ordenar em qual ordem?

0 Likes

#3

HTML, CSS e JS pra ficar bem feito

O que você quer esta aqui:
https://datatables.net/

0 Likes

#4

Posso implementar o datatables no blogger?

0 Likes

#5

Pode, é free

Da uma fuçada ai no datatables, tem bastante coisa e da pra fazer junto com bootstrap caso queira, é bem fácil

0 Likes

#6

Ok obrigado!
Existe alguma tutorial de como criar as tabelas e como as instalar numa pagina no blogger?

Muito Obrigado

0 Likes

#7

O blog não é seu? Você não tem acesso ao código fonte?

Pra ser bem sincero, eu não sei como funciona os blogs de terceiro. Mas faz um teste ai em um arquivo a parte.

Pra utilizar não tem segredo, só importar os arquivos css e js, criar a tabela e chamar a função que vai fazer o datatables personalizar a sua tabela.

No próprio site tem os exemplos

0 Likes

#8

Sim o blog é meu.

Mas como faço para importar os arquivos? e para criar a tabela?

É que eu nao percebo quase nada disto.

Desculpe estar a ser chato, mas realmente nao sei o que fazer

0 Likes

#9

No site tem vários exemplos de tabelas, como por exemplo:
https://datatables.net/examples/styling/bootstrap4
Rola a página que la fala como fazer.

Você não sabe HTML?

0 Likes

#10

Sei o básico de html. sim, sei criar tabelas :slight_smile:

Entao no exemplo que colocou tem o código javascript e html e css.

Onde eu coloco cada um desses?

Cria uma página estatica no blogger.
E depois o javascript? coloco onde?

Muito obrigado pela ajuda

0 Likes

#11

Qual a dúvida em sí? O que você tentou?

Pra importar o css você tem que usar a tag link no head e para importar o js a tag script no final da tag body (recomendado)

Na real não precisa criar nenhum arquivo, mas pode

0 Likes

#12

numa página estatica do blogger coloquei o seguinte código. O que fiz errado? ou nao é aqui que se coloca?

<script type="text/javascript">
  
           $(document).ready( function () {
    $('#myTable').DataTable();
} );
</script>
<script charset='utf8' src='http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js' type='text/javascript'></script>
<link href='http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css' rel='stylesheet' type='text/css'/>
<link rel="stylesheet" type="text/css" href="/DataTables/datatables.css">
 
<script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script>
<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>
0 Likes

#13

Ai você coloca o id da sua tabela, que no caso é table_id

Sempre verifique no console do navegador se não há algum erro

1 Like

#14

Não resolveu
Fica assim na página de teste que criei:
https://www.animaly.org/p/blog-page_19.html

0 Likes

#15

Como eu disse:

  • Coloca a tag link no head
  • Coloca as tags scripts no FINAL da tag body
  • Coloca a tag script que possui a função DataTable() como a última tag script, pois você só vai conseguir chamar essa função se ela ja foi definida pelo menos uma linha antes

Eu poderia te dar o código pronto, mas é bom para você exercitar.

PS: Não consegui entrar no seu site

0 Likes

#16

Nao consegui.

O código da página esta assim:

view-source:https://www.animaly.org/p/blog-page_19.html

0 Likes

#17

Não adianta eu ficar falando as coisas aqui se você não vai seguir.

Cria um arquivo separado e faz la, se não der certo, você posta TODO o código da página.

Depois que der certo, você passa pro blog.

0 Likes

#18

Eu nao estou aqui para aprender mais sobre html.

Eu tenho uma ong e para um projeto preciso implementar isto.

Se não me quer dar a resposta ok, eu procuro noutro lado.

Obrigado

0 Likes

#19

Demorei menos de 5 minutos contando desde o tempo de baixar o notepad++ até implementar o código seguindo o passo a passo que deixei aqui, se você não quer seguir ou aprender o básico ai não é problema meu.

Boa sorte

0 Likes

#20

Se eu percebesse o que quer dizer o passo a passo já o tinha implementado à muito

0 Likes