[SOLVED] Enable datatable themes in themeroller

Enable datatable themes in themeroller

According to DataTables.net all I need to do to enable themes is enable the option in ThemeRoller:

DataTables has full support for ThemeRoller created themes, all you need to do is enable the flag in the initialisation object, and the required mark-up and classes will be added by DataTables.

I went to ThemeRoller > Gallery > picked the "Start" theme clicked Download. The first section "UI Core" is the only one that contains the partial word "initializ" and they are all checked by default. However, my DataTable does not show a theme.

    dtRequest = $('#xyzRequests').dataTable({
        "iDisplayLength": 100,
        "aLengthMenu": [[20, 100, 500, 1000, 5000, -1], [20, 100, 500, 1000, 5000, "All"]]
    });

<table id="xyzRequests">//...

For testing, I slapped an accordion control in there and that one themes up just fine.

Solution

In order to use Theme Roller, you need to enable JQueryUI for data tables

$("#myTable_id").dataTable({
             bJQueryUI: true,
             sPaginationType: "full_numbers"
});

and make sure you have everything linked correctly on the page:

<html>
<head>
<title>Yoursite.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link type="text/css" href="css/jquery-ui-1.8.13.custom.css" rel="stylesheet" /> 

<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
</head>

See http://datatables.net/forums/discussion/5851/using-themeroller-/p1