Showing 1 to NaN of NaN entries (filtered from 2 total entries)
Showing 1 to NaN of NaN entries (filtered from 2 total entries)
juslisnen
Posts: 5Questions: 0Answers: 0
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]
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]
This discussion has been closed.
Replies
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
Thanks for suggestion, will look at this now.
Thanks anyway Allan
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.
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
Thanks again Allan