What selectors in the css files are used to style the finished HTML table?

cchintall83

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: Exploring the selectors (classes or ids) with the web developers tools in Firefox on the finished dataTable HTML, many of the classes and or ids used do not effect the style of the particular element. For example, the tbody, tr have class= "odd". Changing the background-color= red doe snot change the background color of the rows in the finished table. Why? Another example: the Search element is styled with the dataTables_filter; the background color and border can be easily changed using this class.

Ther are many css files listed int he css folder and three other css files in the Database/docs/css folder. Which ones are used to style the dataTables HTML table.

Thanks for your help.

tangerine

Isn't this basically the same as your previous post, where you were asked to provide a test case?
https://datatables.net/forums/discussion/71905/how-to-use-css-classes-for-datatables-editor

rf1234

@tangerine is right: You should provide a test case and be very specific on what exactly is a problem for you.

But I guess I have a solution for at least one of your issues.

For example, the tbody, tr have class= "odd". Changing the background-color= red does not change the background color of the rows in the finished table. Why?

Classes "odd" and "even" are used for table striping. In case you want to change the background color you have to remove those classes to make it work. In previous versions of Data Tables it had been sufficient to just remove class "table-striped" from the entire table but that is no longer sufficient.

This is how I resolved it using rowCallback:

....
rowCallback: function (row, data) {
//is only executed for visible rows: all non-visible rows are not being checked!!
    if ( inboxTasksPage ) {
        $(row).removeClass('odd even');
        if ( data.ctr.task_status > "3" ) { //4 = contract has tasks and at least one of them is overdue
            $(row).addClass('bg-danger-strong');
        } else if ( data.ctr.task_status > "2" ) { //3 = contract has tasks and one is due in less than one week 
            $(row).addClass('bg-warning-strong');
        } else { //2 = not overdue (1 = "no tasks that aren't done" is filtered out above!!)
            $(row).addClass('bg-success-strong');
        }
    }
}
....

Ther are many css files listed int he css folder and three other css files in the Database/docs/css folder. Which ones are used to style the dataTables HTML table.

Do you mean this?

If so you can tell by the file name I guess. If you use Bootstrap 3, 4 or 5. You see the files on top of the list. The rest is for the other styling frameworks including Data Table's own styling framework. And the final file is the "core" css if you will.

Why is this important for you?

kthorngren

Which ones are used to style the dataTables HTML table.

See the Styling docs.

For example, the tbody, tr have class= "odd". Changing the background-color= red doe snot change the background color of the rows in the finished table. Why?

Not sure without seeing what you are doing. Maybe this example will help:
http://live.datatables.net/loheyupe/23/edit

See the CSS in the CSS tab for the selectors to try in your case.

Kevin

cchintall83

Thanks for the information which has partially answered my question. I know that the classes odd and even provide alternating colored rows. The issue is for one table built by using the "Generator" using the odd and even classes I was able to striped the table with the colors I wanted. With another generated table the use of these classes do not work. I have tried to paste a copy of the tables on this comment. Obviously, it did not work.

Is styling done by using the <style> tag or in the <script> tag? The link doe snot work? 404 error results.
Thanks again.

kthorngren

Please don't paste your code as we need to see a running test case with the issue. Please post a link to your page or provide a running test case showing the issue and with details of what you want.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kthorngren

Sounds like you want to change the color of the odd and event rows. See this example:
http://live.datatables.net/qaqahuqe/1/edit

If this doesn't work for you then we will need to see the problem in a running test case.

Kevin

colin

@cchintall83 Also, please can you let me know which account you are using for Editor, please. We have 4 trials for you over the years, which have all expired. Is the license registered to another email address? Please can let us know so we can update our records and provide support.

Thanks,

Colin

cchintall83

Hi,
Currently registered with: jchintall@ccshowcasephotography.com, userid: cchintall83
I wish I could learn how to use this system before purchasing the annual licensing fee.
The entire system seems rather complex more than it has to be especially with all the extra files.

Thanks!

rf1234

The entire system seems rather complex more than it has to be especially with all the extra files.

What do you mean with "extra files" and why is Editor "complex more than it has to be"? You are making unfounded allegations and provide ZERO evidence. As a satisfied user (I am not associated with Spry Media and I am not receiving any compensation from them) I completely disagree with you.

tangerine

I share the opinion of @rf1234.

@cchintall83, you say "The entire system seems rather complex", yet the only aspect of DataTables which you have mentioned is the styling. You have ignored requests to provide a test case, so we have no idea what CSS you are using and what results you are seeing.
You also say "I wish I could learn how to use this system before purchasing the annual licensing fee.". There is no licensing fee for using DataTables. The only fee applies to the Editor, but if the styling is your main obstacle then it seems unlikely that you are actually using the Editor. Again, with no test case we have no idea what you are trying to do.
With regard to learning "how to use this system", start with the documentation and try the examples provided. If that doesn't work for you, please provide a test case and an adequate explanation of your problem.

cchintall83

Hello,

I have been using Editor as well as DataTables. I do not know why no one can answer a simple question which css file controls the table generated by the "Generator". I have tried using the Generator including the Editor and DataTables.

I completely aware of the fee structure between DataTables and Editor. I would like to employ both in web sites. I have followed the manual instructions many times. Perhaps if someone could provide a working example not including any of the examples show in the Editor or DataTables website. This would provide the answers I have been requested. It does not make any value to provide this forum with an table which does not meet my requirements especially for styling.

I know this is frustrating however there must be someone to answer my question about styling.

