Dente-de-leão Datatables Personalizado jqueryUI tema
-
21-12-2019 - |
Pergunta
Recentemente eu integrada datatables com a minha spring 4 mvc
+ Hibernate 4
+ Tiles 3
Projeto.
Tudo está funcionando bem.Mas eu tenho um problema.Meu jqueryUI themes
não estão a funcionar correctamente.
Por favor, dê uma olhada nas imagens abaixo.
1. Search filter
e export links
não estão em uma linha.Eu quero que eles apareçam em uma linha.
Eu tentei com o dom="ilfrtip"
Links de exportação desapareceu!!Também não obter o resultado do que eu queria...!
- E
datatable sorted column
aparece azul em todos os temas !!
Eu também quero destacar linha no foco do mouse conforme mostrado aqui, mas com o meu cor personalizada não azul.
Eu também quero listras, como mostrado aqui, mas com o meu cores personalizadas.
Eu usei cssStripes="odd,even"
, mas não funcionando.:(
Então, eu quero aplicar tema personalizado em vez do basic themeoptions temas.
Eu baixei o meu tema personalizado a partir de Leitores nome PurpleTheme
.
Como posso aplicar isso ao datatables
?
Eu sou o carregamento de temas a partir da primavera de propriedades de tema usando spring themeresolver
e themeinterceptor
.
<spring:theme code="theme" var="springTheme" />
<datatables:table id="users" data="${list}"
row="user" rowIdBase="userId" rowIdPrefix="user_"
displayLength="5" lengthMenu="5,10,15,25,50,100"
jqueryUI="true" theme="jqueryui" themeOption="${springTheme}"
filterable="true"
processing="true" autoWidth="true"
pageable="true" paginationType="full_numbers"
export="csv,xml,pdf,xls,xlsx" stateSave="true" deferRender="true" >
Qualquer ajuda é convidado.Obrigado antecipadamente.....
Solução
Eu fiz apenas um teste por download de um tema a partir de Leitores.Aqui segue os passos necessários para aplicar um tema personalizado utilizando o dente-de-Leão & Leão-Datatables v0.10.0.
1/ Baixar e instalar o jQueryUI-ativos relacionados
Depois de fazer o download de todos os ativos de seus Leitores, colocá-los dentro de seu projeto.No meu exemplo, eu uso o seguinte padrão do Maven arquitetura:
src
|__ main
|__ webapp
|__ assets
|__ css
|__ jquery-ui-1.10.4.custom.css
|__ images
|__ ui-bg_*****.png
|__ ui-icons_****.png
Aviso: Eu tinha que atualizar todos os links de imagem no arquivo CSS para apontá-los para o meu images
pasta (../images/
em vez de images/
).
2/ Preparar um novo pacote do recurso
Uma vez que todos os bens estão aqui, criar uma nova pacote chamado custom-theme.json
no src/main/resources/dandelion
a pasta.
Neste arquivo, você só precisa fazer referência a seu CSS personalizado.Não se esqueça de marcar este pacote como dependente do jqueryui
(o que já é ativado quando você usar o theme="jqueryui"
tabela de atributo).
{
"bundle" : "custom-theme",
"dependencies": [ "jqueryui" ],
"assets": [{
"name": "jquery-ui-custom",
"version": "0.10.0",
"type": "css",
"locations": {
"webapp": "/assets/css/jquery-ui-1.10.4.custom.css"
}
}]
}
3/ Criar uma extensão para o dente-de-Leão-Datatables
Atualmente, a única maneira de usar um tema personalizado para a opção jqueryui
o tema é criar uma extensão.
Para aliviar a configuração (JSP lado), eu sugiro que você crie uma extensão (na verdade, um tema), que acionará ambos jQueryUI e seu tema personalizado, de modo que você não precisa usar theme="jqueryui"
mais.
3.1/ Criar uma classe que estende AbstractExtension
package com.example;
public class CustomJqueryTheme extends AbstractExtension {
@Override
public String getName() {
return "myTheme";
}
@Override
public void setup(HtmlTable table) {
// Activate bundles
AssetRequestContext
.get(table.getTableConfiguration().getRequest())
.addBundle("ddl-dt-theme-jqueryui")
.addBundle("custom-theme");
// Add "bJQueryUI":true
addParameter(DTConstants.DT_JQUERYUI, true);
// Add class="display"
table.addCssClass("display");
}
}
3.2/ Registar a sua extensão
Em seguida, sua extensão deve ser detectado pelo dente-de-Leão-Datatables.Para fazer isso, você deve definir o [group].main.extension.package
propriedade no arquivo de configuração.Esta propriedade é na verdade um pacote de onde dente-de-Leão-Datatables fará a varredura de extensões.
Então eu adicionei um novo datatables.properties
arquivo sob o src/main/resources/dandelion/datatables/
a pasta, que contém:
global.main.extension.package=com.example
4/ Ativar a extensão
Uma vez que o solo preparado, você pode testar a sua extensão por activar graças a ext
tabela de atributo.
<datatables:table ... ext="myTheme" ...>
...
</datatables:table>
Basta passar o nome que você deu acima, na getName()
método de sua extensão.
5/ Adaptar a configuração
Ele funciona bem sem links de exportação.Mas assim que você ativar o recurso de exportação, dente-de-Leão-Datatables irá atualizar o sDom parâmetro com uma nova letra: E
(para Exportação), quebra, portanto, a configuração anteriormente definida pelo jQuery tema.
Então, você só precisa substituir esta definição da seguinte forma:
<datatables:table ... ext="myTheme" export="csv" dom="<\"H\"lEfr>t<\"F\"ip>">
...
</datatables:table>
Outra opção seria configurar o sDom parâmetro diretamente acima CustomJqueryTheme
Classe Java.
Finalmente, se você deseja atualizar o par/ímpar linhas, basta usar o cssStripes atributo de tabela, como se segue:
<datatables:table ... cssStripes="css-class-for-odd,css-class-for-even">
...
</datatables:table>
Basta garantir que:
- quer usar algo diferente de "estranha" e "mesmo" (porque Datatables usar essas classes)
- ou se ainda quiser usar o "estranho" e "mesmo", certifique-se de substituí-los com CSS personalizado regras.
Como você pode ver, não é muito fácil.:-/
Mas deve tornar-se um pouco mais simples, nas próximas versões, graças a melhorias no mecanismo de extensão.
Note que eu vou atualizar esta resposta, uma vez que este exemplo vai estar disponível na lista oficial de dente-de-Leão-Datatables aplicações de exemplo.
(Isenção de responsabilidade exigido pela StackOverflow:Eu sou o autor de dente-de-Leão)