Using DataTables with jQuery, the CSS background color setting does not function properly

I've attempted various solutions, however, it still doesn't seem to be working. I am attempting to present data from a database in a table using the jQuery DataTables plugin. Everything appears to be correct technically, but the background color of some rows isn't displaying. What could be causing this issue?

<html lang="pl">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css">

        <title>Football stats</title>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
        <script>
            $(document).ready(function(){
                $('#table1').DataTable();
            });
        </script>
    </head>
    <?php
    $connection = new mysqli('localhost','root','','matches');
    $sql = 'MY SELECT';
    $result = $connection->query($sql);

    echo '<body>
    <table id="table1">
    <thead>
    <tr>
    <th>ID</th>
    <th>Hour</th>
    <th>Country</th>
    <th>Team</th>
    <th>Ov 2,5</th>
    <th>Avg</th>
    <th>Ov 1,5ht</th>
    <th>LG HT</th>
    <th>LG FT</th>
    <th>LG</th>
    <th>EOver</th>
    <th>EAvg</th>
    <th>EOvHT</th>
    <th>EHt</th>
    <th>EFt</th>
    <th>ELate</th>
    <th>SUMAvg</th>
    <th>H2HOver</th>
    <th>H2HGAvg</th>
    <th>H2HOvHt</th>
    </tr>
    </thead>';

    echo '<tbody>';
    while (($record = $result -> fetch_assoc()) != null)
    {
        $explode = explode("/", $record['home']);
        echo '<tr>';
        echo '<td>'.$record['id_match'] . '</td>';
        echo '<td>'.$record['hour'] . '</td>';
        echo '<td>'.$explode[2] . '</td>';
        echo '<td>'.$explode[3] . '</td>';
        echo '<td>'.$record['over'] . '</td>';
        echo '<td>'.$record['goalsavg'] . '</td>';
        echo '<td>'.$record['overht'] . '</td>';
        echo '<td>'.$record['lategoalht'] . '</td>';
        echo '<td>'.$record['lategoalft'] . '</td>';
        echo '<td>'.$record['lategoal'] . '</td>';
        echo '<td>'.$record['EOver'] . '</td>';
        echo '<td>'.$record['EAvg'] . '</td>';
        echo '<td>'.$record['EOvHT'] . '</td>';
        echo '<td>'.$record['EHt'] . '</td>';
        echo '<td>'.$record['EFt'] . '</td>';
        echo '<td>'.$record['ELate'] . '</td>';
        echo '<td>'.$record['SUMAvg'] . '</td>';
        echo '<td>'.$record['H2HOver'] . '</td>';
        echo '<td>'.$record['H2HGAvg'] . '</td>';
        echo '<td>'.$record['H2HOvHt'] . '</td>';
        echo '</tr>';
    }
     echo '</tbody>';
     echo '</table>';
    ?>
  

Here's an example of how it should look: https://datatables.net/examples/basic_init/zero_configuration.html

The rows in my table are not being highlighted as expected..

Answer №1

<table id="table1" class="stripe" cellspacing="0" width="100%">

Check out this example here. To add on-hover styling, you may need to include some JavaScript. Learn more about different styling options here.

Answer №2

To enhance the appearance of your table, include the class="display" attribute. Here's an example:

<table id="table1" class="display" width="100%" cellspacing="0">

For additional details on styling classes, refer to the styling classes page.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to maintain the position of components (such as a Card component) when one is expanded in a Material-UI and ReactJS project

Currently, I am working with an expandable Card component from Material-UI and using flex for aligning the components. However, when one card expands, it affects the positioning of the other components in the row: https://i.stack.imgur.com/vGxBU.png What ...

Position the Figcaption over the Image

Running a website, I am facing an issue with adding copyright information to the top-left corner of an image. The img element is set to float:left; and the figcaption appears after it. However, there are some complications: 1) Using the position:absolute ...

Compact looped slideshow

Currently in the process of designing a website and looking to incorporate a unique photo gallery feature. The concept is as follows: The photo gallery will be displayed in a rectangular/box shape. There are a total of 10 photos, with only 7 initially vis ...

Internet Explorer 7 does not support the return link feature when using jQuery

My issue involves using jQuery and Ajax, where my Ajax.php file outputs a specific field into the main file. Everything works as expected when I click in Mozilla and Chrome, resulting in an alert pop-up. However, when attempting the same action in Internet ...

