datatables and MVC

Question

i am having issues with paging on server side with datatables jquery plugin. The paging control at the bottom of the grid shows

Showing 1 to 10 of 10 entries (filtered from 7,253 total entries)

but am not filtering any records. If I click the next or previous links no ajax requests are being sent back to the server. I would expect to see

Showing 1 to 10 of 7253 entries.

Controller Code

    public ActionResult GetDataTable(DataTableParamModel param)
    {

        var allhotelscount = db.Businesses.OfType<Hotel>().Count();

        var filteredhotels = db.Businesses.OfType<Hotel>().OrderBy(h => h.Name);


        IEnumerable<DataTableHotel> displayedhotels = from c in filteredhotels

               .Skip(param.iDisplayStart).Take(param.iDisplayLength)
                select new DataTableHotel
                {
                    Id = c.Id,
                    Name = c.Name,
                    CityState = c.PhysicalCity + ", " + c.PhysicalState,
                    PhoneNumber = c.PhoneNumber,
                    PrimaryContact = c.PrimaryContact.FirstName + " " + c.PrimaryContact.LastName,
                    PrimaryContactPhone = c.PrimaryContact.OfficePhone,
                    PrimaryContactEmail = c.PrimaryContact.EmailAddress,
                };


        return Json(new
        {
            sEcho = param.sEcho,
            iTotalRecords = allhotelscount,
            iTotalDisplayRecords = displayedhotels.Count(),
            aaData = displayedhotels
        },
        JsonRequestBehavior.AllowGet);




    }

View Code:

            <table id="myDataTable" class="display">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>City, State</th>
                        <th>Phone</th>
                        <th>Contact</th>
                        <th>Phone</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table> 

<script type="text/javascript">
$(document).ready(function () {

    $('#myDataTable').dataTable({
        "bServerSide": true,
        "sAjaxSource": "/Hotel/GetDataTable",
        "bProcessing": true,
        "aoColumns": [
                    { "mData": "Id" },
                    { "mData": "Name" },
                    { "mData": "CityState" },
                    { "mData": "PhoneNumber" },
                    { "mData": "PrimaryContact" },
                    { "mData": "PrimaryContactPhone" },
                    { "mData": "PrimaryContactEmail" },
        ]
    });
});

Answer 1

You passed a wrong value to iTotalDisplayRecords, see below code:

return Json(new
        {
            sEcho = param.sEcho,
            iTotalRecords = allhotelscount,
            iTotalDisplayRecords = allhotelscount,
            aaData = displayedhotels
        },
        JsonRequestBehavior.AllowGet);