Newbie problems

terryr

Hi,

I'm fairly new to jQuery and even newer to dataTables. I have setup a table, styled it using the jQueryUI and can display server side data. I do however have a few problems that I have spent the past few days trying to resolve to no avail.

1. The First, Next, Previous and Last paging buttons do not appear to style correctly, they are just placed side-by-side with no spacing between them.

****EDIT - PLS ignore #2, I can no longer spell or read correctly! The issue is resolved.

2. I want to display the search box and the pagination drop down list on the same line at opposite end of the table but cannot for the life of me work out how to do this. Same goes for the TableTools buttons - they are all overlapping each other. The buttons do use the UI theme colors correctly though which I don't understand.

****END EDIT

3. The number of record displayed always displays "showing 1 to 1 of 1 entries" regardless of how many records are displayed.

Can someone please give me any advice on how to find out where I am going wrong? I have checked the reference section and forums before posting.

My initialization code is below.

Thanks
Terry.

[code]
$(document).ready(function () {
$("#dtContacts").dataTable({
"aaSorting": [[3, 'asc']],
"bAutoWidth": true,
"bJQueryUI": true,
"asStripClasses": ['ui-widget-content', 'ui-widget-default'],
"aLengthMenu": [10, 25, 50, 100, 200],
"bInfo": true,
"bLengthChange": true,
"bPaginate": true,
"bProcessing": true,
"bSort": true,
"bSortClasses": true,
"bStateSave": false,
"iCookieDuration": 480
"oLanguage": {
"oPaginate": {
"sFirst": 'First',
"sPrevious": 'Previous',
"sNext": 'Next',
"sLast": 'Last'
},
"sEmptyTable": 'No data available in table',
"sInfo": 'Showing _START_ to _END_ of _TOTAL_ entries',
"sInfoEmpty": 'Showing 0 to 0 of 0 entries',
"sInfoFiltered": '(filtered from _MAX_ total entries)',
"sInfoPostFix": '',
"sLengthMenu": 'Show _MENU_ entries',
"sLoadingRecords": 'Loading...',
"sProcessing": 'Processing...',
"sSearch": 'Search:',
"sUrl": '',
"sZeroRecords": 'No matching records found'
},
"oSearch": {
"sSearch": '',
"bRegex": false,
"bSmart": true
},

"sAjaxProp": 'aaData',
"sAjaxSource": null, //getContactsUrlAndMethod,
"sCookiePrefix": 'my_DataTables_',
"sDom": '<"H"Tflr>t<"F"i
p>',
"sPaginationType": 'full_numbers',
"sScrollX": '',
"sScrollXInner": '',
"sScrollY": '',
"aoColumns": [
{ "bVisible": false },
{ "bVisible": false },
{},
{},
{},
{},
{},
{},
{},
{},
{ "bVisible": false },
{ "bVisible": false }
],
"oTableTools": {
"aButtons": [
'copy', 'csv', 'xls', 'pdf',
{
"sExtends": 'collection',
"sButtonText": 'Save',
"aButtons": ['csv', 'xls', 'pdf']
}
]
},


});

});
[/code]

fbas

line 41. should be "sAjaxDataProp", no?
line 42. null source?

for the css spacing, see http://www.datatables.net/release-datatables/media/css/demo_table.css, add some padding and margin

[code]
.paging_full_numbers {
width: 400px;
height: 22px;
line-height: 22px;
}

.paging_full_numbers span.paginate_button,
.paging_full_numbers span.paginate_active {
border: 1px solid #aaa;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 2px 5px;
margin: 0 3px;
cursor: pointer;
*cursor: hand;
}
[/code]

terryr

Hi fbas,

I am currently populating the dataTable directly from server side code which is why I suspect it has problem 3. I shall use the AJAX method to acquire the data via a client call to the server and see what I get there.

I thought the paging controls were fully integrated with the UI Themeroller and didn't realise they need separate styles applied so thanks for the info.

Thanks for pointing me in the right direction.

Terry.

GregP

Interesting... I don't recall ever needing to apply separate styles for my Themeroller'd jQuery UI theme. But it has admittedly been a long time since we first switched to jQuery UI.

As fbas mentions, in line 42 you have your source set to "null". I guess this means that the table is already built before dataTable() is called on it. I would suggest not declaring any parameters that are just taking default values; it makes your initialization appear unecessarily complex.

In your aoColumns, you have a number of empty objects. Is that the correct way to 'skip' a column? It may evaluate to "null" but I would suggest explicitly putting "null" there instead.

None of these are necessarily helpful suggestions, but once you've trimmed down and "standardized" your initialization it might be easier to identify what could be going wrong.

terryr

Hi GregP,

Yes, you are correct in that the initialisation code does contain too much, but as I am learning I just wanted to see what everything does and get to understand it better. I'll thin it out as required further down the line.

I was acquiring the data server side (asp.net) and populating a repeater that contains the table. I will be trying to acquire it through client side code later today when I have some free time.

Thanks for the input.

Terry.