aoColumns with multiple "arguments"

abraam

Hi
i tried to use this but doesn't seem to work. (search didn't help)
[code]
$(document).ready(function() {
$(\'#tablevaseis\').dataTable(
{
"bSortClasses": false,
"aoColumns": [ null, { "bSearchable": false, "sWidth": "40px" }, { "bSearchable": false, "sWidth": "60px" }, { "bSearchable": false, "sWidth": "60px" } ]
});
}
);
[/code]

the last 3 columns are not Searchable, but they dont get 40px and 60px
I want the first column to take all the space it needs and leave the other 3 columns with only the necessary for them width (40px,60px,60px).

flies

maybe you have your own class for th set which applies other settings?
may we look at your table?

also try disabling:
"bAutoWidth": false

allan

Hi abraam,

As flies indicates, it would be really useful if you could post a link to an example showing what exactly is going on here. What should happen is what you are expecting, but there can be a few quirks along the way...

Regards,
Allan

abraam

ok
heres a link: http://www.thelwnamathw.gr/vaseis/
I have a database of 526 rows of data and i am making the table dynamically with php, mysql (but not using the way suggested here on datatables. One think at a time). The small images are premade. The code i tried now is (i have added "bAutoWidth": false,)
[code]echo '

$(document).ready(function() {
$(\'#tablevaseis\').dataTable(
{
"bAutoWidth": false,
"bSortClasses": false,
"aoColumns": [ null, { "bSearchable": false, "sWidth": "40px" }, { "bSearchable": false, "sWidth": "60px" }, { "bSearchable": false, "sWidth": "60px" } ]
});
}
);
';
echo '????????? 2008??????????????';
[/code]

I am just trying to fit pieces of a puzzle here. A piece is php, another is css, and of cource javascript. But i dont know much about neither of them so hoping to learn something new today...

abraam

The table has the property "sWidth": "60px" but the text is bigger than that so it makes it look bigger than 60px
I added to all 3 columns "sWidth": "30px" add they get as thin as the column text lets them to be.
So thats working now. (actually it was working from the beggining...)
Another question: I dont want alternating color on the rows, but every row to have white background. How can i do that?

flies

try overflow: hidden with css on selected column and it's cells

make css class:

.hide_longer
{
overflow: hidden;
}

and add

"sClass": "hide_longer"

to aoColumns:

[code]
echo '

$(document).ready(function() {
$(\'#tablevaseis\').dataTable(
{
"bAutoWidth": false,
"bSortClasses": false,
"aoColumns": [ null, { "bSearchable": false, "sWidth": "40px","sClass": "hide_longer" }, { "bSearchable": false,"sClass": "hide_longer", "sWidth": "60px" }, { "bSearchable": false, "sWidth": "60px","sClass": "hide_longer" } ]
});
}
);
';
echo '????????? 2008??????????????';
[/code]

abraam

I did that and i cant say i figured out what it means
overflow: hidden; is about images that dont fit if browser gets resized?
and "Hide_longer" is a rather strange name for a class.
Did you spot something in the page that i cant see?

allan

Hi abraam,

At the moment in your code you have each of the last three columns being "30px". However, it is not possible to get the information that is shown in each of those columns into 30px (specifically the text in the TH elements and images in the last two columns). I think you need to have at least 60px, 80px, 80px as the sizes for these columns (you can try using Design to help get the sizes required: http://www.sprymedia.co.uk/article/Design ).

So what is happening is that DataTables is applying your sizes correctly, but they simply aren't big enough to show the data - and as such the browser is making them bigger.

Regards,
Allan

flies

abraam:
overflow: hidden;
allows you to view only data that fit into specified width/height. It applies to block elements, so if you for example have:



The overflow property specifies what to do if the content of an element exceeds the size of the element's box.


and
.test {
width: 60px;
height: 60px;
overflow: hidden;
}

it will only show in this case (with default font):

"The overflow property", the rest of the data will be "hidden".


But now i THINK i know that you want to achieve :) Check this link: columns 2 and 3 have set width and don't get oversized:


http://flies.rootnode.net/etc/trim_div.jpg


solution?

Just remove the div from the inside of the TD cell and set sWidth like you previously did.

It looks like that in my case:
[code]
??????
????????
[/code]

This cells take: 44px; and 62px;

abraam

thank you flies for your suggestion and explanation.
Allan, Design is great stuff (i also like firebug that you suggested on some other message)

about the width of the columns i cant really understand why it needs 80px. it seems to me that maybe 60px would be fine. Can you recommend some site for further reading about that? (Table, css, inheritance...)

Thanks for your replies. Very few projects have such great and fast support.

allan

Hi abraam,

Yes indeed you might be right about 60px - I had forgotten about the padding that I applied to the TH elements to ensure that the sorting icon showed up correctly. What I would suggest is that you use Firebug to manipulate the sizes of the TH elements manually until you are happy, and then stick them into your initialisation code. Not the best solution I know, but it will show you hands on exactly what is going on, and give you a feel for what is "right".

Thanks for your kinds words about DataTables and Design - very much appreciated!

Regards,
Allan