What is the best way to show a circular symbol alongside column headers in a jQuery data table?

In my jQuery data-table, I want to display a small colored circle next to each column header name. Specifically, I am aiming to add a small blue circle only on the header.

Below are the header columns that I have defined:

  var popupDataColumns = [
            {
                "data": "Occurrence",
                "title": "Occurrence"
            },
            { data: "Release", title: "Release" },
            { data: "SWID", title: "SWID" },
            { data: "Event", title: "Event" },
            { data: "Level", title: "Level" },
            { data: "ReleaseSWID", title: "ReleaseSWID" },
        ];

If you have any suggestions on how I can achieve this, please let me know!

jquerycssdatatables

Answer №1

Implemented svg circles in the code

<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.20/js/dataTables.jqueryui.min.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.jqueryui.min.css" />

    <script>
        $(document).ready(function () {
            $('#example').DataTable({


            });
        });
    </script>
</head>

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name<svg height="10" width="10" style="margin-left: 5px;">
                    <circle cx="5" cy="5" r="5" stroke="black" stroke-width="1" fill="blue" />
                </svg></th>
            <th>Position
                <svg height="10" width="10" style="margin-left: 5px;">
                    <circle cx="5" cy="5" r="5" stroke="black" stroke-width="1" fill="blue" />
                </svg>
            </th>
            <th>Office
                <svg height="10" width="10" style="margin-left: 5px;">
                    <circle cx="5" cy="5" r="5" stroke="black" stroke-width="1" fill="blue" />
                </svg>
            </th>
            <th>Age
                <svg height="10" width="10" style="margin-left: 5px;">
                    <circle cx="5" cy="5" r="5" stroke="black" stroke-width="1" fill="blue" />
                </svg>
            </th>
            <th>Start date
                <svg height="10" width="10" style="margin-left: 5px;">
                    <circle cx="5" cy="5" r="5" stroke="black" stroke-width="1" fill="blue" />
                </svg>
            </th>
            <th>Salary
                <svg height="10" width="10" style="margin-left: 5px;">
                    <circle cx="5" cy="5" r="5" stroke="black" stroke-width="1" fill="blue" />
                </svg>
            </th>
        </tr>
    </thead>
    
    <!-- Body content omitted for brevity -->

</table>

</html>

Answer №2

If you want to easily incorporate different graphics into your headers in the future, consider using FontAwesome. By defining a simple class like this:

.circle::after {
  font-family: FontAwesome;
  content: "\f111";
  margin-left: 5px;
  font-size: 10px;
}

Keep in mind that if you are utilizing Font Awesome 5, the font name should be "Font Awesome 5 Free" (among other potential font names, look up the specifics). You can then customize the colors of the circles by applying CSS classes like so:

.circle.red::after {
  color: red;
}
.circle.blue::after {
  color: blue;
}
.circle.green::after {
  color: green;
}

To effortlessly add circles to any header when needed, utilize the API:

table.columns(1).header().to$().addClass('circle red')
table.columns(2).header().to$().addClass('circle blue')
table.columns(3).header().to$().addClass('circle green')

Your result should resemble this:

https://i.sstatic.net/SrkNl.png

For a demonstration, check out this link -> https://jsfiddle.net/aho825q3/

Answer №3

You have the option to utilize Font Awesome in order to showcase a circle following the title.

$(document).ready(function() {

  var dataSet = [
    ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
    ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"], 
   
   
    ["Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675"]
  ];
  
  var columnDefs = [{
    title: "ExamCount <i class='fa fa-circle-thin' aria-hidden='true'></i>"
  }, {
    title: "L1 <i class='fa fa-circle-thin' aria-hidden='true'></i>"
  }, {
    title: "L2 <i class='fa fa-circle-thin' aria-hidden='true'></i>"
  }, {
    title: "L3 <i class='fa fa-circle-thin' aria-hidden='true'></i>"
  }, {
    title: "L4 <i class='fa fa-circle-thin' aria-hidden='true'></i>"
  }, {
    title: "StandardFun.. <i class='fa fa-circle-thin' aria-hidden='true'></i>"
  }];

  var myTable;

  myTable = $('#example').DataTable({
    "sPaginationType": "full_numbers",
    data: dataSet,
    columns: columnDefs,
    dom: 'Bfrtip', // Needs button container
    select: 'single',
    responsive: true,
    altEditor: true, // Enable altEditor
    buttons: []
  });


});
<!DOCTYPE html>
<html>

<head>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
</head>

<body>

  <div class="container">
    <table cellpadding="0" cellspacing="0" border="0" class="dataTable table table-striped" id="example" style="width:100%">

    </table>
  </div>

</body>

</html>

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

Retrieve the content of the nearest 'td' element using the '.closest()' method, then locate the desired

I am struggling to assign the value from a <td> to a variable. My approach involves utilizing the closest() and find() methods in jQuery to locate the desired <td>. Interestingly, when I use alert on the <td>, it displays the correct val ...

javascriptjqueryhtml

Modifying the appearance and behavior of an element dynamically as the page is being loaded using AngularJS