Thanks for your help.

kthorngren

I do not know why no one can answer a simple question which css file controls the table generated by the "Generator".

The Styling docs I linked to earlier describe this. The jquery.dataTables.css is used for the table styling unless you are using a styling Framework like Bootstrap. The Generator provides the Editor files and in the HTML file provided it uses a CDN for all the Datatables and extensions. This is the same CDN created by the Download Builder. I don't believe any of these files are part of the Generator download. The table styling will be in the CDN link.

Perhaps if someone could provide a working example not including any of the examples show in the Editor or DataTables website

I provided some examples above. Do they not do what you want or do they not work in your environment?

This would provide the answers I have been requested.

Maybe we don't understand the questions you are asking. Maybe you are using a styling Framework that requires a different answer than the standard styling. Maybe you have something else conflicting with the answers provided.

It does not make any value to provide this forum with an table which does not meet my requirements especially for styling.

Not sure I understand the comment so I will assume you are saying that providing a test case is not valuable. The point of the test case is to see an example of your solution so we can offer suggestions and provide more specific help. We wouldn't ask for a test case if it was not useful.

I know this is frustrating however there must be someone to answer my question about styling.

Each solution is different. You used the Generator to download the Editor config. Did you choose a styling Framework or leave it as the default?? Please keep in mind when asking questions that you know your solution - we don't. Sometimes we need a test case to better understand your environment to provide more specific help; Otherwise you are going to get generic answers like the examples I posted above.

I posted two examples that show how to set the background color of the Datatables rows. If these don't work for you then there is something different in your environment that we are trying to understand. Please post a link to your page or a running test case showing the issues so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

colin

I agree with all the comments here, and have nothing to add to that. But I am curious as you've registered for a trial, every year for four years, with those trials being extended. Surely by now you would've established if Editor was a viable solution for you?

Colin

cchintall83

Colin,

The first couple of years I spent hardly any time learning this system; I only had a few hours a week to spend on programming. This year I have spent a good amount of time trying to get this system to work. From my point of view I have never received a response which has answered my question; perhaps the experts are good at using this system but not teaching. This is my perspective of this whole situation.

Can someone answer the simple question, which css file controls the styling of a generated table either for DataTables or Editor.

Thanks for your ongoing help.

tangerine

From the Generator docs.:

Styling and software
When you start using Generator you'll notice that the first two options are for what styling and software options the package that is created should use.

A. Which styling options did you choose?
and B. Why do you not find your answer in the Generator's resulting table - which you are still not showing us despite numerous requests?

allan

Can someone answer the simple question, which css file controls the styling of a generated table either for DataTables or Editor.

The HTML the Generator produces (with default styling options) contains:

        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.11.5/b-2.2.2/date-1.1.2/sl-1.3.4/datatables.min.css">
        <link rel="stylesheet" type="text/css" href="css/generator-base.css">
        <link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">

Those, fundamentally, are the three files that controls the styling on the pages it produces.

This is the selector that controls the row striping colour in the file Generator crates (from the "Inspect" option in my browser):

table.dataTable.display tbody tr.odd {
  background-color: #f9f9f9;
}

You can change that as you need. Another the others have indicated, the styling library you choose is important as well since each one has its own way of styling row striping (that isn't something we can control - that's how the different libraries work).

@rf1234, @tangerine @kthorngren - Thanks for your continued support! You are all awesome

Allan

cchintall83

Hi Colon,
Thank you for the response. Your suggested solution does not add the background-color to the first column of the odd numbered rows. This has been an ongoing issue for me. I am surprised there is no simple resolution to such an issue. I would hope when using Editor or DataTables the styling is not limited as experienced by me. Perhaps, there is an existing website using Editor for the CRUD table having alternating colored rows as well as hover usage. Tables built using PHP can be easily styled with a multitude of selectors and declarations.

Thanks Again

kthorngren

Your suggested solution does not add the background-color to the first column of the odd numbered rows.

Take a look at this example I posted earlier in this thread. Does it highlight the rows the way you want?
http://live.datatables.net/qaqahuqe/1/edit

Look in the CSS tab for two CSS selectors to completely highlight the rows:

table.dataTable.display tbody tr.odd {
    background-color: red;
}

table.dataTable.display tbody tr.odd > .sorting_1 {
    background-color: red;
}

does not add the background-color to the first column

The first ads the background to the odd rows. The seconds adds the background to the td's that have the class `sorting_1. These are in the column(s) being sorted which by default is the first column.

Is this what you are looking for and does it work for you?

Kevin

tangerine

Kevin, you have the patience of a saint. I only have the patience of me, and it's all gone.
This thread is a masterclass in how not to ask for help.

kthorngren

Not patience, just persistence. Just trying to get @cchintall83 to provide some new useful information so we can help.

Kevin

cchintall83

Hello Everyone,

Your suggestion has provided the desired styled rows. Thank you!!!! I appreciate this help. In order to provide the requested copy of the scripts in question, I noted the format as illustrated in : http://live.datatables.net/qaqahuqe/1/edit.. Can you provide the information to allow me to generate a similar presentation for any future issues.

Thanks Again!!!!!!

kthorngren

Test cases aren't always needed but they help us to help you more efficiently. Take a look at this link:
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

You can get various (like ajax loaded and server side processing) starter scripts here:
https://datatables.net/manual/tech-notes/9

The simpler the test case the better. Most of the time that problems don't require your exact data but a fake set of data that reproduces the issue. We'll always help to get the test cases running - just ask.

Kevin