Data Table with server side processing returns same set of data rows on pagination

pathumj

I'm absolute beginner to DataTable,

Here's the serverside code,

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 = start != null ? Convert.ToInt32(draw) : 0;
                int recordsTotal = 0;

                var userData = rule.GetFreequentVisitorDetails().Where(m =>  m.ApprovalStatus == (int)EnumVisitorApprovalStatus.Pending);
                

                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();

                var data = userData.Skip(skip).Take(pageSize).ToList();

                var jsonData = new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data };

                return Json(jsonData);

and the jquery code

function loadFreequentVisitorData() {
        $("#FrqntVisitorTable1").DataTable({
            "processing": true,
            "serverSide": true,
            "searching": false,
            "filter": false,
            "lengthChange": false,
            "pageLength": 8,
            
            "ajax": {
                "url": "/Admin/GetFreequentVisitorsList",
                "type": "POST",
                "datatype": "json",
            },
            "columnDefs": [


            ],
            "columns": [
                { "data": "VisitorID", "name": "ID", "autoWidth": true },
                { "data": "VisitorName", "name": "Visitor Name", "autoWidth": true },
                { "data": "IDNumber", "name": "NIC", "autoWidth": true },
                { "data": "Company", "name": "Company", "autoWidth": true },



                {
                    "data": "ApprovalStatus", "name": "Approval Status", "autoWidth": true, "render": function (data, type, row) {

                        return (row.ApprovalStatus == 1) ? "Approved" : (row.ApprovalStatus == 3) ? "Pending" : "Not Mentioned"

                    }
                },

                {
                    "data": "VisitorID", "name": "Action", "autoWidth": true, "render": function (data, type, row) {
                        if ('@ViewBag.IsApprover' && row.ApprovalStatus == 3) {
                            return '<button type="button" class="btn btn-secondary" onClick="ApproveRecord(' + row.VisitorID + ')" >Approve</button>' +
                                '<button type="button" class="btn btn-secondary" onClick="RejectRecord(' + row.VisitorID + ')" >Reject</button>'
                        }
                    }
                },


            ]
        });
    }

And this gives only first 10 records only, if there's 20 records in total pagination shows for 4 pages, and first two pages shows correct records, but when i goes to 3rd page it shows the first 5 records again.

Can someone please assist me on this !!!

allan

if there's 20 records in total pagination shows for 4 pages

There should be only 2 pages if you have 10 records shown and 20 in total.

What is recordsTotal being returned as? Can you link to a page showing the issue please?

Allan