Incorporating multiple CSS style sheets within a single HTML document

As part of my assignment, I have successfully created two different CSS style sheets. The next step is to link both style sheets to a single HTML page and provide users with the option to switch between the two styles. I am wondering how to achieve this. ...

Creating a web form with HTML and integrating it with jQuery AJAX

Looking to fetch data from the server through jQuery AJAX on an HTML form and store the response in a PHP string variable. Here is my current code snippet: <form method="post" name="myform" id="myform" action="https://domain.com/cgi-bin/cgi.exe"> &l ...

Creating a border and transparent space within a CSS triangular design

I am looking to create a unique design element for my website using CSS. The pattern I want to achieve involves a triangular cutout separating two sections of the page: https://i.sstatic.net/08BL0.jpg After exploring the skewX() technique detailed in thi ...

CSS: Adjusting the vertical alignment of numbers in an ordered list

Hey there, I have a question about the vertical alignment of numbering in an ordered list. It seems that the numbers are being pushed to the baseline when <li> elements contain floated divs only. Is there any way to prevent this and have the numbers ...

Guide on populating a table with user input using jQuery and ajax

For the past few days, I've been attempting to populate a table using jQuery and ajax based on search results, but unfortunately, it's not working out for me. Below is the HTML code snippet: <form class="form"> <div class="form-gro ...

Stylish CSS animation enhancing an image

Can a flash effect like the one in this image be created using only CSS? I attempted to use -webkit-filter, but it did not produce satisfactory results. https://i.sstatic.net/Eg49c.jpg ...

Utilize .slidetoggle for creating a div that expands and collapses upon page loading once more

Hey everyone! I have a hidden div box that reveals its text when you click a button, sliding open to show its content. What I'm trying to achieve is for the box to expand and collapse on page load without auto-repeating, so users can see there's ...

Put the code inside a function. I'm new to this

My goal is to encapsulate this code: if($(window).width() > 980) { $(window).on("scroll", function() { if($(window).scrollTop() > 20) { //add black background $(".x-navbar").addClass("active"); $(".x-navbar .desktop ...

What is the best way to handle an AJAX POST request and a resource controller in Laravel version 5.6?

As a newcomer to web development, I am currently learning about JavaScript and AJAX. Through various iterations of the AJAX call, I have managed to grasp the basics of how it works. My current goal is to send the content of my form to the database. Here ...

The disadvantages of utilizing multiple Ajax requests

I am in the process of developing a mobile application for Android using PhoneGap and jQuery Mobile. One key feature of the app involves sending messages to a server-side script using Ajax requests. To ensure a smooth user experience, I have implemented a ...

Codepen is a great platform for writing and testing code, but it seems like the top tag

body { background-color: black; } .inner{ margin-left:400px; color:white; width:650px; height:450px; top:130px; position:fixed; padding-left:30px; padding-right:30px; text-align:center; background-color:grey; } .outer { height:50 ...

Converting RGB color values to HSL color values using a unique, randomized Javascript approach

On this site, I have added a random color overlay to the media-boxes. Check it out here Thanks to the helpful folks at stackoverflow, I was able to create this script: var getRandomInRange = function(min, max) { return Math.floor(Math.random() * (ma ...

The popup feature fails to function properly following an Ajax response

Hey there, I've been having trouble getting my jquery popup to work after loading it from ajax. The issue seems to be related to the popup.js code: $(document).ready(function() { $('a.poplight[href^=#]').click(function() { // c ...

The elements in the navigation bar stay in view for a short period of time even after the collapsible navbar has been

After collapsing the navbar, the navbar items remain visible for a short period of time, as shown in the second image below. Here is the HTML code: <nav class="navbar navbar-dark fixed-top" style="background-color: transparent;> <a class="navb ...

Emphasis and dimension of form

I need help with a field that is supposed to have a black outline, similar to the one shown below: However, here is what I currently have in my code: .r{ height: 40px; font-size: 30px; width: 100px; font-family: 'proxima_novalight ...

What is the best way to obtain the id of a selected row using JavaScript?

I'm attempting to utilize the JavaScript function below to extract a specific cell value from a jqgrid upon clicking. Within the following function, #datagrid refers to the table where the jqgrid is located. $("#datagrid").click(function ...