jQuery DataTables doesn't display data with ASP.NET MVC 4 Razor

Question

My script produces data but jQuery DataTables doesn't load it and shows the following error:

DataTables warning: table id=example - Requested unknown parameter 'FTR_Kno' for row 0

Should I use mvc-datatables?

View:

<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="~/Content/DataTables/css/dataTables.jqueryui.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<!DOCTYPE html>

<html>
<body>
    <div>
        <input id="Button1" type="button" value="button" />
    </div>
    <div>
        <form>
            <table id="example">
                <thead>
                    <tr>
                        <td>FTR_Kno</td>
                        <td>FTR_KodBelge</td>
                        <td>FTR_TarihBelge</td>
                        <td>TDR_KodTedarikci</td>
                        <td>KRM_AckAd</td>
                        <td>FTR_Ack</td>
                        <td>FTS_Ack</td>
                    </tr>
                </thead>
                <tbody>
                    @*<tr>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    <td>a</td>
                    </tr>*@
                </tbody>
            </table>
        </form>
    </div>

</body>
</html>

<script type="text/javascript">
    $(document).ready(function () {
        $("#Button1").click(function () {
            alert("bas");
            $.ajax({
                url: '/DataTables/jsonIndex',
                type: "POST",
                dataType: "json",
                success: function (gdata) {
                    alert(gdata);
                    $('#example').DataTable({
                        data: gdata,
                        paging: false,
                        columns: [
                            { "data": "FTR_Kno" },
    { "data": "FTR_KodBelge" },
    { "data": "FTR_TarihBelge" },
    { "data": "TDR_KodTedarikci" },
    { "data": "KRM_AckAd" },
    { "data": "FTR_Ack" },
    { "data": "FTS_Ack" }

                        ]

                    });
                }
            });
        });

    });

</script>

> Controlller :

   [HttpPost]
        public JsonResult jsonIndex()
        {
            CultureInfo c = Thread.CurrentThread.CurrentCulture;
            string userLanguage = c.TwoLetterISOLanguageName;
            Session["language"] = userLanguage;
            string language = Session["language"].ToString();

            ServiceReference1.Service1Client client = new ServiceReference1.Service1Client();
            ServiceReference1.Grid grid = new ServiceReference1.Grid();
            grid = client.GetGridInformation("TUR", "lst_afhFTR");
            List<ServiceReference1.Column> column = new List<ServiceReference1.Column>();
            column.AddRange(grid.columnList);
            //Dim columnName As List(Of String) = grid.columnList.Select(Function(f) f.columnName).ToList()
            ViewBag.ColumnList = grid.columnList;
            ViewBag.GridWidth = grid.gridWidth;
            ViewBag.GridHeader = grid.gridHeader;
            client.Close();

            ServiceReference1.Service1Client client1 = new ServiceReference1.Service1Client();
            grid.gridCode = grid.gridCode.Insert(6, " top " + grid.gridMaxRecord.ToString());
            string[] array = grid.gridCode.Split("\r\n".ToCharArray(), StringSplitOptions.RemoveEmptyEntries);
            string code = "";
            foreach (string item in array)
            {
                code = code + " " + item;
            }
            grid.gridCode = code;
            List<Dictionary<string, object>> result = new List<Dictionary<string, object>>();
            result.AddRange(client1.GetTable(grid.gridCode));
            ////WebGrid içine gönderilecek data oluşturulması 
            //IList<object> asildata = new List<object>();
            //dynamic data = new List<ExpandoObject>();
            //foreach (var Pairs in result)
            //{
            //    var row = new ExpandoObject();
            //    List<object> row2 = new List<object>();
            //    foreach (var Pair in Pairs)
            //    {
            //        ((IDictionary<string, object>)row).Add(Pair.Key, Pair.Value);
            //        row2.Add(Pair.Value);
            //    }
            //    data.Add(row);
            //    asildata.Add(row2);
            //};
            JavaScriptSerializer js = new JavaScriptSerializer();
            return Json(js.Serialize(result),JsonRequestBehavior.AllowGet);

        }
    }

I definitely think your returning json object is wrong. The datatables.js expects a json object with a property named FTR_Kno. Let us see the json object.. — CodeTherapist
– CodeTherapist, Commented Oct 12, 2015 at 8:53
LİKE .....[{\"FTR_Kno\":\"ALF0000168\",\"FTR_KodBelge\":\"A426797\",\"FTR_TarihBelge\":\"\\/Date(1427749200000)\\/\",\"TDR_KodTedarikci\":\"T0002\",\"KRM_AckAd\":\"NTatlım Gıda Pazarlama Ltd.Şti.\",\"FTR_Ack\":\"\",\"FTS_Ack\":\"Onay Bekliyor\"},{\"FTR_Kno\":\"ALF0000169\",\"FTR_KodBelge\":\"a426800\",\"FTR_TarihBelge\":\"\\/Date(1428699600000)\\/\",\"TDR_KodTedarikci\":\"T0002\",\"KRM_AckAd\":\"NTatlım Gıda Pazarlama Ltd.Şti.\",\"FTR_Ack\":\"\",\"FTS_Ack\":\"Otomatik Onay\"},{\"FTR_Kno\":\"ALF0000197\",\"FTR_KodBelge\":\"B877497\",\"FTR_TarihBelge\":\"\\/Date(1433106000000)\\/\",\" — bgmm
– bgmm, Commented Oct 12, 2015 at 9:25
Is datatables.js case sensitive? Because the error is Ftr_Kno but your poperty is FTR_Kno. Or is that just a copy-to-the-question issue? — fdomn-m
– fdomn-m, Commented Oct 12, 2015 at 9:31
freedomn-m You are very careful :) thanks but erros is not copy so I write (no copy) error.It is my mistake.Error is not this. — bgmm
– bgmm, Commented Oct 12, 2015 at 9:38

Gyrocode.com · Accepted Answer · 2015-10-12 12:10:10Z

1

You're encoding into JSON twice, first with Serialize() and then with Json().

Replace:

JavaScriptSerializer js = new JavaScriptSerializer();
return Json(js.Serialize(result),JsonRequestBehavior.AllowGet);

with:

return Json(result, JsonRequestBehavior.AllowGet);

edited Oct 12, 2015 at 12:10

answered Oct 12, 2015 at 11:35

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

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

1 Comment

bgmm Over a year ago

very but very Thank you

Collectives™ on Stack Overflow

jQuery DataTables doesn't display data with ASP.NET MVC 4 Razor

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related