only partial JUI theming

gloosemo

Hey I'm getting partial styling with my table but not completely. The header and footer have the proper background colour, but the rows (i believe) are not correct. They are a pale blue that is nowhere to be found in the "sunny" theme and is the same colour as before i enabled bjQueryUI. Also, although the header and footer background colour seems correct, the pagination buttons and font is the same as the demo. How can i get full JUI support? I was reading it may have something to do with ID but didnt understand the explanation. Here's the table init:

[code]
$(document).ready(function() {

var oTable = $('#foodtable').dataTable( {
"sDom": 'R<"H"lfr>t<"F"ip<',
"bProcessing": true,
"sAjaxSource": '../ajax/getglobal.php',
"aoColumns": [
{ "sTitle": "foodid", "bSortable": false, "bSearchable": false, "bVisible": false },
{ "sTitle": "food", "bSortable": true },
{ "sTitle": "ftype", "bSortable": true},
{ "sTitle": "sa", "bSortable": false },
{ "sTitle": "ss", "bSortable": false },
{ "sTitle": "cal", "bSearchable": false, },
{ "sTitle": "fat", "bSearchable": false, },
{ "sTitle": "sat", "bSearchable": false, },
{ "sTitle": "trans", "bSearchable": false, },
{ "sTitle": "chol", "bSearchable": false, },
{ "sTitle": "sod", "bSearchable": false, },
{ "sTitle": "carb", "bSearchable": false, },
{ "sTitle": "fib", "bSearchable": false, },
{ "sTitle": "sug", "bSearchable": false, },
{ "sTitle": "pro", "bSearchable": false, } ],
"bPaginate": true,
"sPaginationType": "full_numbers",
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"aaSorting": [],
"bjQueryUI": true
});

var oTableTools = new TableTools( oTable, {

"sRowSelect": "single",
"sSelectedClass": "row_selected",
"fnRowSelected": function ( node ) {
var aData = oTable.fnGetData ( node );
var id = aData[0];
insertPersFood ( id );
}

});
[/code]

Thanks in advance, G

fbas

edit your css file. change tr.odd, tr.even and .sorting_1, .sorting_2, .sorting_3

gloosemo

ok change all those colours to theme colours.

in demo_table_jui.css theres lots of styles the include "gradeX". were those just specific to the demo and I can delete them? or should i rename them i.e. is gradeX a column name or what does it mean.

Appreciate your help fbas
G

fbas

Yes, the "grade" items are just for the demo and you can delete.

gloosemo

ok i figured out gradeX, gradeA is the class of tr rows that have a column with a specific column. I guess the real question is how do i initialize the table so that rows have a class based on column value? This is something I will have to do.

fbas

probably best place to do that is in the row callback (fnRowCallback)

[code]
$(document).ready(function() {
$('#example').dataTable( {
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {

if ( aData[4] == "your criteria" ) // change column number and criteria as needed
{
$(nRow).addClass( 'odd even' ); // optionally remove odd/even classes
$(nRow).addClass( 'yourclass' );
}
return nRow;
}
} );
} );
[/code]

gloosemo

you rock fbas.

I have one final formatting question then i'll leave you alone.

The pagination buttons along the bottom are still looking like the demo table (grey) and there are no sort icons. I assume (hopefully correctly) they should be looking like buttons for my particual jQuery theme. I found out that my images were'nt loading correctly because i didnt put the images folder in the same directory as the css files, which i have now done. Same problem.

Remember that the table header and footer have the correct colour, so i don't think it has to do with directories.

Heres the how i load the page hopefully provides a clue:

the images folder containing theme and datatables images is in the parent directory of the css files
and again in the same directory as the css files just in case

[code]

<!--combobx styling-->
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
<!--sortable styling-->



















var storeEvent;
var storeClass;
var clickInterval;

$(document).ready(function() {

$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
});

var oTable = $('#foodtable').dataTable( {
"sDom": 'R<"H"lfr>t<"F"ip<',
"bProcessing": true,
"sAjaxSource": '../ajax/getpersbase.php',
"aoColumns": [ { "sTitle": "Foodid", "bSortable": false, "bSearchable": false, "bVisible": false },
{ "sTitle": "Food", "bSortable": true },
{ "sTitle": "Type", "bSortable": true},
{ "sTitle": "Serving Amount (SA)", "bSortable": false },
{ "sTitle": "Serving Size (SS)", "bSortable": false },
{ "sTitle": "Cal", "bSearchable": false, },
{ "sTitle": "Fat", "bSearchable": false, },
{ "sTitle": "Sat", "bSearchable": false, },
{ "sTitle": "Trans", "bSearchable": false, },
{ "sTitle": "Chol", "bSearchable": false, },
{ "sTitle": "Sod", "bSearchable": false, },
{ "sTitle": "Carb", "bSearchable": false, },
{ "sTitle": "Fib", "bSearchable": false, },
{ "sTitle": "Sug", "bSearchable": false, },
{ "sTitle": "Pro", "bSearchable": false, },
{ "sTitle": "Comb", "bSearchable": false, "bVisible": false } ],
"bPaginate": true,
"sPaginationType": "full_numbers",
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"aaSorting": [],
"bjQueryUI": true
});

var oTableTools = new TableTools( oTable, {

"sRowSelect": "single",
"sSelectedClass": "row_selected",
"fnRowSelected": function ( node ) {
var aData = oTable.fnGetData ( node );
var id = aData[0];
insertPersFood ( id );
}

});
});
[/code]

