Server side processing and pagination problems

terryr

Hi,



I have 2 very similar pages, one of which I am acquiring data using the server side processing feature and the other where I am loading the table up from the server into an ASP.Net repeater.

The example page where I am trying to load server side can be found at http://jquery.octodevcentre.co.za/dttest1.aspx. Here you will see that the page loads with no errors but doesn't appear to contact the server to acquire the data.

The second page where I have data populating an asp.net repeater at load time works perfectly well and can be found here; http://jquery.octodevcentre.co.za/dttest2.aspx. The problem on this page is that the paging controls do not display the page numbers correctly. The First/Previous & Next/Last buttons display fine but the numeric buttons appears very squashed together.

I'm fairly certain that both are to do with errors in my implementation but try as I might for the past 2 days! cannot see where, so if anyone can spot my mistakes I would greatly appreciate it.

Each of the pages has the necessary code blocks displayed.

Thanks,

Terry.

terryr

Oh, and I have just discovered that while the table itself displays fine in IE 9 and Chrome 14.x, it doesn't appear to in Firefox 7.01 but I assume this is a setting somewhere.

terryr

Well, I decided to use the fnServerData function as this gave me a bit more flexibility in what I want to achieve further down the line. It now acquires and displays the data perfectly! if it helps anyone, the code I used is below. (BTW, I haven't checked it out yet, but I believe my original problem with server side processing was that I didn't provide any parameters for the server call so the datatable never actually made the call to the server when it was initialising!).

I still have a problem with the display of the page number buttons though and I can't seem to get around this. Can someone please have a look here, http://jquery.octodevcentre.co.za/dttest1.aspx and let me know if they spot my problem???

Thanks
Terry.

My fnServerData Example

[code]

var oTable
var getContactsUrlAndMethod = "wscontacts.asmx/GetContacts";
var aoData = "{}";

$(document).ready(function () {
setupTable();
}); // $(document).ready


function initialiseTable() {
return $("#dtContacts").dataTable({
"bServerSide": false,
"sAjaxSource": getContactsUrlAndMethod,
"sAjaxDataProp": "aaData",
"aaSorting": [[3, 'asc']],
"bJQueryUI": true,
"bProcessing": false,
"asStripClasses": ['ui-widget-content', 'ui-widget-default'],
"iDisplayLength": 5,
"aLengthMenu": [5, 10, 25, 50, 100, 200],
"iCookieDuration": 14400,
"bPaginate": true,
"oLanguage": {
"oPaginate": {
"sFirst": '   First   ',
"sPrevious": '   Previous   ',
"sNext": '   Next   ',
"sLast": '   Last   '
}
}, // oLanguage
"sDom": '<"H"<"tTools"T><"search"fr>l>t<"F"i

<"FNPL"p>',
"sPaginationType": 'full_numbers',
"aoColumnDefs": [
{ /* CustomerID, ContactID */"bVisible": false, "aTargets": [0, 1] },
{ /* CustomerName */"fnRender": function (obj) {
var str = obj.aData.CustomerName.toString();
return str;
}, "aTargets": [2]
},
{ /* ContactName */"fnRender": function (obj) {
var str = obj.aData.ContactName.toString();
return str;
}, "aTargets": [3]
},
{ /* JobTitle */"fnRender": function (obj) {
var str = obj.aData.JobTitle;
return str;
}, "aTargets": [4]
},
{ /* ContactEmail */"fnRender": function (obj) {
var str = obj.aData.ContactEmail;
return str;
}, "aTargets": [5]
},
{ /* ContactCell */"fnRender": function (obj) {
var str = obj.aData.ContactCell;
return str;
}, "aTargets": [6]
},
{ /* ContactTelephone */"fnRender": function (obj) {
var str = obj.aData.ContactTelephone;
return str;
}, "aTargets": [7]
},
{ /* ContactFax */"fnRender": function (obj) {
var str = obj.aData.ContactFax;
return str;
}, "aTargets": [8]
},
{ /* ContactInUse */"fnRender": function (obj) {
var str = obj.aData.InUse;
return str;
}, "aTargets": [9]
},
{
"sDefaultContent": "", "aTargets": [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
}
],

"fnServerData": function (sAjaxSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"contentType": "application/json; charset=utf-8",
"type": "POST",
"url": sAjaxSource,
"data": "{}",
"success": function (aaData) {
displayData(aaData)
},
"error": function (XMLHttpRequest, textStatus, errorThrown) {
alert(XMLHttpRequest.responseText)
}
});
},
"oTableTools": {
"sSwfPath": 'scripts/media/swf/copy_cvs_xls_pdf.swf',
"sButtonClass": '',

"aButtons": [
'copy', 'print',
{
"sExtends": 'collection',
"sButtonText": 'Save',
"aButtons": ['csv', 'xls', 'pdf']
}
]
} //oTableTools
}); // $("#dtContacts").dataTable
} //initialiseTable


function displayData(aaData) {
oTable.fnAddData(aaData.d);
oTable.bProcessing = false;
}


function setupTable() {
if (oTable == null) {
oTable = initialiseTable();
}
}









ContactID


CustomerID


Customer


Contact Name


Job Title


Email


Cell Number


Phone


Fax


In Use










[/code]