server-side from ASP.NET webmethod

scavok

I really want to use DataTables to display data on my site, but some of the queries are pretty resource intensive, and can have results of 40,000+ records, so I want to do serverside processing. However, I just can't get the datatables javascript to talk to the webmethod in my codebehind. A very similar ajax call works fine, but when using ajax within DataTables, I get zero feedback in Google Chrome's developer tools. Any idea to find out what is happening with the POST?

This works fine:

        var source = {};
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: "/Reports/candftest.aspx/dtquery",
            contentType: 'application/json; charset=utf-8',
            cache: false,
            data: {},
            success: function (response) {
                source = $.parseJSON(response.d);
                alert(response.d); // i can see Json formatted data

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
            }
        });

But this doesn't work, or even give an error to work off of:

        $(document).ready(function () {
            $('#cfTable').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": {
                    "type": "POST",
                    "dataType": 'json',
                    "url": "/Reports/candftest.aspx/dtquery",
                    "contentType": "application/json; charset=utf-8",
                    "data:": {},
                    "success": function (response) {
                        var source = $.parseJSON(response.d);
                        alert(response.d); // i can see Json formatted data
                        return source
                    },
                    "error": function (XMLHttpRequest, textStatus, errorThrown) {
                        alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
                    }
                },
                "columns": [
                    { "data": "id" },
                    { "data": "fname" },
                    { "data": "mname" },
                    { "data": "lname" },
                    { "data": "nickname" },
                    { "data": "dob" }
                ]
            });
        });

For my code-behind, I just set up some test data to use until I can get it at least populating, before I start interacting with my database and do any processing:

        private const int TOTAL_ROWS = 995;
        private static readonly List<DataItem> _data = CreateData();

        public class DataItem
        {
            public string id { get; set; }
            public string fname { get; set; }
            public string mname { get; set; }
            public string lname { get; set; }
            public string nickname { get; set; }
            public string dob { get; set; }
        }

        public class DataTableData
        {
            public int draw { get; set; }
            public int recordsTotal { get; set; }
            public int recordsFiltered { get; set; }
            public List<DataItem> data { get; set; }
        }

        private static List<DataItem> CreateData()
        {
            Random rnd = new Random();
            List<DataItem> list = new List<DataItem>();
            for (int i = 1; i <= TOTAL_ROWS; i++)
            {
                DataItem item = new DataItem();
                item.id= id.ToString();
                item.fname = "testa";
                item.mname = "testb";
                item.lname = "testc";
                item.nickname = "testd";

                DateTime dobdt = new DateTime(1900 + rnd.Next(1, 100), rnd.Next(1, 13), rnd.Next(1, 28));
                item.dob= dobdt.ToShortDateString();
                list.Add(item);
            }
            return list;
        }

        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public static string dtquery(string sEcho, int iDisplayStart, int iDisplayLength)
        {
            DataTableData dataTableData = new DataTableData();
            List<DataItem> list = new List<DataItem>();

            foreach (DataItem dataItem in _data)
            {
                list.Add(dataItem);
            }

            dataTableData.data = list;

            JavaScriptSerializer jss = new JavaScriptSerializer();
            return jss.Serialize(dataTableData);
        }

ahmeticat

in ajax method

use "sServerSide" instead of "serverside"