Within the jQuery datatable styles, such as "smoothness," the rows are displayed in different colors. What factors determine which colors are shown on each row? And is there a way to customize this color scheme? Refer to the example below from their sample download pack.
Success! I have uncovered the solution. Within the original HTML document retrieved from the server, table rows are assigned specific classes based on the content of the final column. For example:
<tr class="gradeC">
Upon applying the datatable() function, additional identifiers such as 'even' or 'odd' are appended to the class attribute. This results in markup like:
<tr class="gradeC odd">
Furthermore, when a column is sorted, a "sorting_1" value is included in the class string for cells in that particular column.
The various color schemes are defined within the CSS file, as shown below:
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* DataTables row classes
*/
(table.display tr.odd.gradeA { background-color: #ddffdd; })
(table.display tr.even.gradeA { background-color: #eeffee; })
(table.display tr.odd.gradeA { background-color: #ddffdd; })
(table.display tr.even.gradeA { background-color: #eeffee; })
(table.display tr.odd.gradeC { background-color: #ddddff; })
(table.display tr.even.gradeC { background-color: #eeeeff; })
... [remaining CSS rules omitted for brevity] ...
For this particular scenario, specific colors are assigned using classes such as gradeA, gradeB, gradeC, and so on. It's uncertain whether these classes were dynamically generated or if jQuery Theme Roller was utilized. The assumption is that the styles were generated using theme roller. To apply custom classes to your table, simply utilize the custom classes options.
Check out more here: https://datatables.net/styling/custom_classes
From there, you can implement something like this:
oTable = $('#example').dataTable( {
"aoColumns" : [
{ sClass: "myCustomClass" }
]});
-plus-
table.display tr.even.myCustomClass { background-color: #ffdddd; }
table.display tr.odd.myCustomClass { background-color: #ffeeee; }
A similar question can be found here:
Giving custom classes to each TD for styling - Datatables & jQuery
Additionally, take a look at this one involving filters:
datatables add class to filters
Can jQuery UI's sortable() be configured to sort rows based on their "containing" element only? I have a table with rowspanned cells that should only be sorted within their respective spanned columns. var $sortable = $('.nested-sortable tbody&ap ...
I am working on a layout with two columns of text placed side by side, where one column is right aligned and the other is left aligned. Below is my current code: .alignleft { float: left; } .alignright { float: right; } .list-unstyled { padding ...
I've been trying for a while to solve this issue but haven't found a solution yet. My auto-refresh feature works, however, it refreshes all the divs inside each other. For example, I have a computer-aided dispatch application with sections for av ...
My goal is to trigger a modal window using Bootstrap 5 (not React-Bootstrap library) when clicking on a day in the FullCalendar Component in React. I attempted to access the modal by using jQuery's $, but encountered the error message "$ is not a fun ...
I would like the title column to occupy 3/4 of the full row width and the amount column to take up 1/4 of the full row width on all screens sizes (md, sx...). Here is the updated code snippet: import React from 'react' const MyComponent = () =&g ...
Hey there, I've been struggling with this issue for quite some time now. I really need to perform an asynchronous upload using ajaxFileUpload. While I can successfully post the file to my controller, when trying to return a JsonResult, I keep encounte ...
After integrating Devise and Cancancan for authentication and authorization in my Rails App, I encountered an issue where a previously functioning action now redirects to the home page when called from the JavaScript form submission. The JavaScript code s ...
I am currently facing an issue with importing an Excel file using AJAX and Laravel in my application. The form of excel import is embedded within another form and I have observed that the error handling is not displaying the error messages correctly on the ...
I am currently working on a project that involves fetching images from various websites and displaying a thumbnail or resized version of the original image. Since I will be fetching many images at once, loading the original image files can take longer. ...
Is it feasible to layer multiple SWF files on top of one another directly? I have been experimenting with divs and different z-index values, but I am unsure about how the Flash player comes into play. Is my assumption correct that each SWF has its own indi ...
Users on a specific page must click a 'generate' button to create details for a record. When the button is clicked, an ajax request is triggered to generate the record, which may take some time. $("#generate_record_button").on("cl ...
Using expressjs for my app development, I have created a service to download files on the client side using res.download(filepath, filename). The following is the code snippet of my service: router.route('/downloadFile').get(function(req,res){ ...
I am attempting to spin a span generated using JavaScript when a button is clicked. The class is added to the span, but the spinning effect does not apply. <p>Click the button to create a SPAN element.</p> <button onclick="myFunction ...
I'm working on customizing a Wordpress menu that has a submenu. I managed to add an arrow to the 'li' element that contains a submenu, and created a hover animation with CSS when the mouse moves over the 'a' tag inside the 'li ...
My onclick event is acting strange. Whenever I click the mobile menu in the menubar, it just appears briefly like a flash and then disappears. It's not staying stable on the screen. The classes are being added and removed abruptly when I try to click ...
I am attempting to generate an HTML element and trigger a click event in order to download a CSV file upon receiving an ajax response (the data array provided is for testing purposes only). $(document).on('click','.csv',function(){ ...
I'm fairly new to CSS and struggling with a design issue. I want to display a series of stacked divs on my page, each containing text and one or more images. My goal is to have the text left-aligned and vertically centered, while the images are right ...
I am facing the following scenario: I need to dynamically add an UNKNOWN number of checkboxes to a layout component, arranged in columns with 10 checkboxes per layout item. Although I have successfully added all the checkboxes to a single div element, I ...
Currently, I am utilizing a bootstrap toggle from this source: https://codepen.io/aanjulena/pen/ZLZjzV The main function of this toggle is to reskin a button. When the status is "on," the aria-pressed attribute is set to true, and vice versa. Here is an e ...
For the fiddle, click here - http://jsfiddle.net/ashwyn/a45ha/ To see the HTML code, take a look below: <div class="parent"> <div class="a">Class A</div> <div class="b">Class B1</div> <div class="b">Class B ...