trying to custom style datatables table

Question

i am trying to modify the layout datatables generate by default. like move the filter search bar below and table length dropdown menu below and etc.. basically custom style the whole table but i cant understand how i can. i checked the documentation on the datatables website but cant seem to understand. below is my code:

html:

<table class="table table-bordered table-striped table-condensed" id="ray-table">
    <thead>
        <tr>
            <th>Rendering engine</th>

            <th>Browser</th>

            <th>Platform(s)</th>

            <th>Engine version</th>

            <th>CSS grade</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Trident</td>

            <td>Internet Explorer 4.0</td>

            <td>Win 95+</td>

            <td>4</td>

            <td>X</td>
        </tr>

        <tr>
            <td>Trident</td>

            <td>Internet Explorer 5.0</td>

            <td>Win 95+</td>

            <td>5</td>

            <td>C</td>
        </tr>

        <tr>
            <td>Trident</td>

            <td>Internet Explorer 5.5</td>

            <td>Win 95+</td>

            <td>5.5</td>

            <td>A</td>
        </tr>
    </tbody>
</table>

JS:

$(document).ready(function() { /* Build the DataTable with third column using our custom sort functions */
    $('#ray-table').dataTable({
        "aaSorting": [[0, 'asc'], [1, 'asc']],
        "aoColumnDefs": [
            {
            "sType": 'string-case',
            "aTargets": [2]}
        ]
    });
});​

Answer 1

Use the sDom options, something like:

 $('#ray-table').dataTable( {
                "aaSorting": [ [0,'asc'], [1,'asc'] ],
                "sDom": "<tlfrip>",
                "aoColumnDefs": [
                    { "sType": 'string-case', "aTargets": [ 2 ] }
                ]
            } );