DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

only partial JUI theming

only partial JUI theming

gloosemogloosemo Posts: 27Questions: 1Answers: 0
edited September 2011 in Bug reports
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

Replies

  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    edit your css file. change tr.odd, tr.even and .sorting_1, .sorting_2, .sorting_3
  • gloosemogloosemo Posts: 27Questions: 1Answers: 0
    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
  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    Yes, the "grade" items are just for the demo and you can delete.
  • gloosemogloosemo Posts: 27Questions: 1Answers: 0
    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.
  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    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]
  • gloosemogloosemo Posts: 27Questions: 1Answers: 0
    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]
  • gloosemogloosemo Posts: 27Questions: 1Answers: 0
    /*
    * 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;
    }
  • gloosemogloosemo Posts: 27Questions: 1Answers: 0
    thats demo_table_jui as it stands now
  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    the JQueryUI theme also has images you need to install (they are referenced in your theme's css)
  • gloosemogloosemo Posts: 27Questions: 1Answers: 0
    edited September 2011
    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
  • fbasfbas Posts: 1,094Questions: 4Answers: 0
    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]
  • gloosemogloosemo Posts: 27Questions: 1Answers: 0
    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
This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.