gloosemo

/*
* 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;
}

.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;
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;
min-height: 302px;
_height: 302px;
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;
}

/* Pagination nested */
.paginate_disabled_previous, .paginate_enabled_previous, .paginate_disabled_next, .paginate_enabled_next {
height: 19px;
width: 19px;
margin-left: 3px;
float: left;
}

.paginate_disabled_previous {
background-image: url('../images/back_disabled.jpg');
}

.paginate_enabled_previous {
background-image: url('../images/back_enabled.jpg');
}

.paginate_disabled_next {
background-image: url('../images/forward_disabled.jpg');
}

.paginate_enabled_next {
background-image: url('../images/forward_enabled.jpg');
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* 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;
}



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

.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 span.paginate_button,
.paging_full_numbers span.paginate_active {
border: 1px solid #aaa;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 2px 5px;
margin: 0 3px;
cursor: pointer;
*cursor: hand;
}

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

.paging_full_numbers span.paginate_button:hover {
background-color: #ccc;
}

.paging_full_numbers span.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;
}

gloosemo

thats demo_table_jui as it stands now

fbas

the JQueryUI theme also has images you need to install (they are referenced in your theme's css)

gloosemo

Yeah and those images are working fine.

For example, on the same page as the datatable i have a selectable that is properly displaying the JUI icons. I have those images in the same folder as the datatable images.

That leads me to believe the datatable css styling is either missing references to the correct icons or those references are wrong. But the header and footer of the table are displaying the jQueryUI theme background image properly, a gloss wave.

so its just the sort icons and pagination icons that are missing

fbas

make sure the names in the css match your icon set name

for instance, my table uses ui-icons_e0fdff_256x240.png for my color scheme for .ui_state-default. double check your css file for the right name of your png

in my jquery ui css:
[code]
/* states and images */
.ui-icon { width: 16px; height: 16px; background-image: url(../images/ui-icons_0078ae_256x240.png); }
.ui-widget-content .ui-icon {background-image: url(../images/ui-icons_0078ae_256x240.png); }
.ui-widget-header .ui-icon {background-image: url(../images/ui-icons_d8e7f3_256x240.png); }
.ui-state-default .ui-icon { background-image: url(../images/ui-icons_e0fdff_256x240.png); }
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {background-image: url(../images/ui-icons_056b93_256x240.png); }
.ui-state-active .ui-icon {background-image: url(../images/ui-icons_f5e175_256x240.png); }
.ui-state-highlight .ui-icon {background-image: url(../images/ui-icons_f7a50d_256x240.png); }
.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {background-image: url(../images/ui-icons_fcd113_256x240.png); }
[/code]

gloosemo

well i don't know what the problem was but i just reinstalled all the css files and images and now it is working properly

Thanks for all your help, G