JQuery Datatables服务器端处理错误

Question

I am using the latest Nuget Datatables Package.

From the Nuget Package I am using the following two scripts

<link rel="stylesheet" href="/Content/DataTables/css/jquery.dataTables.min.css" type="text/css" />

<script src="/Scripts/DataTables/jquery.dataTables.min.js"></script>

The following is my client table, it contains 28 records in the database and I am trying to display 10 records

Below is my cshtml

<script>
    $(document).ready(function () {
        $('#clientTable').DataTable({
            "order": [[1, "asc"]],
            "serverSide": true,
            "processing": true,
            "paging": true,
            "bLengthChange": false,
            "iDisplayLength": "10",
            "ajax": {
                "url": "/Client/GetAll",
                "type": "POST",
                "dataType": "json"
            },
            "columns":
                [
                {
                    data: "ID", title: "", render: function (o) {
                        var template = "<div class=\"btn-group\"><button type=\"button\" class=\"btn btn-primary dropdown-toggle\" data-toggle=\"dropdown\"> Options <span class=\"caret\"></span></button>"
    + "<ul class=\"dropdown-menu\" role=\"menu\">"
    + "<li style=\"display: @InspectionMethods.ValidateDisplayAccessRights(AccessRights.ViewInspections)\">"
    + "<a href=\"/Client/View/" + o + "\">Edit</a>"
    + "</li>"
    + "<li class=\"divider\"></li>"
    + "<li style=\"display: @InspectionMethods.ValidateDisplayAccessRights(AccessRights.ManageEmployees)\">"
    + "    <a href=\"/Client/Inspections/" + o + "\">View Inspections</a>           "
    + "</li></ul></div>";
                        return template;
                    }
                },
                { data: "Name", title: "Company" },
                { data: "CellNumber", title: "Contact Number" }
                ]
        });
    });
</script>


<div class="row">
    <div class="col-md-12">
        <div class="portlet">
            <div class="portlet-header">
                <h3 class="pull-right">
                    <a style="display: @InspectionMethods.ValidateDisplayAccessRights(AccessRights.ManageEmployees)" href="@Url.Action("CreateClient")" class="btn btn-success pull-right">New Client</a>
                </h3>
            </div> <!-- /.portlet-header -->
            <div class="portlet-content">
                <table id="clientTable" class="table table-striped table-bordered table-hover table-highlight"></table>
            </div> <!-- /.portlet-content -->
        </div> <!-- /.portlet -->
    </div> <!-- /.col -->
</div> <!-- /.row -->

Here is my server side

    [HttpPost]
    public ActionResult GetAll(JQDTParams model)
    {
        using (var context = new DatabaseContext())
        {
            var clients = context.Clients.Where(model).ToList();
            var result = new
            {
                model.sEcho,
                model.draw,
                recordsFiltered = context.Clients.Count(model), // 28
                recordsTotal = context.Clients.Count(), // 28
                data = clients // 10 Items in the list
            };
            return Json(result, JsonRequestBehavior.AllowGet);
        }
    }

The result I am getting looks like this

EDIT 1:) Pages now display.

Pressing on Page 1, 2, or 3 it works and displays the correct data.

Now if I go to Page one and Press "Next" I get the result above where the text then says Showing 0,101 to 28 of 28 entries and if I press "Next" again to go to page three it doesn't do anything

Answer 1

Found the problem

It seems that jquery.Datatables handled the "iDisplayLength" as a string instead of an int, simple change

 $(document).ready(function () {
        $('#clientTable').DataTable({
            "order": [[1, "asc"]],
            "serverSide": true,
            "processing": true,
            "paging": true,
            "bLengthChange": false,
            "iDisplayLength": 10, //Here was the problem