Show entries padding?

eeyore145

Hello:

I have just started using DataTables and I think its a great tool. However I have a question regarding how the Show number of items per page entries is rendered and how to add additional padding under it. Right now, in IE and FireFox, by default the show page number entries shows right on top of the actual table. What I would like is to put about 10px of spacing or so, so the drop down list of items for paging isn't flush against the Table. In the default/testing CSS styles I see this:

table.display {
margin: 0 auto;
width: 100%;
clear: both;
}

Now the problem with just adding padding-top:10px to this css definition is that FireFox will honor it, but IE will not. I know enough about CSS to be dangerous, but I'm not sure how to tweak my current site so I can get some padding between the Data Table and the drop down list for page sizes.

Any ideas or suggestions?

Thanks

allan

How about something like this:

[code]
.dataTables_length {
float:left;
height:2.5em;
width:40%;
}
[/code]
I've not got IE atm to test it, but you might have to add the height to .dataTables_filter as well.

Regards,
Allan

eeyore145

Allan:

Thanks that was the trick, playing the height CSS for the .dataTable_length. One more question for you. I've been using JQuery for several months and I've just started using DataTables. I have basically created my own Theme/CSS definition for this project. Basically I am hiding the filter, we don't really need it, and I am using the sort and paging - - all this works nicely. I have a specific style for my header row (thead th the column "headers") and basically I just want the end user to click on the column header (they get the pointer cursor through the CSS) to sort that column in ascending and descender order.

I was wondering if you have done anything with the click events on column headers. My goal is, when a column header is clicked on or "sorted" in a particular manner the Column header COLOR changes - - it would go from white to a RGB shade of Orange. Then obviously, when a different column header is clicked the previous one which was clicked goes back to white, and that one goes to Orange

Any ideas regarding the best way to do this and is it possible? Could I use JQUERY bind or live to intercept the onclick event of the th cell and set all others to color: white, $(this) to Orange? A more simpler approach through CSS?

Thanks

eeyore145

Hi Alan:

Answering my own question, yes, through JQUERY live this was quite easy to accomplish

[code]

$("#couponListing th").live("click", function() {
-set css color of $this
-reset css color of $this.siblings()
}

[/code]

Thanks again

allan

Yup - that's certainly one option for doing it. Although I don't think it will work if you shift click (i.e. multiple column sort) on a header will it?

A css solution is just to use the sorting classes given to the header: http://datatables.net/styling/ids_classes and http://datatables.net/styling/custom_classes . Using Firebug (etc) is a good way to see what is going on and how you can address the elements.

Regards,
Allan

eeyore145

Hmmmm.....

Allan, I am trying to use the CSS approach and I can't get the color of the Header to change. I'm not sure why. I have firebug open and I know the style is being used. For example in the FireBug window, I can change the font size and it updates immediately on screen so I know the style is being registered..for example

[code]
.sorting_asc { color: orange; font-size:15px}
.sorting_desc { color: orange; font-size:15px}
[/code]

If I change font-size to be anything else, the font of the column header changes, etc.

When I use JQUERY live and do $(this).css 'color' 'orange' it works fine, what am I doing wrong here? It would seem to me JQUERY live events are doing the same CSS manipulation, its the same css property. Through JQUERY I am doing [id] th traversing, not sure how its any different here. And from HTML view the class is being applied fine:

[code]

NameStart TimeEnd TimeStatusCoupon Code

[/code]

Notice I sorted on the "Name" column, and again only the Font-Size seems to be changing..

Why is the TH header text not changing color? Any ideas?

Thanks

eeyore145

OK, I figured out how to make it work, but there another way to get this to work.

I found with this definition, the color was being overriden, meaning the sorting_asc and sorting_desc color definition was being ignored, since the core "TH" definition of the element is "white"

[code]
table.display thead th {padding: 3px 18px 3px 10px;border-bottom: 1px solid black;font-weight: bold;cursor: pointer;background-color: #00447C;color:White;}
[/code]

So by default the DatTable rendering has white column header text and a shade of dark blue background

I got my sorting color change to work by moving "color:White" into a generic thead definition

[code]
thead { color:White; }
[/code]

I'm not thrilled about this approach because I don't want this assigned to a generic thead element, I want these styles only in use within my DataTable CSS.

Any better way to accomplish this? Also, why is this behavior occurring?

Thanks

allan

I think we are heading into the realms of CSS here, rather than DataTables (which is JS focused - the demo CSS is just provided as exactly that - a demo. It should be used and abused!) - but there is some relevance.

Firebug is your friend for CSS selectors, it will show you what selectors are being used, and in what order, and what properties are being overwritten by more specific selectors. If you don't want thead { color:white }, then don't put it in, just make the selector more specific. You've got color:white in the table.display thead th, what selector is overrulling that? Can you change that selector etc. Have a play with Firebug and see what helps. Apparent from anything else, it's hard to debug css remotely!

Regards,
Allan