Scroller not working for me server side, only gives me 10 total results

gnychis

Problem site link: http://abad02f2af7545e4bca5777aa198b4fa.cloudapp.net/

I am trying to get Scroller on the server side working with an ASP.NET AJAX implementation. The total number of records that I currently have is 51. However, as it is currently setup it only gives me 10 records and the scroller length on the right hand side only indicates there are 10 records (it is not long enough to suggest there are 51). These 10 records are displayed OK. The text beneath my table says: "Showing 1 to 10 of 51 entries." If I scroll down, I do NOT get another call on my server side requesting more data.

On the client side, I try to setup my Scroller code as follows:

[code]
var oTable = $('#unitTableData').dataTable({
"bServerSide": true, // All processing will be done in our controller
"sAjaxSource": "/UTS/UnitListHandler", // Where our controller is
"bProcessing": false,
"sScrollY": "300px", // Fix the height of the table
"sDom": "rtiS", // Dynamically request the content
"oScroller": { // Let the user know that data is loading
"loadingIndicator": true
},
"aoColumns": [ // Per-column settings and alignments
{ "bVisible": false }, // Primary key "id"
{ }, // C Number
{}, // Serial number
{}, // Label
{ "bVisible": false }, // IP Address
{ sWidth: '20%', sClass: "alignCenter" }, // Build
{}, // Location
{ "bVisible": false } // Location label
]
});
[/code]

On the server side, I return the follow Json data:

[code]
public ActionResult UnitListHandler(jQueryDataTableParamModel param)
{
var currUnitResults = pacificRepo.Units.OrderBy(p => p.c_number).Skip(param.iDisplayStart).Take(param.iDisplayLength).ToList();

return Json(new
{
sEcho = param.sEcho,
iTotalRecords = pacificRepo.Units.Count(), // Value = 51
iTotalDisplayRecords = pacificRepo.Units.Count(), // Value = 51
aaData = FormatUnitData(currUnitResults) // An array of 10 items (since
},
JsonRequestBehavior.AllowGet);
}
[/code]

Does anyone see what I am doing wrong here? It returns 10 items as I believe it should, since that is what the default iDisplayLength is set to. I think that iTotalRecords and iTotalDisplayRecords is correct. But why would the scroller bar only be long enough for 10 items, and why are more not requested when i scroll down on the client side?

I would sincerely appreciate any help/suggestions!

allan

Please link to a test case, as required in the forum rules: http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read

Allan

gnychis

Hi Allan,

Sorry about that. I've included a full test case that replicates this behavior here using ASP.NET:

https://github.com/gnychis/ScrollerIssue

The client-side code is in my View here: https://github.com/gnychis/ScrollerIssue/blob/master/ScrollerIssue/Views/Home/Index.cshtml#L41

The server-side code is in my Controller here: https://github.com/gnychis/ScrollerIssue/blob/master/ScrollerIssue/Controllers/HomeController.cs#L27

I hope that this is helpful.

allan

I'm sorry, but I have no way to run an ASP.NET project at the moment (using a Mac here...). Is the running page not linkable?

Allan

gnychis

Hi Allan,

I was able to publish the example here:

http://scrollerissue.azurewebsites.net/

I hope that this is helpful. Sorry for it being in ASP.NET. If you find it extremely difficult to help me resolve the issue in ASP.NET, I can try to put it in another language. However, I've been trying to keep it in the language that I observe the issue in. Thanks for your help!

gnychis

Also, the server side URL that is queried is:

http://scrollerissue.azurewebsites.net/Home/UnitListHandler

You could try to query it with your client side to see if there is something wrong with the response it gives.

allan

Super - thanks for the link!

I think I see the problem - the Scroller Javascript isn't being included on your page. The Scroller CSS is, but you need the Javascript as well.

Allan

gnychis

Wowwwww, how did I miss that?!? Thanks so much Allan. Now that I included the Javascript, it's clearly working ;)

One last issue/suggestion. When using the bootstrap table look, it puts a small spacing in between the rows (5px). The way that "Loading..." for scroller works is that it just seems to always be shown, and then when the table rows come it is naturally hidden behind them due to its z-index. With spacing between the rows, however, you can still see it:

http://imgur.com/XcQ2pMG

I'll investigate a clean solution to this via the Javascript such as hiding/showing the div.

allan

I must confess I'd never thought of that use case! I sort of figured that the loading indicator would always be behind the table, so there was no need to show / hide it...

That assumption was obviously wrong! I'll need to look at adding that ability into a future release.

Allan