Removing sort icon from the first column of a DataTable using jQuery

Is there a way to completely disable the sorting property in the dataTable API? I tried using bsort:false to disable sorting in all columns, which works fine, but the first column still displays the sort icon. Why is that?

$("#reportgrid").DataTable({
    "order": [],
    "bSort" : false,
    "iDisplayLength": 10,
    "sDom": '<"top">rt<"bottom"lp><"clear">',
});

The above code is what I am using for the dataTable.

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

Here is a snapshot of my grid. Despite disabling sorting, the first column still has the CSS class of sorting_asc. So, how can I remove the sort icon from the first column?

jquerycsssortingdatatableremoveclass

Answer №1

Although the original post is dated, I recently encountered the same issue and found a solution that worked well for me. By implementing the code below, I was able to successfully remove the sorting icon from the initial column of the table.

$('#data-table').DataTable({
     'columnDefs': [{ 'orderable': false, 'targets': 0 }], // hide sort icon on header of first column
     'order': [[1, 'asc']] // begin sorting data in the second column 
});

Answer №2

After some research, I have discovered the solution. Set "bStorable" to false for each column in order to remove the icon.

$("#reportgrid").dataTable({"order": [],
    "aoColumns": [
    { "bSortable": false },
    { "bSortable": false },
    { "bSortable": false },
    { "bSortable": false },
    { "bSortable": false },
    { "bSortable": false }
],
"sDom": '<"top">rt<"bottom"lp><"clear">'});

Answer №3

In my scenario, I found a simple solution that didn't require any CSS. By specifying the order initialization property option in DataTables, I was able to start the ordering by the second column instead of the first. You can check the datatable reference for more information on this (Initial order (sort) to apply to the table):

"order": [[1, 'asc']]

By doing this, it also removed the sort icon from the first column when sorting is disabled for that column.

Answer №4

Check out this code snippet for the most up-to-date version:

