Home/ Questions/Q 8188861
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T03:03:54+00:00

I am having an issue with DataTables with the styling of the header and

  • 0

I am having an issue with DataTables with the styling of the header and the footer.

Problems:

  • The header has the search box on a new line instead of on the same line float-right.
  • The pagination buttons/icons for the th’s show up on new lines as well.
  • The footer buttons show up smushed.

enter image description here

I have tried excluding all other css files except smoothness (Which gives it the grey look). Is there some setting I am missing out on? I looked all over the site for examples but they don’t make any mention of this issue.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
    <script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.dataTables.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.dataTables.nightly.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        oTable = $('#num2').dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers"
        });
    } );

    </script>

</head>
<body>
        <table id="num2">

            <thead>
            <tr>
                <th>
                num 1
                </th>
                <th>
                num 2
                </th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>john
                </td>
                <td>
                joe
                </td>
            </tr>
            </tbody>

        </table>
</body>
</html>

This is how the header and footer should look:
enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    By the look of it, you are missing the ‘structual’ CSS file for the datatable.
    I haven’t used Datatables myself, but I have had a lot of experience with jQuery and the jQuery UI and the CSS files are very cleanly separated between ‘structure’ and ‘theme’. Now I notice that you have included the css/smoothness/jquery-ui-1.8.21.custom.css file, which (assuming you ticked all the boxes on the download site) contains all of the structual CSS for the standard widgets (accordion, dialog, tabs etc) and one theme (Smoothness). What I think you are missing is the DataTables strucutal CSS file, which is not a default widget from jQuery UI, so would need to be obtained from the DataTables site. Having a look at the themeroller example on their site, they also have a CSS file of /demo_table_jui.css” as well as the /smoothness/jquery-ui-1.8.4.custom.css”

    Rendering inside an iFrame shouldn’t matter

    • 0