Why does Datatables paging using AjaxSource and MVC only return one page?

Question

Trying to page the JQuery DataTables control using AjaxSource pointing to a Action in my controller. I can't get the datatables paging control to display more then one page, despite the ajax call and the datatable itself working. Using DataTables 1.8.1., JQuery 1.4.1, MVC2

To demonstrate the issue ive created a list of string arrays,

var data = new List<string[]>() {
                new string[] {"1", "a1", "a2", "a3"},
                new string[] {"2", "b1", "b2", "b3"},
                new string[] {"3", "c1", "c2", "c3"},
                ...
                ...
                new string[] {"39", "c1", "c2", "c3"},
                new string[] {"40", "a1", "a2", "a3"}                  
        };

I page the list and return it from my controller

 var pagedData = data.Skip(param.iDisplayStart*param.iDisplayLength)
                     .Take(param.iDisplayLength);

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

My DataTable is built via

    $(document).ready(function ()
    {

        $('#myDataTable').dataTable({
            "bServerSide": true,
            "sAjaxSource": "../ApplicationLog/AjaxHandler",
            "bProcessing": true,
            "sPaginationType": "full_numbers",
            "aoColumns": [
                    { "sName": "COLONE" },
                    { "sName": "COLTWO" },
                    { "sName": "COLTHREE" },
                    { "sName": "COLFOUR" }
                ]
        });
    });

This Ajax call calls the Action and publishes the first 10 rows to my table, which reports that it's 'Showing 1 to 10 of 10 entries (filtered from 40 total entries)'.

The issue I have is with the pager on the datatable, which only displays the buttons

'First', 'Previous', '1', 'Next', 'Last'

Even though I have four pages of data to show. If I click any of 'First', 'Previous', 'Next' or 'Last', my action is not called.

Am I missing something obvious? Any help would be appreciated.

Thanks in advance, Ben

Just to clarify, the "AjaxHandler" action is not even being called when you click on "First, previous, etc."? In other words, you've set a break point on that action method probably right? I'm also curious as to what values are in "param" when the action is called. — JasperLamarCrabb

Keith.Abramo Keith.Abramo · Accepted Answer · 2011-07-23T13:39:52

I've had this issue in the past. Try setting

iTotalDisplayRecords = data.Count()

I think it uses iTotalDisplayRecords to check something like "out of the filtered records are there more to page on"

In this case you are telling datatables "My search returned 10 records, there are 40 total, but I only want to show the 10 in the filtered result"

So since datatables thinks there are only 10 filtered rows to display and you are displaying those 10 on that page, it doesn't think it needs to do any paging.

Why does Datatables paging using AjaxSource and MVC only return one page?

1 Answers