Comunidad de diseño web y desarrollo en internet online

Cambiar color de las filas en datatables de jQuery

Citar            
MensajeEscrito el 05 Dic 2012 09:47 pm
Hi!

Ya lo logré instalar el complemento DataTables de Jquery para personalizar mis tablas con datos de MySQL. Lo que no he podido es cambiarle los colores de las filas, se supone que es algo sencillo pero no doy con la solucion, modifico los css y nada. Alguien sabe que hay que hacer o modificar? :lol:

Por MajinBoo

Claber

105 de clabLevel

1 tutorial

Genero:Masculino  

Constante aprendiz de programación web.

firefox
Citar            
MensajeEscrito el 08 Dic 2012 09:41 pm
Bueno despúes de batallar mucho :sueno: , dejo mi código css completo que tuve que modificar para cambiar el color de las filas de un DataTable jQuery. El archivo que utilizé se llama: demo_table_jui.css incluido en el directorio media/css del plugin DataTable version 1.9.4 .

Estos son los cuatros archivos importados en mi index.php

Código HTML :

<style type="text/css" title="currentStyle">
   @import "DataTables-1.9.4/media/css/demo_table_jui.css";
   @import "DataTables-1.9.4/examples/examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css";
</style>

<script src="DataTables-1.9.4/media/js/jquery.js"></script>
<script src="DataTables-1.9.4/media/js/jquery.dataTables.js"></script>


demo_table_jui.css donde comenté códigos que no necesitaba y cambio el color de las benditas filas.

Código CSS :

/*
 *  File:         demo_table_jui.css
 *  CVS:          $Id$
 *  Description:  CSS descriptions for DataTables demo pages
 *  Author:       Allan Jardine
 *  Created:      Tue May 12 06:47:22 BST 2009
 *  Modified:     $Date$ by $Author$
 *  Language:     CSS
 *  Project:      DataTables
 *
 *  Copyright 2009 Allan Jardine. All Rights Reserved.
 *
 * ***************************************************************************
 * DESCRIPTION
 *
 * The styles given here are suitable for the demos that are used with the standard DataTables
 * distribution (see www.datatables.net). You will most likely wish to modify these styles to
 * meet the layout requirements of your site.
 *
 * Common issues:
 *   'full_numbers' pagination - I use an extra selector on the body tag to ensure that there is
 *     no conflict between the two pagination types. If you want to use full_numbers pagination
 *     ensure that you either have "example_alt_pagination" as a body class name, or better yet,
 *     modify that selector.
 *   Note that the path used for Images is relative. All images are by default located in
 *     ../images/ - relative to this CSS file.
 */


/*
 * jQuery UI specific styling
 */

.paging_two_button .ui-button {
   float: left;
   cursor: pointer;
   * cursor: hand;
}

.paging_full_numbers .ui-button {
   padding: 2px 6px;
   margin: 0;
   cursor: pointer;
   * cursor: hand;
   color: #333 !important;
}

.dataTables_paginate .ui-button {
   margin-right: -0.1em !important;
}

.paging_full_numbers {
   width: 350px !important;
}

.dataTables_wrapper .ui-toolbar {
   padding: 5px;
}

.dataTables_paginate {
   width: auto;
}

.dataTables_info {
   padding-top: 3px;
}

table.display thead th {
   padding: 3px 0px 3px 10px;
   cursor: pointer;
   * cursor: hand;
}

div.dataTables_wrapper .ui-widget-header {
   font-weight: normal;
}


/*
 * Sort arrow icon positioning
 */
table.display thead th div.DataTables_sort_wrapper {
   position: relative;
   padding-right: 20px;
}

table.display thead th div.DataTables_sort_wrapper span {
   position: absolute;
   top: 50%;
   margin-top: -8px;
   right: 0;
}




/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *
 * Everything below this line is the same as demo_table.css. This file is
 * required for 'cleanliness' of the markup
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables features
 */

.dataTables_wrapper {
   position: relative;
   clear: both;
}

