Showing 1 to NaN of NaN entries (filtered from 2 total entries)

juslisnen

Hi, First post so be gentle.
I hope I have posted in the correct discussion group.

I have DataTables working using server side data. The basic part of the page information is displaying properly in that it's returning the correct total entries though I cannot get the show to work properly (see the NaN below).

Showing 1 to NaN of NaN entries (filtered from 2 total entries)

Apologies but I'm not the developer. I was brought here after trying to search for a solution. If there is any advice on where I need to start looking to fix I would appreciate it. It's a new plugin recently developed to show data for running clubs (athletes).

http://www.suttonrunners.org/recent-results

[code]/*
* Javascript functions for WPA my results page
*/

WPA.MyResults = {

/**
* reads the profile photo url from the hidden input and populates as background image of the profile photo div
*/
loadProfilePhoto: function() {
var url = jQuery('#user-image').val();
if(url) {
jQuery('#wpaProfilePhoto').removeClass('wpa-profile-photo-default').css('background-image', 'url(' + url + ')');
}
},

/**
* reloads all results
*/
reloadResults: function() {
console.log('reloading results function');
// redraw the table
if(WPA.MyResults.currentTab == 'results') {
WPA.MyResults.myResultsTable.fnDraw();
}
else if(WPA.MyResults.currentTab == 'pb') {
// load personal bests
WPA.MyResults.getPersonalBests();
}

// reload an event dialog if it is open
WPA.reloadEventResults();
},

/**
* Loads personal bests
*/
getPersonalBests: function(disableLoading) {
WPA.Ajax.getPersonalBests(function(result) {
WPA.MyResults.pbTable.fnClearTable();
WPA.MyResults.pbTable.fnAddData(result);
}, {
userId: WPA.userId,
ageCategory: WPA.filterAge,
eventSubTypeId: WPA.filterType,
eventDate: WPA.filterPeriod,
showAllCats: true
}, disableLoading);
},

/**
* Creates my results tables
*/
createMyResultsTables: function() {

// My Results table
WPA.MyResults.myResultsTable = jQuery('#my-results-table').dataTable(WPA.createTableConfig({
"bServerSide": true,
"sAjaxSource": WPA.Ajax.url,
"sServerMethod": "POST",
"sScrollX": "100%",
"bScrollCollapse": true,
"fnServerParams": function ( aoData ) {
aoData.push(
{name : 'action', value : 'wpa_get_results' },
{name : 'security', value : WPA.Ajax.nonce }
);
},
"aaSorting": [[ 2, "desc" ]],
"aoColumns": [{
"mData": "time_format",
"bVisible": false
},{
"mData": "id",
"sWidth": "60px",
"mRender": WPA.renderDeleteEditResultColumn,
"bSortable": false
},{
"mData": "event_date"
},{
"mData": "event_name",
"mRender" : WPA.renderEventLinkColumn
},{
"mData": "event_location",
"mRender": WPA.renderEventLocationColumn
},{
"mData": "event_sub_type_id",
"mRender" : WPA.renderEventTypeColumn,
"bVisible": false
},{
"mData": "category",
"mRender" : WPA.renderCategoryAndTerrainColumn
},{
"mData": "age_category",
"mRender" : WPA.renderAgeCategoryColumn
},{
"mData": "time",
"mRender": WPA.renderTimeColumn
},{
"mData": "time",
"mRender": WPA.renderPaceMilesColumn,
"bSortable": false
},{
"mData": "position",
"sWidth": "20px",
"mRender": WPA.renderPositionColumn,
"sClass": "datatable-center"
},{
"mData": "garmin_id",
"sWidth": "16px",
"mRender": WPA.renderGarminColumn,
"bSortable": false
}]
}));

// Create the personal bests table
WPA.MyResults.pbTable = jQuery('#my-personal-bests-table').dataTable(WPA.createTableConfig({
"sDom": 'rt',
"bPaginate": false,
"sScrollX": "100%",
"bScrollCollapse": true,
"aaSorting": [[ 2, "asc" ]],
"aoColumns": [{
"mData": "time_format",
"bVisible": false
},{
"mData": "user_id",
"bVisible": false
},{
"mData": "event_cat_id",
"bVisible": false
},{
"mData": "id",
"sWidth": "60px",
"mRender": WPA.renderDeleteEditResultColumn,
"bSortable": false
},{
"mData": "category",
"sClass": "datatable-bold-right-gray"
},{
"mData": "time",
"sClass": "datatable-bold",
"mRender": WPA.renderTimeColumn
},{
"mData": "time",
"mRender": WPA.renderPaceMilesColumn,
"bSortable": false
},{
"mData": "event_name",
"mRender" : WPA.renderEventLinkColumn
},{
"mData": "event_location",
"mRender": WPA.renderEventLocationColumn
},{
"mData": "event_sub_type_id",
"mRender" : WPA.renderEventTypeColumn
},{
"mData": "age_category",
"mRender" : WPA.renderAgeCategoryColumn
},{
"mData": "event_date"
},{
"mData": "club_rank",
"sWidth": "20px",
"bSortable": false,
"mRender": WPA.renderClubRankColumn,
"sClass": "datatable-center"
},{
"mData": "garmin_id",
"sWidth": "16px",
"mRender": WPA.renderGarminColumn,
"bSortable": false
}]
}));

},

/**
* Deletes a result
*/
deleteResult: function(id) {
WPA.deleteResult(id, function() {
WPA.MyResults.reloadResults();
});
},

/**
* performs filter search on the event name
*/
doEventNameFilter: function() {
var defaultText = jQuery('#filterEventName').attr('default-text');
var val = jQuery('#filterEventName').val();
if(val != '' && defaultText != val) {
WPA.filterEventName = val;
WPA.MyResults.myResultsTable.fnFilter( val, 3 );
}
else {
WPA.filterEventName = null;
WPA.MyResults.myResultsTable.fnFilter( '', 3 );
}
}
};