Struggling with a challenge for two days now, I have attempted to implement a panel-box using bootstrap and AngularJS. Within the confines of a controller, my code looks like this: <div id="menu2a"> <div class="panel list-group"> <div ...

javascriptjqueryhtmlcssangularjs

What is the method for adding a dark, semi-transparent overlay across the entire webpage?

Is it possible to overlay the entire webpage with a 50% opaque black div? I attempted to achieve this by creating a fixed position div at the top of the script with 100% width and height and a z-index of 1. However, this method prevents me from placing an ...

htmlcss

Using jQuery to load an HTML fragment in Ruby on Rails

I'm struggling with loading my HTML file as a fragment into a div using jQuery's .load method. Despite extensive testing, I can't seem to figure out why it's unable to locate the c.html file, even after trying multiple versions of the l ...

jqueryruby-on-railsajax

Insert an svg element into the content property

Is it possible to insert an SVG link within the content property? .selectedItem::before{ content: " any svg link "; ...

csscss-content

The value attribute is not compatible with the jQuery Validation plugin

Even though my code is functioning properly, the validation does not work for first name, last name, and address if I include a value in the input field. However, when I remove the value attribute from those fields, it works fine. Below is the code. Can yo ...

jqueryjquery-validate

Button that triggers HTML Audio play when clicked

Is it possible to have audio play when Button 1 is clicked, but then pause or stop if Buttons 2 or 3 are clicked instead? <a href="#" class="button1">Button 1</a> <a href="#" class="button2">Button 2</a> <a href="# ...

javascriptjqueryhtmlaudio

The JSON file failed to load

Having some trouble running the JSON file with jQuery AJAX, always getting an error message. I am trying to run the code locally without any ASP.NET or PHP, aiming to run JSON without a server. I have set the URL through IIS on my local machine. JSON: / ...

jqueryajaxjson

Having difficulty retrieving JSON data using Jquery

After receiving a JSON string as a response from the server, I encountered an issue when trying to access the objects within the response, only to receive an "undefined" message. Here is the AJAX request being made: $.ajax({ url: 'somefi ...

jqueryjson

Issue with Firefox: JQuery-UI checkboxes failing to be selected when using Shift or CTRL keys

UPDATE: After reviewing mark.hch's response, I discovered that this issue only occurs on Firefox. To clarify my previous explanation: I am not seeking assistance with the event handler - it was just provided as context. My specific requirement is for ...

javascriptjqueryhtmljquery-uifirefox

Scrolling horizontally without needing to press the Shift key

I've had no luck finding results in any of my searches so far. Is there a way to implement 'horizontal scrolling' without requiring the user to hold down the shift key while scrolling? ...

javascripthtmlcssecmascript-6

In order to properly adjust the HTML content when resizing the window, it

I'm facing an issue with a toggle setup for displaying content differently based on screen width. Specifically, when the screen size decreases below 600px, it switches to the correct content. However, upon increasing the screen width again, it fails t ...

htmljquery

Is there a way to view the text as I enter it while drawing text on an image canvas?

I currently have a canvas setup that allows users to upload an image and display it on the canvas. Users can then input text to be drawn on the image by clicking the submit button. However, I would like the entered text to appear on the image as it is bein ...

javascriptjqueryhtmlcanvasdrawtext

Tips for running a function in CodeBehind triggered by jQuery?

In my Aspx code, I have the following: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="WebSite.View.Index" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> ...

javascriptc#jqueryasp.netwebforms

Does Ajax block the setting of jQuery select values in Django admin?

I'm facing a puzzling issue with the behavior of a select box on my webpage. In the Django admin, I have two consecutive select elements, one for the form (#id_form) and the other for the section (#id_section). If no selection is made for the form, th ...

jqueryajaxdjango

Adjusting the styling of a webpage in real-time

Here is the CSS code I am working with: .myTabs .JustForFun .ajax__tab_inner:hover { width: 109px; background: url ("/images/csc_tr.png") no-repeat 100% 0%; margin-right: 2px; background-color: #BBC614; } I want to change the background-c ...

c#javascriptjqueryasp.net

Verify if the entire block contains any children with text inside

When working with Selenium WebDriver, I encountered an issue trying to locate a block that contains children elements with specific inner text. <div class="chat_dialog"> <div class="chat_message"> <span class="chat_timestamp" style="disp ...

pythoncssseleniumxpathparent-child

The tag <li> is not allowing enough room for the content to expand as needed

I am trying to create a list using ul li elements. When the content inside the li exceeds the width, a scrollbar appears. However, I am encountering an issue where the li tag does not cover the entire width and spills outside. .container{ b ...

htmlcss

Adjusting the Scaling Value to Match the Browser's Scaling Value

I'm struggling with a problem in HTML where the initial-scale function is not working as expected. When I zoom in on certain pages, it saves the zoom level. However, when I navigate to another page and then return to the original one, the zoom level r ...

javascripthtmljquerycss

Is there a javascript function that performs the reverse action of indexof()?

Is there a JavaScript function that is the opposite of indexOf()? In my code, when you press the button it will display 3 [from indexOf(".")]. However, I am looking for a function that is the opposite of indexOf(), which would show me 2 [decimal]. http: ...

javascriptjquery