I have Jquery Datatable that uses server side pagination and it only works for forward selection of pagination numbers,
Which means if the dataset is having 4 pages I can navigate only one by one sequentially, If I press page 3 after page 1 results shows for the data related to 2nd page.
as per my understanding jquery code is sending incorrect draw value, But i don't know how to change it.
this is the jquery code,
$("#ReportTable2").DataTable({
"processing": true,
"serverSide": true,
"filter": false,
"searching": false,
"lengthChange": false,
"pageLength": 5,
"lengthMenu": [10, 25, 50, 100],
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [0, 6] }
],
"ajax": {
"url": "/Admin/RptVisitorNotLoggedOut",
"type": "POST",
"datatype": "json",
},
"columnDefs": [
{
"visible": false,
"targets": -1,
}
],
"columns": [
{ "data": "VisitorInID", "name": "VisitorIn ID", "autoWidth": true },
{ "data": "SiteName", "name": "Site Name", "autoWidth": true },
{ "data": "RFIDCardNumber", "name": "RFID", "autoWidth": true },
{ "data": "VisitorName", "name": "Visitor Name", "autoWidth": true },
{ "data": "IDNumber", "name": "ID Number", "autoWidth": true },
{ "data": "ContactNumber", "name": "Contact Number", "autoWidth": true },
{ "data": "Company", "name": "Company", "autoWidth": true },
{ "data": "PurposeOfVisit", "name": "Purpose Of Visit", "autoWidth": true },
{ "data": "ResposiblePersonName", "name": "Resposible Person Name", "autoWidth": true },
]
});
server side code,
int siteID = (Session["SiteID"] != null) ? (int)Session["SiteID"] : 0;
if (siteID == 0)
{
siteID = (int)this.DetermineSiteID();
Session["SiteID"] = siteID;
}
// new Code for pagination included
var draw = Request.Form["draw"].FirstOrDefault().ToString();
//var start = Request.Form["start"].FirstOrDefault().ToString();
var length = Request.Form["length"].FirstOrDefault().ToString();
var sortColumn = Request.Form["columns[" + Request.Form["order[0][column]"].FirstOrDefault() + "][name]"].FirstOrDefault().ToString();
var sortColumnDirection = Request.Form["order[0][dir]"].FirstOrDefault().ToString();
var searchValue = Request.Form["search[value]"].FirstOrDefault().ToString();
int pageSize = length != null ? Convert.ToInt32(length) : 0;
int skip = 0;
int recordsTotal = 0;
var userData = rule.GetVisitorSummerybyDates(DateTime.Parse(toDate), DateTime.Parse(fromDate), siteID.ToString());
if (!string.IsNullOrEmpty(searchValue) && searchValue != "\0")
{
userData = (List<VisitorInOutDetails>)userData.Where(
m => m.IDNumber.Contains(searchValue)
|| m.ContactNumber.Contains(searchValue)
|| m.Company.Contains(searchValue));
}
recordsTotal = userData.Count();
skip = (Convert.ToInt32(pageSize) * (Convert.ToInt32(draw) - 1));
var data = userData.Skip(skip).Take(pageSize).ToList();
var jsonData = new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data };
return Json(jsonData);
Any idea on how to change it would much appreciated.
You should not use draw value to determine your paging logic in backend, use start and length values instead.
You just need to change your skip logic based on start and length. Return the draw value in the response as is from the request. I don't see any issue with Frontend code.
According to Datatable:
Draw counter. This is used by DataTables to ensure that the Ajax returns from server-side processing requests are drawn in sequence by DataTables (Ajax requests are asynchronous and thus can return out of sequence)
To debug this you can try to log your input parameters in each request (or you can just see that in browser console as well) and examine draw, start and length values in the request payload.