.dataTables_processing {
   position: absolute;
   top: 0px;
   left: 50%;
   width: 250px;
   margin-left: -125px;
   border: 1px solid #ddd;
   text-align: center;
   color: #999;
   font-size: 11px;
   padding: 2px 0;
}

.dataTables_length {
   width: 40%;
   float: left;
}

.dataTables_filter {
   width: 50%;
   float: right;
   text-align: right;
}

.dataTables_info {
   width: 50%;
   float: left;
}

.dataTables_paginate {
   float: right;
   text-align: right;
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables display
 */
table.display {
   margin: 0 auto;
   width: 100%;
   clear: both;
   border-collapse: collapse;
}

table.display tfoot th {
   padding: 3px 0px 3px 10px;
   font-weight: bold;
   font-weight: normal;
}

table.display tr.heading2 td {
   border-bottom: 1px solid #aaa;
}

table.display td {
   padding: 3px 10px;
}

table.display td.center {
   text-align: center;
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables sorting
 */

.sorting_asc {
   background: url('../images/sort_asc.png') no-repeat center right;
}

.sorting_desc {
   background: url('../images/sort_desc.png') no-repeat center right;
}

.sorting {
   background: url('../images/sort_both.png') no-repeat center right;
}

.sorting_asc_disabled {
   background: url('../images/sort_asc_disabled.png') no-repeat center right;
}

.sorting_desc_disabled {
   background: url('../images/sort_desc_disabled.png') no-repeat center right;
}




/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * DataTables row classes
 */

/* 
table.display tr.odd.gradeA {
   background-color: #ddffdd;
}

table.display tr.even.gradeA {
   background-color: #eeffee;
}

table.display tr.odd.gradeA {
   background-color: #ddffdd;
}

table.display tr.even.gradeA {
   background-color: #eeffee;
}

table.display tr.odd.gradeC {
   background-color: #ddddff;
}

table.display tr.even.gradeC {
   background-color: #eeeeff;
}

table.display tr.odd.gradeX {
   background-color: #ffdddd;
}

table.display tr.even.gradeX {
   background-color: #ffeeee;
}

table.display tr.odd.gradeU {
   background-color: #ddd;
}

table.display tr.even.gradeU {
   background-color: #eee;
}
*/

tr.odd {/*color de las filas impares*/
   background-color: #EAF2D3;
   
}

tr.even {/*color de las filas pares*/
   background-color: white;
}

tr td {/*color de los bordes de filas y columnas*/
   border:1px solid #98bf21;
}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Misc
 */
.dataTables_scroll {
   clear: both;
}

.dataTables_scrollBody {
   -webkit-overflow-scrolling: touch;
}

.top, .bottom {
   padding: 15px;
   background-color: #F5F5F5;
   border: 1px solid #CCCCCC;
}

.top .dataTables_info {
   float: none;
}

.clear {
   clear: both;
}

.dataTables_empty {
   text-align: center;
}

tfoot input {
   margin: 0.5em 0;
   width: 100%;
   color: #444;
}

tfoot input.search_init {
   color: #999;
}

td.group {
   background-color: #d1cfd0;
   border-bottom: 2px solid #A19B9E;
   border-top: 2px solid #A19B9E;
}

td.details {
   background-color: #d1cfd0;
   border: 2px solid #A19B9E;
}


.example_alt_pagination div.dataTables_info {
   width: 40%;
}

.paging_full_numbers a.paginate_button,
    .paging_full_numbers a.paginate_active {
   border: 1px solid #aaa;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   padding: 2px 5px;
   margin: 0 3px;
   cursor: pointer;
   *cursor: hand;
   color: #333 !important;
}

.paging_full_numbers a.paginate_button {
   background-color: #ddd;
}

.paging_full_numbers a.paginate_button:hover {
   background-color: #ccc;
   text-decoration: none !important;
}

.paging_full_numbers a.paginate_active {
   background-color: #99B3FF;
}

table.display tr.even.row_selected td {
   background-color: #B0BED9;
}

table.display tr.odd.row_selected td {
   background-color: #9FAFD1;
}



/*
 * Sorting classes for columns
 */
/* For the standard odd/even */

/*
tr.odd td.sorting_1 {
   background-color: #D3D6FF;
}

tr.odd td.sorting_2 {
   background-color: #DADCFF;
}

tr.odd td.sorting_3 {
   background-color: #E0E2FF;
}

tr.even td.sorting_1 {
   background-color: #EAEBFF;
}

tr.even td.sorting_2 {
   background-color: #F2F3FF;
}

tr.even td.sorting_3 {
   background-color: #F9F9FF;
}

*/

/* For the Conditional-CSS grading rows */
/*
    Colour calculations (based off the main row colours)
  Level 1:
      dd > c4
      ee > d5
   Level 2:
     dd > d1
     ee > e2
 */

/* 
tr.odd.gradeA td.sorting_1 {
   background-color: #c4ffc4;
}

tr.odd.gradeA td.sorting_2 {
   background-color: #d1ffd1;
}

tr.odd.gradeA td.sorting_3 {
   background-color: #d1ffd1;
}

tr.even.gradeA td.sorting_1 {
   background-color: #d5ffd5;
}

tr.even.gradeA td.sorting_2 {
   background-color: #e2ffe2;
}

tr.even.gradeA td.sorting_3 {
   background-color: #e2ffe2;
}

tr.odd.gradeC td.sorting_1 {
   background-color: #c4c4ff;
}

tr.odd.gradeC td.sorting_2 {
   background-color: #d1d1ff;
}

tr.odd.gradeC td.sorting_3 {
   background-color: #d1d1ff;
}

tr.even.gradeC td.sorting_1 {
   background-color: #d5d5ff;
}

tr.even.gradeC td.sorting_2 {
   background-color: #e2e2ff;
}

tr.even.gradeC td.sorting_3 {
   background-color: #e2e2ff;
}

tr.odd.gradeX td.sorting_1 {
   background-color: #ffc4c4;
}

tr.odd.gradeX td.sorting_2 {
   background-color: #ffd1d1;
}

tr.odd.gradeX td.sorting_3 {
   background-color: #ffd1d1;
}

tr.even.gradeX td.sorting_1 {
   background-color: #ffd5d5;
}

tr.even.gradeX td.sorting_2 {
   background-color: #ffe2e2;
}

tr.even.gradeX td.sorting_3 {
   background-color: #ffe2e2;
}

tr.odd.gradeU td.sorting_1 {
   background-color: #c4c4c4;
}

tr.odd.gradeU td.sorting_2 {
   background-color: #d1d1d1;
}

tr.odd.gradeU td.sorting_3 {
   background-color: #d1d1d1;
}

tr.even.gradeU td.sorting_1 {
   background-color: #d5d5d5;
}

tr.even.gradeU td.sorting_2 {
   background-color: #e2e2e2;
}

tr.even.gradeU td.sorting_3 {
   background-color: #e2e2e2;
}
*/

/*
 * Row highlighting example
 */
.ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
   background-color: #ECFFB3;
}

.ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
   background-color: #E6FF99;
}

/*
agregado para el highlight de las filas
*/
.ex_highlight_row #example tr.even:hover {
   background-color: #E6FF99;
}

/*
.ex_highlight_row #example tr.even:hover td.sorting_1 {
   background-color: #DDFF75;
}

.ex_highlight_row #example tr.even:hover td.sorting_2 {
   background-color: #E7FF9E;
}

.ex_highlight_row #example tr.even:hover td.sorting_3 {
   background-color: #E2FF89;
}
*/

.ex_highlight_row #example tr.odd:hover {
   background-color: #E6FF99;
}

/*
.ex_highlight_row #example tr.odd:hover td.sorting_1 {
   background-color: #D6FF5C;
}

.ex_highlight_row #example tr.odd:hover td.sorting_2 {
   background-color: #E0FF84;
}

.ex_highlight_row #example tr.odd:hover td.sorting_3 {
   background-color: #DBFF70;
}*/



Ejemplo DataTable con PHP y MySQL

Por MajinBoo

Claber

105 de clabLevel

1 tutorial

Genero:Masculino  

Constante aprendiz de programación web.

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.