[/code]

allan

I don't actually see the tables - unless I'm being really blind!

However, you have used the bServerSide parameter to tell DataTables to use server-side processing, but your server-side script isn't returning the required data: http://datatables.net/usage/server-side

It rather looks to me that you don't need server-side processing at all, so just drop the bServerSide parameter!

Allan

juslisnen

Allan, apologies as I might have attached the wrong script.

Thanks for suggestion, will look at this now.

juslisnen

Having dropped the bServerSide parameter has made things worse, stopped working all together. To be fair, I'm not a programmer, I have tried to contact the owner of the plugin who wrote this code but no response as yet after few weeks of trying, hence my frustration to get this working.

Thanks anyway Allan

allan

Is http://www.suttonrunners.org/recent-results the correct URL? I don't see a DataTable on the page there? I was guessing based on the Ajax request I can see the page make - but that might be a wrong guess!

Allan

juslisnen

Hi Allan
Yes that link is correct.
I can provide another - http://www.suttonrunners.org/club-info
The widget is in the general sidebar (Recent Race Results). If you select "view all recent results" The list then slowly appears of several runners with time achieved and location.
When I click on an athlete, data table is revealed but with the "Showing 1 to NaN of NaN entries (filtered from 2 total entries)" at the bottom.

In addition I notice the default jpg is not being populated for each user, nor mine which is shown in user dashboard (Wordpress), the one you see above.
I've used debug tools for html and css stuff but never for problem solving scripts.

Beginning to think it could be permission related.

allan

> When I click on an athlete

Ah! That is what I was missing.

Okay, so the Javascript makes an Ajax request to the server based on:

[code]
"sAjaxSource": "http://www.suttonrunners.org/wp-admin/admin-ajax.php",
"sServerMethod": "POST",
"fnServerParams": "function (aoData) {
aoData.push(
{name : 'action', value : 'wpa_get_results' },
{name : 'security', value : WPA.Ajax.nonce },
{name: 'user_id', value: WPA.currentUserProfileId }
);
}",
[/code]

And it gets back:

[code]
{
"sEcho": 1,
"iTotalRecords": "1",
"iTotalDisplayRecords": null,
"aaData": []
}
[/code]

Its the `iTotalDisplayRecords` what is the problem (actually `iTotalRecords` should be 0 if there are no records to show as well).

So however that script it executing in WordPress - it isn't returning valid information - see: http://datatables.net/usage/server-side

Allan

juslisnen

Ok, understood. At least I know where to start looking.

Thanks again Allan