Laravel 12x - Using Datatables Sunny Theme after importing modules(jquery, jquery-ui, datatables

Scorpio

I have a site where I use PHP/html and have incorporated Tables using JQuery, JQuery-ui and datatables cdn. Everything works great. The theme, sunny, shows as expected. I am using the cdn for all of the above, reflected in the code below.

<!-- JQuery --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <!-- JQuery ui --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
    <!-- for datatables --><!-- JQuery ui -->
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/sunny/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/ju/dt-1.10.25/datatables.min.css">
    <script  src="https://cdn.datatables.net/v/ju/dt-1.10.25/datatables.min.js"></script>

Now I have started to learn Laravel. I am running on version 12.8.1.

I have created a basic Laravel project without any packages using the above cdn's, and everything worked as expected. I then created a new project and installed breeze and bootstrap again using the cdn's above and again I got the results expected.

I then created a new project, installed Breeze, then imported the modules for bootstrap, jquery, jquery-ui and datatables (datatables.net-dt and datatables.net-jqui. then in app.css I have

@import 'bootstrap/dist/css/bootstrap.min.css';
@import 'jquery-ui/dist/themes/sunny/jquery-ui.css';
@import 'jquery-ui/dist/themes/sunny/theme.css';
@import 'datatables.net-dt/css/dataTables.dataTables.css';
@import 'datatables.net-jqui/css/dataTables.jqueryui.min.css';

/* Custom styling */
        
/* Apply custom styling to odd rows */
tr:nth-child(odd) td {
    background-color: #fff3cd !important;
}

/* Apply custom styling to even rows */
tr:nth-child(even) td {
    background-color: #daf0ff !important;
}

Then in app.js I have

// 1. Import jQuery and expose globally
import $ from 'jquery';
window.$ = window.jQuery = $;
console.log('✅ jQuery loaded:', typeof $ !== 'undefined');

// 2. Import Bootstrap (must be after jQuery)
import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;
console.log('✅ Bootstrap loaded:', typeof bootstrap !== 'undefined');

// 3. Import jQuery UI widgets (optional for now)
import('jquery-ui/ui/widgets/datepicker')
  .then(() => {
    console.log('✅ jQuery UI Datepicker loaded');
  })
  .catch(err => {
    console.error('❌ Error loading jQuery UI Datepicker:', err);
  });

// 4. Import DataTables jQuery UI CSS and factory
import 'datatables.net-jqui/css/dataTables.jqueryui.min.css';
import DataTable from 'datatables.net-jqui';

// 5. AlpineJS
import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();

// 6. DataTables initialization wrapped in window load event
window.addEventListener('load', () => {
    const $table = $('#example');
    if ($table.length) {
        try {
            // Correct initialization
            $('#example').DataTable(); // Initialize the DataTable on the element with ID 'example'
            console.log('✅ DataTable initialized');
        } catch (err) {
            console.error('❌ Error initializing DataTables:', err);
        }
    } else {
        console.warn('⚠️ Table with ID #example not found in DOM');
    }
});

The script I have is

<script>
            window.addEventListener('load', function () {
                if (window.$) {
                    const table = $('#example').DataTable({
                        jQueryUI: true,
                        paging: true,
                        lengthMenu: [5, 10, 25, 50, 100],
                        pageLength: 5,
                        pagingType: "simple",
                        "rowCallback": function(row, data, index) {
                            if (index % 2 === 0) {
                                $(row).removeClass('odd').addClass('even'); // Add "even" class to even rows
                            } else {
                                $(row).removeClass('even').addClass('odd'); // Add "odd" class to odd rows
                            }
                        }
                    });
                    console.log('DataTable initialized');
                } else {
                    console.error('jQuery is not available');
                }
            });
        </script>

and the table has a total of 26 rows and is

<div class="container-fluid mb-5">
            
    <div class="container-fluid mb-5">
        <table id="example" class="display table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Subject</th>
                    <th>Title</th>
                    <th>Published</th>
                    <th># in Series</th>
                    <th>URL</th>
                    <th>Author</th>
                </tr>
            </thead>
                <tbody>
                    <tr class="odd">
                      <td>C#</td>
                      <td>C# (C Sharp)</td>
                      <td>2019</td>
                      <td>19</td>
                      <td><a href='https://youtube.com/playlist?list=PL0eyrZgxdwhxD9HhtpuZV22KxEJAZ55X-' target='_blank'>Link</a></td>
                      <td>Dani Krossing</td>
                    </tr>
                    <tr class="even">
                      <td>CMS (Content Management System)</td>
                      <td>Developing a Dynamic CMS</td>
                      <td>2014</td>
                      <td>112</td>
                      <td><a href='https://youtube.com/playlist?list=PLAkMqlQoeMeiwvNWpe3mhgQxAa1jiGwmt' target='_blank'>Link</a></td>
                      <td>The Digital Craft</td>
                    </tr>                       
                </tbody>
                <tfoot>
                    <tr>
                      <td colspan="6">Collection of tutorial links.</td>
                    </tr>
                 </tfoot>
        </table>
    </div>

Now in all the versions/tests I have done using the CDN everything works as expected; however with the imports I had to do a small amount of tweaking to get the basic table right, and even then, the area where the search and pagination is positioned does not use the theme for some reason.

How the table should look
https://www.dropbox.com/scl/fi/vd3cmc8bvbffg1xslfhhw/fullyWorkingGUI.png?rlkey=15e9laeeemuaw16fbm9q9qqof&st=kh3cdz35&dl=0

How the table looks using imports
https://www.dropbox.com/scl/fi/8g50f7silw3mge1e9a0em/NotFullyWorkingGUI.png?rlkey=z7i414pnnab0mazz6w3fxv7w7&st=bf5yc5rs&dl=0

Link to zipped Laravel project. The view set as / is datatable.blade.php using Vite.
https://www.dropbox.com/scl/fi/fgtq1d3jhvpotvri3u9hj/jqDataTablesBreezeImportModules.zip?rlkey=e5uqsi605gthn3kq7eol2h73a&st=sx2kcxls&dl=0

You can see with the differance between the two screenshots the 1st one being the fully working theme and the second being the table where for some reason the top and bottom of the table are not showing as they should.

Surely this is a case of, I have missed something? As I cannot find anything saying that imports work/look differently/different?

Has anyone come across this issue and solved it?

If so, how?

Thanks in advance for any assistance with this. It is something I have been trying to resolve for several days and am not getting anywhere.

allan

@import 'datatables.net-dt/css/dataTables.dataTables.css';
@import 'datatables.net-jqui/css/dataTables.jqueryui.min.css';

Don't do that. Just use one style. The jQuery UI one in this case.

I'm not set up for running Laravel at the moment - are you able to link to a page with the result from your projects so I can take a look at the output and debug what is going on?

Allan