javascript - 尝试自定义样式数据表

Question

我正在尝试修改默认生成的布局数据表。就像移动下面的过滤器搜索栏和下面的表格长度下拉菜单等等。基本上自定义整个表格的样式，但我不明白我该怎么做。我检查了数据表网站上的文档，但似乎无法理解。下面是我的代码:

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

使用sDom选项，例如:

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