Server-side processing - pagination and row numbers

newton

Hi!
I've some problems with dataTable (using C#, MVC4). I've data returned from server and I'm displaying 10 items per page (all items: 26; pages: 3) and first column is for row numbering and here's the problem. On each page row numbers are from 1 to 10 even on the 2nd and 3rd there is 1 to 10. I'm looking for solution for few days, and try some hints but unfortunately still the same situation. So I post my code and maybe you'll have some new hints.

My server side code is based on this article: http://www.codeproject.com/Articles/155422/jQuery-DataTables-and-ASP-NET-MVC-Integration-Part#BackgroundSSP


Debug: http://debug.datatables.net/aduqek

View page code:
[code]

@using (Html.BeginForm())
{




Lp.
Data rozpoczęcia
Data zakończenia
Status
Kwota
Tytułem
Opcje







@Html.ActionLink("Wróć", "Manage", "Account", null, new { @class = "a-as-btn" })



$(document).ready(function () {
$('#dataTableMyPayments').dataTable(
{
// also try this solution for unmbering but doesn't work for me
// "fnDrawCallback": function (oSettings) {
// /* Need to redo the counters if filtered or sorted */
// //if (oSettings.bSorted || oSettings.bFiltered) {
// for (var i = 0, iLen = oSettings.aiDisplay.length; i < iLen; i++) {
// $('td:eq(0)', oSettings.aoData[oSettings.aiDisplay[i]].nTr).html(i + 1);
// }
// //}
// },
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
var index = (iDisplayIndexFull + 1);
$("td:first", nRow).html(index);
return nRow;
},

"oLanguage":
{
"sLengthMenu": "Wyświetl _MENU_ wierszy na stronie",
"sZeroRecords": "Brak wpisów",
"sInfo": "Od _START_ do _END_ z _TOTAL_ wszystkich",
"sInfoEmpty": "Od 0 do 0 z 0 wszystkich",
"sInfoFiltered": "(filtered from _MAX_ total records)",
"oPaginate":
{
"sPrevious": "Poprzednia strona",
"sNext": "Następna strona"
}
},
"bPaginate": true,
"sPaginationType": "full_numbers",
"bLengthChange": true,
"bFilter": false,
"bSort": false,
"bInfo": true,
"bAutoWidth": false,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/Payment/MyPayments",
"sServerMethod": "POST"
});
});

}
[/code]

Server side code:
[code]
[HttpPost]
public JsonResult MyPayments(jQueryDataTableParamModel param)
{
var userPayments = this.db.Payments.Where(p => p.Buyer == CurrentUser.Instance.UserId).ToList();
if (userPayments != null)
{
var sortedPayments = userPayments.OrderBy(p => p.Started);
var displayPayments = sortedPayments.Skip(param.iDisplayStart).Take(param.iDisplayLength);

var result = from payment in displayPayments
select new[] {
"0",
payment.Started != null ? payment.Started.Value.ToString() : String.Empty,
payment.Ended != null ? payment.Ended.Value.ToString() : String.Empty,
payment.PaymentStatus.Name,
NSTools.GorszeNaZlotowki(payment.Price).ToString(),
""+ payment.PaymentStatusName() + "",
String.Empty
};

var tmp = Json(new
{
sEcho = param.sEcho,
iTotalRecords = userPayments.Count,
iTotalDisplayRecords = userPayments.Count,
aaData = result
},
JsonRequestBehavior.AllowGet);

return tmp;
}

return Json(new
{
sEcho = "",
iTotalRecords = 0,
iTotalDisplayRecords = 0,
aaData = new List()
}, JsonRequestBehavior.AllowGet);
}
[/code]

And jQueryDataTableParamModel class code: (from the article mentioned at the beginning
[code]
public class jQueryDataTableParamModel
{
///
/// Request sequence number sent by DataTable,
/// same value must be returned in response
///
public string sEcho { get; set; }

///
/// Text used for filtering
///
public string sSearch { get; set; }

///
/// Number of records that should be shown in table
///
public int iDisplayLength { get; set; }

///
/// First record that should be shown(used for paging)
///
public int iDisplayStart { get; set; }

///
/// Number of columns in table
///
public int iColumns { get; set; }

///
/// Number of columns that are used in sorting
///
public int iSortingCols { get; set; }

///
/// Comma separated list of column names
///
public string sColumns { get; set; }
}
[/code]

Will be grateful for any help and hints.

EDIT:
some weird display problem at server-side code there should be: aaData = result

Regards,
NewToN

newton

Solved by this way.
When data are delivered by server-side processing, rows numbering also must be done at server-side so some modifications in code:

View Page:
[code]

$(document).ready(function () {
$('#dataTableMyPayments').dataTable(
{
// !! HERE: numbering at server-side so this function is unnecessary
//"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
// var index = (iDisplayIndexFull + 1);
// $("td:first", nRow).html(index);
// return nRow;
//},

"oLanguage":
{
"sLengthMenu": "Wyświetl _MENU_ wierszy na stronie",
"sZeroRecords": "Brak wpisów",
"sInfo": "Od _START_ do _END_ z _TOTAL_ wszystkich",
"sInfoEmpty": "Od 0 do 0 z 0 wszystkich",
"sInfoFiltered": "(filtered from _MAX_ total records)",
"oPaginate":
{
"sPrevious": "Poprzednia strona",
"sNext": "Następna strona"
}
},
"bPaginate": true,
"sPaginationType": "full_numbers",
"bLengthChange": true,
"bFilter": false,
"bSort": false,
"bInfo": true,
"bAutoWidth": false,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/Payment/MyPayments",
"sServerMethod": "POST"
});
});

[/code]

Server-side code:
[code]
.
.
var displayPayments = sortedPayments.Skip(param.iDisplayStart).Take(param.iDisplayLength);

var result = from payment in displayPayments
select new[] {
(++param.iDisplayStart).ToString(), // !! HERE: numbering on server-side
payment.Started != null ? payment.Started.Value.ToString() : String.Empty,
payment.Ended != null ? payment.Ended.Value.ToString() : String.Empty,
payment.PaymentStatus.Name,
NSTools.GorszeNaZlotowki(payment.Price).ToString(),
""+ payment.PaymentStatusName() + "",
String.Empty
};
.
.

[/code]