CODEWITHSUNDEEP
jquery
Maher Khalil
Maher Khalil

Reputation: 539

Bind jquery datatable to C# Webmethod

i need to create a datatable (jquery) bind to ajax (C# WebMethod)

1-WebMethod return json

 public string  GetProjects()
    {

        DataTable dt = new DataTable("ProjectData");
        string Conn = System.Configuration.ConfigurationManager.ConnectionStrings["GPS_TrackingConnectionString"].ConnectionString;

        SqlConnection conn = new SqlConnection(Conn);

        conn.Open();

        SqlCommand comm = new SqlCommand("SP_GetAll_Projects", conn); // / + branch, conn);
        comm.CommandType = CommandType.StoredProcedure;

        dt.Load(comm.ExecuteReader());
        conn.Close();

        DataSet ds = new DataSet();
        ds.Tables.Add(dt);
        JavaScriptSerializer js = new JavaScriptSerializer();
        //return ds.GetXml();
        //Context.Response.Write(js.Serialize(dt));
        var list = JsonConvert.SerializeObject(dt,
 Formatting.None,
 new JsonSerializerSettings()
 {
     ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore
 });

        return list;
        // return (js.Serialize(dt));
    }
}

2- Client Script

  $(document).ready(function () {
        $("#myTable").dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "bServerSide": true,
            "sAjaxSource": "Query.asmx/GetCars",

            "fnServerData": function (sSource, aoData, fnCallback) {
                $.ajax({
                    "type": "POST",
                    "dataType": 'json',
                    "contentType": "application/json; charset=utf-8",
                    "url": sSource,
                    // "data": "{'sEcho': '" + aoData[0].value + "'}",
                    "success": function (msg) {
                        alert(msg.d);
                        fnCallback(msg.d);
                    }
                });
            },
            "columns": [
       { "data": "Name" } 

            ]

        });
    });

3- HTML

        <table id="myTable"   width="100%">
            <thead>
                <tr>

                    <th>Name</th>

                </tr>
            </thead>

        </table>

4- json Result

This XML file does not appear to have any style information associated with it. The document tree is shown below. [{"id":1,"Name":"mh","StartDate":null,"EndDate":null},{"id":2,"Name":"rf","StartDate":null,"EndDate":null}] 4- the current situation the alert in the success show the correct data but the table does not show data my problem is how to tell the datatable that the table column name goes to the data column name NO Console errors

Thank You

Upvotes: 0

Views: 845

Answers (2)

abhishek khandait
abhishek khandait

Reputation: 2157

if your json response is [{"id":1,"Name":"mh","StartDate":null,"EndDate":null},{"id":‌​2,"Name":"rf","Start‌​Date":null,"EndDate"‌​:null}]

change your code to

$(document).ready(function () {
    $("#myTable").dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bServerSide": true,
        "sAjaxSource": "Query.asmx/GetCars",

        "fnServerData": function (sSource, aoData, fnCallback) {
            $.ajax({
                "type": "POST",
                "dataType": 'json',
                "contentType": "application/json; charset=utf-8",
                "url": sSource,
                // "data": "{'sEcho': '" + aoData[0].value + "'}",
                "success": function (msg) {
                    alert(msg.d);
                    fnCallback(msg.d);
                }
            });
        },
       "columns": [
        { data: 'id' },
        { data: 'Name' },
        { data: 'StartDate' },
        { data: 'EndDate' }]
    });
});

Upvotes: 0

user8603030
user8603030

Reputation:

try this

var  Table1 = $('#myTable').DataTable({
        ajax: {
            url: "Query.asmx/GetCars",
            type: "POST",
            "datatype": "json",
            dataSrc: ""
        },
        "columns": [
                { "data": "Name", "name": "Name" }
        ],
        "bDestroy": true,
        "serverSide": true,
        "pageLength": 25,
        "processing": true,
        "searching": false,
        "bSort": false,
    });




 <table id="myTable"   width="100%">
       <thead>
            <tr>
                <th>Name</th>
            </tr>
        </thead>
       <tbody></tbody></table>

Upvotes: 0

Related Questions