Bootstrap table sort indicator forex

Sexta-feira, 6 de junho de 2014 Font Fontes de ícones de integração impressionantes, como Font Awesome. Pode fornecer uma grande quantidade de elementos gráficos para um web site de maneira eficiente em largura de banda. Eles fazem isso construindo sobre as bases de arquivos de fontes regulares e habilidades de navegadores da web para usar fontes da web. As informações para cada ícone são armazenadas em uma forma de vetor, então, quando o navegador o processar, ele parecerá perfeito em pixels em qualquer tamanho, em qualquer dispositivo. DataTables não faz uso de um grande número de ícones, pois o layout principal da tabela e os dados são definidos pelo estilo CSS da página, mas usa alguns ícones para ajudar a transmitir informações ao usuário final: nas células de cabeçalho Para indicar que uma coluna pode ser classificada, ou é que a classificação está atualmente aplicada a ela. Opcionalmente no controle de paginação, os botões seguinte e anterior podem ser mostrados graficamente usando ícones. Nesta publicação, descreverei como podemos usar o Font Awesome para fornecer esses elementos gráficos para DataTables e apresentar um arquivo de integração completo, que funciona com a folha de estilo padrão DataTables, bem como as integrações de estilo DataTables Bootstrap e Foundation. Ícones de classificação A folha de estilos DataTables padrão faz uso de imagens de plano de fundo para exibir o estado de classificação atual das tabelas para o usuário final. Três ícones (classificação ascendente, classificação decrescente e classificável) significam três solicitações HTTP - usando uma fonte de ícone reduz isso para uma única solicitação, acelerando o tempo de resposta do seu site (um sprite também pode ser usado, embora tenha suas próprias complexidades) . Para usar ícones fornecidos com Font Awesome, podemos usar o CSS: após o pseudo-elemento. Como um resumo rápido, cada elemento exibido pelo navegador está vazio antes e depois de elementos, que normalmente estão escondidos, mas podem ser visíveis para fins de estilo - exatamente o que queremos. Considere o seguinte CSS: Linha 1: selecione as células de cabeçalho de coluna para A tabela para a qual vamos aplicar o nosso estilo Linha 2: Defina a posição como relativa, de modo que: após o pseudo-elemento pode ser posicionado em relação a ele. Linha 3: Remover o indicador padrão de imagem de classificação DataTables Linhas 6-8: Selecionar: após pseudo-elementos Linhas 9-12: Exibir o pseudo-elemento e posição à direita do cabeçalho Linha 13: Defina a fonte para ser fonte impressionante Agora, tudo o que precisamos fazer é dizer ao navegador qual o ícone da lista Font Awesomes para usar. Fazemos isso com a propriedade de conteúdo CSS. Nesse caso, aplicamos o código de ícone necessário para as três classes de classificação. Observe também que os ícones de classificação disponíveis, mas não ativados, são feitos um pouco menores que os ícones que mostram as colunas em que a tabela está sendo ordenada atualmente. Controles de paginação Como mencionado acima, a outra área em que DataTables pode fazer uso de ícones está nos controles de paginação. Ao invés de entrar em detalhes do CSS necessário para isso aqui, como o processo é basicamente o mesmo que acima, veja o arquivo completo de integração abaixo se você estiver interessado no funcionamento dos ícones de paginação com uma fonte de ícone. Vale a pena notar que as opções de linguagem DataTables. Como language. paginate. next pode ser usado para modificar as seqüências de caracteres ao lado dos ícones ou removê-los completamente (configurando-os para ser uma string vazia), deixando apenas o ícone. Finalmente, os botões mostrados para a entrada de paginação podem ser controlados pelo pagingType. Integração completa O arquivo CSS completo. Provando Font Awesome integração para DataTables está disponível no DataTables CDN: O arquivo de integração Font Awesome para DataTables fornece suporte para a folha de estilos DataTables padrão. Bem como as opções de integração para o Bootstrap e a Fundação. Para usá-lo em suas próprias páginas, basta incluir o arquivo CSS do CDN como faria com qualquer outro arquivo CSS com uma tag de link ou copiar o CSS para seus próprios arquivos locais e modificar para atender às suas necessidades (adicionando cor aos ícones para exemplo). Os seguintes documentos mostram a integração Font Awesome que está sendo usada com um DataTable básico: o plug-in da tabela DataTables para jQuery DataTables é um plug-in para a biblioteca jQuery Javascript. É uma ferramenta altamente flexível, baseada nos fundamentos do aprimoramento progressivo, e adicionará controles de interação avançados a qualquer tabela HTML. Paginação, busca instantânea e pedido de várias colunas Suporta quase qualquer fonte de dados: DOM. Javascript. Ajax e processamento do lado do servidor Fácilmente capaz de tema: DataTables. JQuery UI. Bootstrap. Fundação Grande variedade de extensões inc. Editor. Botões. FixedColumns e mais Opções extensivas e uma API bonita e expressiva Totalmente internacionalizável Qualidade profissional: apoiada por um conjunto de testes de 2900 unidades Software livre de código aberto (licença MIT) Suporte comercial disponível. Opções de deslocamento para viewport de tabela Manejo inteligente de larguras de colunas Salvamento de estado Colunas ocultas Criação dinâmica de tabelas Ajax carregamento automático de dados Posicionamento de DOM personalizado Filtragem de coluna única Tipos de paginação alternativos Interação não destrutiva de DOM Coluna (s) de classificação destacando Opções avançadas de fonte de dados Suporte comercial disponível Totalmente acessível para o acesso ao teclado de tela de teclado Tamanho do arquivo sensível: 78K minificado, 26K gzipd Suporte de plug-in extensivo Classificação, detecção de tipo, funções de API, paginação e filtragem Documentação sólida e referência de interface 130 exemplos pré-construídos Como é fácil usar os DataTables Faça um Espere o código abaixo: uma única chamada de função para inicializar a tabela é tudo o que precisa. Começar com DataTables é tão simples como incluir dois arquivos em seu site, o estilo CSS e o script DataTables propriamente dito. Estes dois arquivos estão disponíveis no DataTables CDN: um exemplo de DataTables em ação é mostrado abaixo.