Fetching Json string of C# datatable and displaying in jquery Datatable

Question

Main thing is i am new in Jquery Datatable and from last 2 days I am trying to use it, using json string. But i am not getting require output.

Here is my HTML :

 <body>
    <div class="container">
        <table id="MydataTableDiv">
            <thead>
              <tr>
               <th>NAME</th>
               <th>MARKS</th>
              </tr>
            </thead>
        </table>
    </div>
</body>

Here is my Script :

 $(document).ready(function () {
    $("#MydataTableDiv").DataTable({
        serverSide: true,
        processing: true, 
        ajax: {
            "url": "../Home/GetData",
            "dataSrc":''
        },
        columns: [
            { data: "NAME" },
            { data: "MARKS" }
        ],
    });
});

And finally , My Home Controller :

public JsonResult GetData()
    {
        DataTable _dt = new DataTable();

        _dt.Columns.Add("NAME");
        _dt.Columns.Add("MARKS");

        for (int i = 0; i < 10; i++)
        {
            DataRow _dr = _dt.NewRow();
            _dr["NAME"] = "A_" + i;
            _dr["MARKS"] = i * 10;
            _dt.Rows.Add(_dr);
        }

        string JsonResult = JsonConvert.SerializeObject(_dt);
        return Json(new {data=JsonResult }, JsonRequestBehavior.AllowGet);
    }

Here is my Json string returned from controller :

[{"NAME":"A_0","MARKS":"0"},{"NAME":"A_1","MARKS":"10"},{"NAME":"A_2","MARKS":"20"},{"NAME":"A_3","MARKS":"30"},{"NAME":"A_4","MARKS":"40"},{"NAME":"A_5","MARKS":"50"},{"NAME":"A_6","MARKS":"60"},{"NAME":"A_7","MARKS":"70"},{"NAME":"A_8","MARKS":"80"},{"NAME":"A_9","MARKS":"90"}]

This code gives me a blank and empty table which contains all paging, filteration options. please help me what is mistake in above code or is there any other way to use it for dynamic data.

can you verify what is the response from Ajax call in your network tab of developer tools? Is it what your datatable is expecting? — G_S
– G_S, Commented Mar 18, 2018 at 14:28
Is that what a datatable expects? can you post what you got in JSON format to your question if possible. (Because I expect that JSON is not what a datatable expects) — G_S
– G_S, Commented Mar 20, 2018 at 13:28
Check the answer provided and let me know if it works for you — G_S
– G_S, Commented Mar 20, 2018 at 17:34

G_S · Accepted Answer · 2018-03-21 04:21:03Z

1

From what I have observed, datatables need a JSON object rather than a string. You are returning a string which can be converted to a JSON.

Made small change to your ajax call

ajax: {
            url: "http://localhost:21594/api/values",
            "dataSrc": function ( json ) {
                return JSON.parse(json);
            }    
        },

The above converts your data which you are returning as string to a JSON which datatable understands

edited Mar 21, 2018 at 4:21

answered Mar 20, 2018 at 17:34

G_S

7,1302 gold badges27 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Rahul Chaudhari Over a year ago

thanx @G_S , I tried json.parse() but it shows wrong json format message.

G_S Over a year ago

So your json is in incorrect format then. verify your JSON again

Collectives™ on Stack Overflow

Fetching Json string of C# datatable and displaying in jquery Datatable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related