Dente-de-leão Datatables Personalizado jqueryUI tema

Question

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...!

2. E datatable sorted column aparece azul em todos os temas !!

3. Eu também quero destacar linha no foco do mouse conforme mostrado aqui, mas com o meu cor personalizada não azul.

4. 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.....

Answer 1

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)