Classificador de tabela jQuery UITheme Widget (Bootstrap v3.x) Classificação de tabela flexível do lado do cliente Novo No tablesorter v2.11, o tema de bootstrap agora funciona com o Bootstrap 3 e versões mais antigas. Observe as alterações nos ícones de classificação nos padrões. tablesorter. themes. bootstrap abaixo. Basta usar o nome da classe de ícone apropriado (ícone - para Bootstrap v2 e glyphicon glyphicon - para Bootstrap v3. E, claro, incluir a imagem necessária Bootstrap ou fonte). Envolto todos os controles pager no tfoot dentro de um div (não use o pager nome da classe como ele adiciona um monte de preenchimento) para manter os controles de ser centrado. Botões de controle de pager no tfoot têm nomes de classe necessários para ambos os Bootstrap v2 e v3, então não há necessidade de você usar ambos, basta usar os que você precisa. A partir da versão 2.9 do tablesorter, esse widget não pode mais ser aplicado a versões do tablesorter anteriores à versão 2.8. Certifique-se de incluir o no headerTemplate para adicionar uma seta de classificação para os cabeçalhos. Adicionado em v2.7 Você precisará modificar a opção headerTemplate para incluir o ícone de bootstrap Veja o exemplo no código. Definir a opção de tema para Bootstrap irá agora substituir / ignorar o valor uitheme no widgetOptions. No tablesorter v2.4, a opção uitheme foi alterada para indicar o tema em vez de uma matriz de ícones a usar: Todos os nomes de classes de temas agora estão contidos em. tablesorter. themes com o tema Bootstrap salvo em. tablesorter. themes. bootstrap. A variável themes permite que você modifique os nomes de classe para a tabela, cabeçalho, classificar ícones, estado ativo, estado hover, entradas de filtro e striping zebra. Veja o código abaixo sobre como estender essas variáveis. Defina a opção tema do widget uitheme (alterado em v2.7) para bootstrap para definir o widget para usar o tema Bootstrap. Consulte a demonstração jQuery UI para outro exemplo. Este demo mostra como contornar um problema com o widget de filtro: O botão de widget zebra abaixo foi adicionado para mostrar que quando a classe bootstraps table-striped é aplicada, o css definido zebra striping não se aplicará corretamente porque as linhas de tabela estão ocultas, mas ainda contabilizadas Para pelo css nth-child () seletor. Para entender melhor este problema, desative o widget zebra (usando o botão alternar). Agora 80 Filtro 80 na coluna Cálculo. Experimente outras pesquisas de filtro com o widget zebra desabilitado, como Filtrar macho na coluna Sexo. Para resolver esse problema, basta ativar o widget zebra e os nomes de classe de linhas pares e ímpares devem superar o estilo nth-child (). NOTA Isso não parece funcionar na versão mais recente do Bootstrap, então você terá que remover completamente a tabela da classe listrada da tabela. A única desvantagem é que, para temas de bootstrap personalizados, você precisará editar o arquivo theme. bootstrap. css para bootstrap. Esta demonstração usa atributos de dados HTML5 e, portanto, precisa de jQuery 1.4. Redefinir filtro. Repor filtros Zebra widget. EnabledI resolveu o mesmo problema seguindo este exemplo: Este exemplo usa a biblioteca jQuery JavaScript. Primeiro, crie um ícone do Ajax usando o site AjaxLoad. Em seguida, adicione o seguinte ao seu HTML. E o seguinte para o seu arquivo CSS: Finalmente, você precisa ligar para os eventos do Ajax que jQuery fornece um manipulador de eventos para quando o pedido Ajax começa, e um para quando ele termina: 1 para o quotdo apenas uma vezquot hooking mecanismo. Mas um indicador de carregamento fixo não é ótimo para modais que normalmente têm uma sobreposição que ocultará parcialmente o indicador de carregamento. Melhor colocar o indicador de carregamento no interior do modal nesse caso, por ex. Na barra de título. Ou talvez adicionar um alto z-índice para o indicador para que ele mostra acima da sobreposição. Ndash Pierre Henry Jun 17 14 at 15:28 Ei, tudo. Veja uma demonstração com base nesta resposta. Ndash Paul Vargas Mar 20 15 at 6:29 Lembre-se de colocar os scripts após a referência para o script JQuery. Eu só passar uma hora por causa da ordem inversa de colocação dentro da página. Ndash Greg Z. Oct 30 15 at 15: 10DataTables Plug-in de tabela para jQuery DataTables é um plug-in para a biblioteca JavaScript jQuery. É uma ferramenta altamente flexível, baseada nos fundamentos do aprimoramento progressivo, e adicionará controles avançados de interação a qualquer tabela HTML. Paginação, busca instantânea e multi-coluna de pedidos Suporta quase qualquer fonte de dados: DOM. Javascript. Processamento Ajax e do lado do servidor Facilmente tema-capaz: DataTables. JQuery UI. Bootstrap. Fundação Ampla variedade de extensões inc. Editor. Botões. FixedColumns e mais Opções extensas e uma API bonita e expressiva Totalmente internacionalisable Qualidade profissional: apoiada por um conjunto de 2900 testes de unidade Software livre de código aberto (licença MIT) Suporte comercial disponível. Opções de rolagem para a janela de exibição de tabela Manipulação inteligente de larguras de coluna Economia de estado Colunas ocultas Criação dinâmica de tabelas Carregamento automático de dados Ajax Posicionamento DOM personalizado Filtragem de uma coluna Tipos de paginação alternativa Interação DOM não destrutiva Coluna (s) destacando Opções avançadas de fonte de dados Suporte comercial disponível Totalmente acessível para leitores de tela / acesso ao teclado Tamanho de arquivo sensível: 78K minified, 26K gzipd Suporte de plug-in extenso 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 DataTables Take Uma olhada no código abaixo: uma única chamada de função para inicializar a tabela é tudo o que faz Começar com DataTables é tão simples como incluir dois arquivos em seu site, o estilo CSS eo próprio script DataTables. Esses dois arquivos estão disponíveis no DataTables CDN: Um exemplo de DataTables em ação é mostrado abaixo. Spring Boot JQuery DataTables Gustavo Ponce tem um artigo detalhado descrevendo como usar Primavera e DataTables juntos, indo todo o caminho de iniciar um novo projeto até a tabela terminada. Angular 2, WebWorkers e DataTables Harris Brakmic está executando uma série de artigos como uma introdução ao Angular 2, e aqui ele usa DataTables com WebWorkers, dentro de um aplicativo Angular 2 para exibir informações de um recurso OData remoto. Responsive and Select Michael Ryvkin tem um post bem escrito os detalhes como Select e Responsive pode ser usado perfeitamente juntos. DataTables processamento do lado do servidor e Rails Jakhongir Alimov publicou um bem documentado Rails gem para DataTables lado do servidor de processamento de modo, tornando-se super fácil de usar conjuntos de dados maciça com Rails. ThemeForest temas com DataTables Se você estiver procurando uma maneira rápida de criar tabelas olhando elegante, integrado com o resto do seu site, então há uma série de temas disponíveis no ThemeForest que utilizam DataTables. Por favor, deixe-me saber se você tem qualquer DataTables notícias relacionadas, que eu posso adicionar aqui
No comments:
Post a Comment