Diente de león tablas de datos Personalizados jqueryUI tema

Question

Recientemente he integrado tablas de datos con mi spring 4 mvc + Hibernate 4 + Tiles 3 Proyecto.

Todo está funcionando bien.Pero tengo un problema.Mi jqueryUI themes no están funcionando correctamente.

Por favor, eche un vistazo en imágenes a continuación.
1. Search filter y export links no están en una fila.Quiero que aparecen en una fila.

He probado con dom="ilfrtip" Exportación de enlaces desaparecido!!No se de salida de lo que yo quería...!

2. Y datatable sorted column aparece azul en todos los temas !!

3. También quiero resaltar la fila en desplazar el puntero del mouse como se muestra aquí, pero con mi color personalizado no azul.

4. También quiero rayas como se muestra aquí, pero con mis colores personalizados.

He utilizado cssStripes="odd,even", pero no de trabajo.:(

Así que quiero aplicar tema personalizado en lugar de básica themeoptions temas.

He descargado mi tema personalizado en ThemeRoller nombre PurpleTheme.

¿Cómo puedo aplicar esto a datatables?

Yo soy de la carga de temas a partir de la primavera del tema usando las propiedades de la primavera themeresolver y 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"   >

Cualquier ayuda es invitado.Gracias de antemano.....

Answer 1

Acabo de hacer una prueba por la descarga de un tema de ThemeRoller.Aquí sigue los pasos necesarios para aplicar un tema personalizado utilizando el diente de león & diente de león-tablas de datos v0.10.0.

1/ Descargar e instalar el jQueryUI los activos relacionados con el

Una vez que hayas descargado todos los activos de ThemeRoller, colocarlos dentro de su proyecto.En mi ejemplo, yo uso el siguiente estándar de Maven de la arquitectura:

src
|__ main
   |__ webapp
      |__ assets
         |__ css
            |__ jquery-ui-1.10.4.custom.css
         |__ images
            |__ ui-bg_*****.png
            |__ ui-icons_****.png

Advertencia: Tuve que actualizar todos los vínculos de la imagen en el archivo CSS para que apunte a mi images carpeta (../images/ en lugar de images/).

2/ la preparación de un nuevo paquete de activos

Una vez que todos los activos están aquí, crear una nueva paquete llama custom-theme.json en el src/main/resources/dandelion carpeta.

En este archivo, sólo tiene que hacer referencia a su CSS personalizado.No olvides marcar este paquete como dependiente de la jqueryui uno (que ya está activado cuando se utiliza el theme="jqueryui" tabla de atributos).

{
    "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/ Crear una extensión para el diente de león-tablas de datos

Actualmente, la única manera de utilizar un tema personalizado opción para la jqueryui el tema es crear una extensión.

Con el fin de aliviar la configuración (JSP lado), le sugiero que para crear una extensión (en realidad un tema), que se activan tanto jQueryUI y su tema personalizado, de modo que usted no necesita utilizar theme="jqueryui" por más tiempo.

3.1/ Crear una clase que extienda 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/ Registro de su extensión

Entonces, su extensión debe ser detectado por el diente de león-tablas de datos.Para ello, debe definir el [group].main.extension.package propiedad en el archivo de configuración.Esta propiedad es en realidad un paquete donde diente de león-tablas de datos buscará extensiones.

Así que he añadido una nueva datatables.properties archivo bajo el src/main/resources/dandelion/datatables/ carpeta, que contiene:

global.main.extension.package=com.example

4/ Activar la extensión

Una vez que el terreno está preparado, puede probar su extensión mediante la activación de ella gracias a la ext la tabla de atributos.

<datatables:table ... ext="myTheme" ...>
    ...
</datatables:table>

Sólo tiene que pasar el nombre que le has dado anteriormente en la getName() método de su extensión.

5/ Adaptar la configuración

Funciona bien sin necesidad de exportar los enlaces.Pero tan pronto como se activa la función de exportación, diente de león-tablas de datos se actualizará el sDom parámetro con una nueva carta: E (para la Exportación), por lo tanto, romper la configuración establecida previamente por el tema jQuery.

Tan sólo necesita reemplazar esta configuración de la siguiente manera:

<datatables:table ... ext="myTheme" export="csv" dom="<\"H\"lEfr>t<\"F\"ip>">
    ...
</datatables:table>

Otra opción sería la de configurar el sDom parámetro directamente en la anterior CustomJqueryTheme Clase de Java.

Por último, si desea actualizar el par/impar de filas, sólo tiene que utilizar el cssStripes tabla de atributos de la siguiente manera:

<datatables:table ... cssStripes="css-class-for-odd,css-class-for-even">
    ...
</datatables:table>

Sólo asegúrese de:

• ya sea para usar algo distinto a "raro" y "aun" (debido a que las tablas de datos el uso de estas clases)
• o si usted todavía desea utilizar "raro" y "hasta", asegúrese de reemplazar con reglas de CSS personalizadas.

---

Como se puede ver, no es muy fácil.:-/

Pero debería ser un poco más simple en las próximas versiones gracias a las mejoras en el mecanismo de extensión.

Tenga en cuenta que voy a actualizar esta respuesta una vez que este ejemplo que estará disponible en el oficial de diente de león-tablas de datos aplicaciones de ejemplo.

(Descargo de responsabilidad requerido por StackOverflow:Soy el autor de diente de león)