dataTables is displaying "Loading" only, not displaying any data

NaveX

Hi All,
I have an issue with my jquery/dataTables code I am writing. The issue is the code runs and displays "Loading".
If someone could look over my code to see where I have gone wrong.

HTML

<table id="multisignageTable" class="display" width="100%" border="0" cellpadding="0" cellspacing="0" data-role="datatable"   data-info="false" table-layout:fixed>
         <thead>
                <tr>
                   <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                     <th></th>
                </tr>
        </thead>
       <tbody>
                    <!-- DataTable will populate this -->
      </tbody>
 </table>

Jquery code.

 function initializeDataTable() {
        var multisignage = $('#multisignageTable').DataTable({
                createdRow: function(row, data, dataIndex){
                    $('td:eq(0)', row).css('padding-left', '2px');
                },
                autoWidth: false,
                paging: false,
                searching: false,
                scrollY: "550px",
                scrollCollapse: true,
                scrollX: false,
                ajax: {
                    url: 'get_multi_boards_list.php',
                    dataSrc: '',
                    error: function(xhr, error, code) {
                        console.log("AJAX Error: ", error);
                        console.log("Status: ", code);
                        console.log("Response: ", xhr.responseText);
                    },
                    success: function(data) {
                        console.log("Data received: ", data);
                    }
                },
                language: {
                    "emptyTable": "There is no signage promotions scheduled after <?php echo $date; ?>"
                },
                columnDefs: [
                    { width: '7%', targets: 0 },   // RecordID
                    { width: '20%', targets: 1 },  // BoardName
                    { width: '5%', targets: 2 },   // Order
                    { width: '10%', targets: 3 },   // Image
           { width: '10%', targets: 4 }   // Image
                ],
                
                columns: [
                    { data: "RecordID", title: "RecordID"},
                    { data: "DisplayID", title: "DisplayID"},
                    { data: "DisplayType", title: "DisplayType"},
                    { data: "DisplayDescription", title: "DisplayDescription"},
           { data: "DisplayWidth", title: "Width"}
                ],
                
                rowCallback: function(row, data, index){
                    $('td', row).attr('nowrap','nowrap');
                    $(row).find('td:eq(5)').css('color', '#009900');
                    $(row).find('td:eq(6)').css('color', '#CC0000');
                }
            });
        }

        // Show tab-multi and initialize DataTable on button click
        $('#headingMulti').click(function() {
            $('#tab-multi').show();
            $('.tab-pane').removeClass('active in'); // Remove active class from other tabs
            $('#tab-multi').addClass('active in'); // Add active class to tab-multi

            // Check if DataTable is already initialized
            if (!$.fn.DataTable.isDataTable('#multisignageTable')) {
                initializeDataTable();
            }
        });

Data returned.

{RecordID: '90', DisplayID: '5', DisplayType: 'L', DisplayDescription: 'Elevator 18 L', DisplayWidth: '1024'}
{RecordID: '71', DisplayID: '3', DisplayType: 'L', DisplayDescription: 'Elevator 3 L', DisplayWidth: '1024'}
{RecordID: '95', DisplayID: '6', DisplayType: 'L', DisplayDescription: 'Elevator 19 L', DisplayWidth: '1024'}
{RecordID: '27', DisplayID: '2', DisplayType: 'P', DisplayDescription: 'Main reception No 2 P', DisplayWidth: '1080'}
{RecordID: '89', DisplayID: '4', DisplayType: 'L', DisplayDescription: 'Reception No 2 L', DisplayWidth: '1920'}
{RecordID: '116', DisplayID: '8', DisplayType: 'P', DisplayDescription: 'Display 2 P', DisplayWidth: '1080'}
{RecordID: '26', DisplayID: '1', DisplayType: 'L', DisplayDescription: 'Main reception No1 L', DisplayWidth: '1920'}
{RecordID: '115', DisplayID: '7', DisplayType: 'L', DisplayDescription: 'Display 1 L', DisplayWidth: '1024'}

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

The JSON data doesn't look like properly formatted JSON. It should be an array of row elements, something like this:

[
    {RecordID: '90', DisplayID: '5', DisplayType: 'L', DisplayDescription: 'Elevator 18 L', DisplayWidth: '1024'},
    {RecordID: '71', DisplayID: '3', DisplayType: 'L', DisplayDescription: 'Elevator 3 L', DisplayWidth: '1024'},
    {RecordID: '95', DisplayID: '6', DisplayType: 'L', DisplayDescription: 'Elevator 19 L', DisplayWidth: '1024'},
    {RecordID: '27', DisplayID: '2', DisplayType: 'P', DisplayDescription: 'Main reception No 2 P', DisplayWidth: '1080'},
    {RecordID: '89', DisplayID: '4', DisplayType: 'L', DisplayDescription: 'Reception No 2 L', DisplayWidth: '1920'},
    {RecordID: '116', DisplayID: '8', DisplayType: 'P', DisplayDescription: 'Display 2 P', DisplayWidth: '1080'},
    {RecordID: '26', DisplayID: '1', DisplayType: 'L', DisplayDescription: 'Main reception No1 L', DisplayWidth: '1920'},
    {RecordID: '115', DisplayID: '7', DisplayType: 'L', DisplayDescription: 'Display 1 L', DisplayWidth: '1024'}
]

Also note the comma at the end of each line separating each array element.

Maybe its a copy/paste error?

Look at the browser's console for errors.

kevin