Formatting how the datatable looks.

incutonez

Hello all, I'm sure this is just a CSS question--not too familiar with the syntax of CSS because it just looks awful as is, haha--but I'm looking to alter how the dataTables layout is. I would love to be able to center my text (including headers and inside text of dt), but not sure how. I was playing around with the CSS of .dataTables-info (forget the actual class name right now), but that didn't seem to do anything. I also want to reposition the search box, drop down list of number of items per dt page, and also move the paginate numbers around (next, previous, first, last, [1, 2, 3,...]). Did I miss a guide somewhere? If so, just point me in that direction.

Also, one other question arose... I have a hash that contains information on a person, so it looks like this:

"jack johnson" => [27, ['address1', 'address2', ...], ['phone1', 'phone2', ...]]

So the hash's keys are the names of the person, then the hash contains the age, an array of addresses, and another array of phone numbers. Is there an easier way to load this into datatables other than going element by element? I was trying to use 'aaData' and load the hash to that, but it didn't seem to work.

Any help is appreciated. Thanks!

allan

text-align: center is the CSS property and value needs to align text center ( http://www.w3schools.com/CSS/pr_text_text-align.asp ). Then you just need the selector. td { text-align: center } for example will align all table cells center.

Also, no the aaData parameter expects a 2D array (rows then columns). If you want to use a custom object then a small translation loop from your object to a 2D array is needed.

Allan

incutonez

Ahhh right, figured I couldn't just load in my data structure.

Hmmm, ok, I was definitely missing the td... now what if my search bar is all the way on the right. How would I move that so he shows up above or below the datatable? What CSS option is that? I feel like it'd be more of an HTML issue, but since datatables is initializing the search bar, I'm not sure how I'd edit its position.

allan

You can use the sDom parameter ( http://datatables.net/usage/options#sDom ) to control where the element appears in the DOM - like this http://datatables.net/examples/basic_init/dom.html - but you will likely need to use CSS to position it exactly where you want. Firebug is very useful for that kind of thing.

Allan

incutonez

Ohhh nice, I didn't know about the sDom parameter, I'll try messing around with that. Otherwise, you've proved to me that it's CSS driven, so I'll have to learn what's going on there. Thanks for all the help man!