$('#reportgrid').dataTable( {
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );

Answer №5

The datatables guide states that you have the ability to toggle column sorting using the ordering option

$("#reportgrid").DataTable({
    "ordering": false,
    "iDisplayLength": 10,
    "sDom": '<"top">rt<"bottom"lp><"clear">',
})

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

Issues with JQuery .attr method not functioning as expected

I'm having trouble with the .attr() function in jQuery. It doesn't seem to be changing the background-color of the div with the id "outline" like I expected. Here's an example of my code: <div id="outline"></div> And here is t ...

javascriptjqueryhtmlcssattr

Despite using twitter bootstrap, the elements on my webpage are still overlapping one another

While implementing Twitter Bootstrap on my website, I encountered a problem where elements start overlapping if the window size is reduced. This issue does not look appealing, and I expected Twitter Bootstrap to ensure that my website is fully responsive a ...

htmlcsstwitter-bootstrap

The dropdown menus in Bootstrap are expanding outside the screen when opened

When I click on the dropdown in the Navbar on the right side, the menus open up far to the right and are not visible until I scroll horizontally. Here is the code snippet: <nav class="navbar navbar-expand-lg navbar-light bg-light"> < ...

htmlcssangulartwitter-bootstrap

Flaw in Basic Function Logic Using HTML, JavaScript, and CSS

Need some help with the function onBall3Click1 (code is at the bottom). The ball should act like a lightbulb: ON - turn YELLOW, OFF - turn GRAY. I've been trying to figure out the logic behind it for so long and can't seem to find the issue... ...

javascripthtmlcss

How can I make two flexbox items in a row stack on top of each other as a column?

I'm currently working on a layout that involves a parent flexbox containing multiple sections. My challenge lies in getting two specific sections to stack vertically while the rest of the layout remains horizontal. At the moment, I have two sections ...

csslayoutflexboxalignment

Best practices for evenly distributing images within a navigation bar?

Within a horizontal navbar, I have various small images that are currently spaced out with different intervals between them. Each image has its own unique spacing from the others. I am looking to achieve consistent spacing between each image in this horiz ...

htmlcsstwitter-bootstrapflexboxbootstrap-5

Converting PHP arrays into JavaScript arrays with the help of json_encode()

Is there a way to pass an array from PHP to the JavaScript function console.log()? I'm currently simulating a database and need help with this specific task. Despite not having an array declared in my code, I attempted to use the .getJSON() function w ...

javascriptphpjqueryarraysajax

Troubleshooting problem with retrieving Ajax data in Datatables

Hello, I'm currently working on implementing the datatables example and have run into a roadblock while trying to access sample data. You can view the fiddle where I'm having trouble here For reference, here is a working example of datatables f ...

jqueryajaxdatatables

Waiting for jQuery events to finish before proceeding

Is there a way to ensure that the function test() is executed only after the completion of the slideToggle function? $('.anyclass').slideToggle(1000); It seems that when I write the code like this: $('.anyclass').slideToggle(1000); t ...

jquery

Playground Themed Central Menu Features

Check out the theme live preview here: I've been experimenting with different combinations of text-align: center; and margin: 0 auto; but I'm struggling to align the menu elements to the center of the page. Any assistance would be highly apprec ...

htmlcsswordpress

The jQuery prop("disabled") function is not operating as expected

Although I've seen this question answered multiple times, none of the suggested solutions seem to be working for my specific example. Hopefully, a fresh set of eyes can help me figure out what's going wrong. Even after adding alerts to confirm t ...

javascriptjqueryhtmljquery-mobile

Customize the text color across all sections of the application in ExtJS 6

I am looking to update the text color across my entire application. Currently, it's gray and I would like to change it to black. The platform I am working with is classic. I came across this code snippet in CSS: .x-body { margin: 0; -webkit-f ...

cssextjssassextjs6extjs6-classic

Save a CSV file into a list, locate a specific key within the list, and retrieve the fourth value associated with that key

After thorough revision, the question now reads as follows: Take a look at this content in database.csv: barcode,ScQty, Name , Qty ,Code 123456 , 3 ,Rothmans Blue , 40 ,RB44 234567 , 2 ,Rothmans Red , 40 ,RB30 345678 , 2 ,Rothmans Gre ...

javascriptphpjquery

Break down the organization of CSS

While exploring a website, I came across this CSS code that sets the font family to "Open Sans," Helvetica, Arial, and sans-serif. However, I am having trouble understanding this structure. Any assistance would be greatly appreciated. Thank you in advanc ...

htmlcss

How to customize TextField error color in Material-UI using conditional logic in React

Currently, I am incorporating the React Material-UI library into my project and faced with a challenge of conditionally changing the error color of a TextField. My goal is to alter the color of the helper text, border, text, and required marker to yellow ...

javascripthtmlcssreactjsmaterial-ui

Clicking the popup form causes it to blur out

Having trouble with a blurry pop-up form when clicking the button? Check out the code I've used below: <button class="btn btn-default" data-toggle="modal" data-target="#myModal">ENQUIRE NOW</button> ...

htmljquerycsspopup

Establish a background image that can be scrolled

Currently, I am working on a project and have created a fiddle that can be accessed here: https://jsfiddle.net/0g3u8452/1/ The image I am using is 1920x4000, and I want it to span the full width of the screen similar to setting background-size ...

htmlcss

How to access an element from the JSON return value retrieved from an AJAX call using JavaScript

After making an ajax call that returns successfully, I am facing a problem. I cannot access individual elements of the array it returns, and therefore unable to console log it. The error message indicates that the track is not defined, even though it is pr ...

javascriptjqueryarraysjsonajax

Pentagon Silhouette as Header Background

I am looking to add a unique pentagon shape to my page header background without editing the HTML. I am using SASS for styling purposes. Is there a way to achieve a design similar to this wireframe image of a pentagon with the middle point at the bottom, ...

htmlcsssass

The functionality of the Bootstrap 4 Carousel featuring multiple items is experiencing malfunctions

I'm encountering an issue with my Bootstrap 4 card carousel. When the next or prev buttons are clicked, there is a strange transition effect. Additionally, in the mobile version, the buttons do not work properly. It seems that when the card slides to ...

javascripthtmlcsstwitter-bootstrapbootstrap-4