Two Small Issues

techguy1988

Hi Guys,

I have two fairly small issues that are bugging me quite a bit.

1st. Since I've upgraded to the new version of Data Tables I now see on ALL of my tables the words "Previous" and "Next" on the next / previous icons, which is quite annoying! Does anyone know how I can fix this with CSS?

2nd. For some reason I cannot get my AJAX table to move to the last record, could someone please let me know what I am doing wrong!?

[code]
var oTable = $('#data_table').dataTable({
"bAutoWidth": false,
"bDestroy": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "ajaxsource.php",
"aoColumns": [
null,
{"sClass": "sCent"},
null,
null,
null
]
});

oTable.fnPageChange('last');
[/code]

allan

> 1st. Since I've upgraded to the new version of Data Tables I now see on ALL of my tables the words "Previous" and "Next" on the next / previous icons

This is noted in the upgrade notes: http://datatables.net/upgrade/1.9 :-). There is also the relevant CSS changes there.

> 2nd. For some reason I cannot get my AJAX table to move to the last record, could someone please let me know what I am doing wrong!?

Can you run your table through the debugger please? I'm particularly interested in the JSON that is being returned from the server.

Allan

techguy1988

Hi Allan,

Thank you very much for that!

Please can you see the screenshot below? It is still not working correctly.

http://i50.tinypic.com/i5ulqb.png

allan

Looks like you need to update the pagination styles - see the top note ("Pagination") on the upgrade notes: http://datatables.net/upgrade/1.9 .

Allan

techguy1988

Hi Allan,

I have both of the CSS changes in my CSS files and it is still showing the text!

[code]
.paginate_disabled_previous, .paginate_enabled_previous,
.paginate_disabled_next, .paginate_enabled_next {
height: 19px;
float: left;
cursor: pointer;
*cursor: hand;
color: #111 !important;
}
.paginate_disabled_previous:hover, .paginate_enabled_previous:hover,
.paginate_disabled_next:hover, .paginate_enabled_next:hover {
text-decoration: none !important;
}
.paginate_disabled_previous:active, .paginate_enabled_previous:active,
.paginate_disabled_next:active, .paginate_enabled_next:active {
outline: none;
}

.paginate_disabled_previous,
.paginate_disabled_next {
color: #666 !important;
}
.paginate_disabled_previous, .paginate_enabled_previous {
padding-left: 23px;
}
.paginate_disabled_next, .paginate_enabled_next {
padding-right: 23px;
margin-left: 10px;
}

.paginate_disabled_previous {
background: url('/images/back_disabled.jpg') no-repeat top left;
}

.paginate_enabled_previous {
background: url('/images/back_enabled.jpg') no-repeat top left;
}
.paginate_enabled_previous:hover {
background: url('/images/back_enabled_hover.jpg') no-repeat top left;
}

.paginate_disabled_next {
background: url('/images/forward_disabled.jpg') no-repeat top right;
}

.paginate_enabled_next {
background: url('/images/forward_enabled.jpg') no-repeat top right;
}
.paginate_enabled_next:hover {
background: url('/images/forward_enabled_hover.jpg') no-repeat top right;
}
.paging_full_numbers a.paginate_button,
.paging_full_numbers a.paginate_active {
border: 1px solid #aaa;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 2px 5px;
margin: 0 3px;
cursor: pointer;
*cursor: hand;
color: #333 !important;
}

.paging_full_numbers a:active {
outline: none
}

.paging_full_numbers a:hover {
text-decoration: none;
}

.paging_full_numbers a.paginate_button {
background-color: #ddd;
}

.paging_full_numbers a.paginate_button:hover {
background-color: #ccc;
text-decoration: none !important;
}

.paging_full_numbers a.paginate_active {
background-color: #99B3FF;
}
[/code]

allan

I'd need a link to see what is going wrong.

Allan