Is there a way to initially hide the datatable sorting icon upon loading, but have it display automatically when clicking on the header?
I've been searching for a solution without success.
Is there a way to initially hide the datatable sorting icon upon loading, but have it display automatically when clicking on the header?
I've been searching for a solution without success.
simply eliminate the sorting class from the datatable during initComplete
sorting_asc
sorting
For example:
<script type="text/javascript">
//Datatable for search and sorting
var table = $('.table').DataTable({
"fixedHeader": false,
"lengthChange": false,
"bPaginate": false,
"responsive": true,
"autoWidth": false,
"scrollY": "300px",
"scrollCollapse": true,
"paging": false,
initComplete: function (settings, json) {
this.api().columns().header().each(function (th) {
$(th).removeClass("sorting_asc");
$(th).removeClass("sorting");
}
)
},
});
This will initially hide all sorting icons in the table until a header is clicked, enabling sorting with icon display.
Your cooperation is appreciated
If you want to customize the icon appearance using CSS alone, it is not possible. The plugin injects classes that determine the icon's look, rather than relying on CSS rules. However, you can override these classes by adding a specific definition to each header:
table.dataTable thead .sorting_pre {
background-image: none;
}
var table = $('#example').DataTable({
initComplete: function() {
this.api().columns().header().each(function(th) {
$(th).addClass('sorting_pre')
})
}
})
To reset the custom class when the user first orders or sorts the table, you can do the following:
table.one('order.dt', function() {
table.columns().header().each(function(th) {
$(th).removeClass('sorting_pre')
})
})
You can see a demo of this solution here -> http://jsfiddle.net/wvo98420/
Please note: This approach is tailored for DataTables version latest / 1.10.19. If you are using styling plugins like Bootstrap, additional steps may be necessary.
One way to achieve this functionality is by using jQuery.
Here is an example assuming the structure looks like this:
$('.header').on('click',function(){
$('.icons').removeClass('hide-class');
});.hide-class{
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<ul>header (click here)
<li class="icons hide-class">Name</li>
<li class="icons hide-class">Address</li>
</ul>
</div>I am having trouble centering the container in my HTML code HTML code:- <body> <div class="container"> <div class="image"> <img src="./images/image-qr-code.png" alt="qrcode"> & ...
I have been utilizing the jquery datatables plugin, and have encountered an issue with the row click functionality. Strangely, it only seems to work on the first page of the table. When I navigate to any subsequent pages, the row click fails to respond whe ...
There is a live search bar in my project where the results are filtered as the user types. Each result is a clickable link that should load on the same page, but I'm facing some issues with the implementation. The search functionality is powered by a ...
I've been experimenting with Cronjobs and I've run into a roadblock. My goal is to have the cronjob execute every X minutes, containing a script with JavaScript that calls an ajax request every second for the next 60 seconds. The ajax call trigge ...
I have just finished creating a custom alert box using Javascript, complete with text and images. However, I am facing an issue with alignment. The output is not as expected. I am trying to display the correct mark and text on the same line. Can someone ...
I have implemented a JQuery functionality utilizing Ajax to send data back to my controller for processing. This is the approach I'm using: //Defining my input controls <%=Html.TextBox("PName", Model.PName, new { id = "pName" })%> ... .... .. ...
I have just started learning HTML and CSS, and I'm curious to know how I can center the links Home, About, and Contact in the header. HTML: <body> <header> <h1><a href="#">HBT</a> </h1& ...
My setup involves two Grid components, with one structured like this: <Grid container alignItems="stretch" spacing={3}> <Grid className="left-pane" item md={4} xs={12}> <Navigation /> </Grid> <Grid className="right-pan ...
I've encountered an issue with the asynchronous methods that retrieve and display all vidDuration values followed by the corresponding viewCount values for each videoId. The problem arises when the vidDuration value repeats only the last received one ...
I am facing an issue with feeding JSON data into datatables when the search button is clicked. The JSON data structure is as follows: [ { "port_code":"BOM", "cont_details_id":"9", "price":"44.000", "cont_price":"500", "c ...
def ajax_lookup(request,channel): This particular view is essential for handling autocomplete functionality. The issue here lies in the JS code where an error occurs due to sending 1 attribute instead of the required 2. How can I successfully send the se ...
I'm looking for a way to create a unique div design that includes an arrow pointing downwards attached to the bottom. After some exploration, I was able to achieve this look through this process: http://jsfiddle.net/hyH48/. However, my challenge lies ...
Hey there, I was wondering something. Let's say I have a navigation bar like the one below: Navigation Bar Is there a way to use ajax or any other method so that when I click on a menu item or submenu in the navigation bar, the name of the menu item ...
I'm attempting to attach a click event to an existing DOM element. <div class="logMe" data-log-id="{{ data.log }}"></div> ... <div id="events"></div> Struggling to access external Vue methods within my jQuery click handler. A ...
Issue can be replicated by visiting the following URL: Click on the hamburger icon to open the navigation menu Click on "Services" Click "< Services" within the submenu to attempt to go back For some reason, the removeClass method is not removing t ...
Having some trouble removing unnecessary white space on my website. The goal is to have the main text and logo centered on an image background, but I've been unsuccessful so far. I've experimented with different CSS properties like overflow-x: ...
I am facing an issue with my script for uploading images with text. The problem is that when the data is posted and the image is uploaded, the file is coming up empty. I'm not sure why this is happening, can anyone assist me in resolving this issue? ...
After coming across the solution for ''Vertical Align in a Div ", I decided to implement Adam's answer. However, my challenge lies in figuring out how to display both an image and text side by side with the text centered vertically. View My ...
Hey there! I need some help with a function that I have. Whenever this function is triggered, an AJAX request is sent. However, if the same function is called again before the previous request has completed, both requests are still made. I want to find a ...
Can CSS pseudo elements :after or :before be used to clear floats between elements? If not, what other method can be used to clear floats between <div class="float"> and <section class="inner">? The HTML and CSS structure is as follows: * { ...