Advertise with us

DataTables in ASP.net using JSON

Using JQuery DataTables in ASP.net and trying to return JSON data to it from C# WebMethod. 

C# method... 

[System.Web.Services.WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string Data()
{
    string json =string.Empty;
 
    using (IDataReader reader = DBUtil.GetReader("data", "data", "pram"))
    {
        if (reader !=null)
        {
            DataTable dt = new DataTable();
            dt.Load(reader);
            reader.Close();
            json =JsonHelper.GetJsonFromDataTable(dt);
        }
    }
    return json;   //also tried by adding "{\"aaData\": " + json + "}"
}

Working.... 

var source = {};
$.ajax({
    type: 'POST',
    dataType: 'json',
    url: "page.aspx/Data",
    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);
    }
});

Not working....... (not even hitting the method break point) 

$(".JGrid").dataTable({
    "bJQueryUI": true,
    "sAjaxSource": "../page.aspx/Data", //also tried with var 'source' (declared sbove)
    "aoColumns": [
        { "sTitle": "Col1name", "sWidth": "33%" },
        { "sTitle": "Col2name", "sWidth": "33%" },
        { "sTitle": "Col3name", "sWidth": "33%" }
    ]
});

Last updated:12/10/2014 6:39:38 AM

2 Answers

Jeet Verma
Jeet Verma

$("#table-tripNote").dataTable({
                "oLanguage": {
                    "sZeroRecords": "No records to display",
                    "sSearch": "Search from all Records"
                },
                "bProcessing": true,
                "bServerSide": true,
                "bDestroy": true,
                "sAjaxSource":"frmTrip.aspx/GetMemberNotesByTrip",
                "sPaginationType": "full_numbers",
                "bDeferRender": true,
                "aoColumns":
                            [
                                null,
                                null,
                                null,
                                null,
                                null,
                                null,
                                null
                            ],
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "contentType": "application/json; charset=utf-8",
                        "type": "GET",
                        "url": sSource,
                        "data": aoData,
                        "success":
                                                    function (msg) {
 
                                                        var json = jQuery.parseJSON(msg.d);
                                                        fnCallback(json);
                                                        $("#table-tripNote").show();
                                                    }
                    });
                }
            });

This was working for me

Last updated:12/10/2014 6:39:38 AM
Goti Bandu
Goti Bandu

$(".JGrid").dataTable({
    "bJQueryUI": true,
"bServerSide": true,
    "sAjaxSource": "/page.aspx/Data", //also tried with var 'source' (declared sbove)
    "aoColumns": [
        { "sTitle":"Col1name", "sWidth": "33%" },
        { "sTitle": "Col2name", "sWidth": "33%" },
        { "sTitle": "Col3name", "sWidth": "33%" }
    ]
});

Last updated:12/10/2014 6:39:38 AM

Answer