locked
Datatable not binding from JsonResult : MVC RRS feed

  • Question

  • User1052662409 posted

    Hi All,

    Below is my JsonResult in controller.

    [HttpGet]
            public JsonResult getData()
            {
                var jsonData = new
                {
                    data = db.OT_Band_Master.ToList()
                };
                return Json(jsonData, JsonRequestBehavior.AllowGet);
            }

    And below I am trying to bind the jquery data table using ajax method. But the datatable is not binding. I confirmed my jsonData have data inside.

    <script type="text/javascript">
        $(document).ready(function () {
            fillvalue();
        });
        function fillvalue() {
            var _OT = "";
            $.ajax({
                type: "GET",
                url: "/OTBand/getData",
                data: "",
                dataType: "json",
                success: function (response) {
                    var dt = JSON.parse(response);
                    _OT = " <div class=\col - lg - 12 tblscroll\"><table id=\"example\" class=\"table table - striped table - bordered\" style=\"width: 100 %\"><thead><tr><th>@Resources.Resource.manage_band_type</th><th>@Resources.Resource.manage_band_rate</th><th>@Resources.Resource.manage_project_added</th><th>Action</th></tr></thead><tbody>";
    
                    $(dt).each(function (i) {
                        _OT += "<tr><td>" + dt[i].vcname + "</td>";
                        _OT += "<td>" + dt[i].vcrate_phour + "</td>";
                        _OT += "<td>" + dt[i].dateadded + "</td>";
                        _OT += "<td><a href=\"../Edit/" + dt[i].bigid +"\"><img src=\"../../images/edit.gif\" alt=\"edit\" style=\"cursor:pointer;\" /></a>&nbsp;<img src=\"../../images/remove.gif\" alt=\"delete\" style=\"cursor:pointer;\" onclick=\"javascript:_delete_OT('" + dt[i].bigid + "');\"/></td></tr>";
    
                    });
                    _OT += "</tbody></table> </div>";
                    document.getElementById("divmain").innerHTML = _OT;
                },
                failure: function (response) {
                    alert(response.responseText);
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });
        }

    Please suggest.

    Tuesday, May 28, 2019 4:52 AM

Answers

  • User1520731567 posted

    Hi demoninside9,

    You didn't use binding function which built-in Datatable:.DataTable(),

    I make a simply demo,you could refer to it:

    Model:

     public class SINHVIEN
            {
                public int ID_SINHVIEN { get; set; }
                public string MSSV { get; set; }
    
            }
    
            public class SINHVIENdata
            {
                public List<SINHVIEN> data { get; set; }
    
            }

    Controller:

      public ActionResult DataTable()
            {
    
                return View();
            }
    
            public JsonResult DataTable_Index()
            {
                List<SINHVIEN> sinhvien = new List<SINHVIEN>();
                sinhvien.Add(new SINHVIEN { ID_SINHVIEN = 1, MSSV = "aa" });
                sinhvien.Add(new SINHVIEN { ID_SINHVIEN = 2, MSSV = "bb" });
                sinhvien.Add(new SINHVIEN { ID_SINHVIEN = 3, MSSV = "cc" });
                sinhvien.Add(new SINHVIEN { ID_SINHVIEN = 4, MSSV = "dd" });
                SINHVIENdata sINHVIENdata = new SINHVIENdata();
                sINHVIENdata.data = sinhvien.ToList();
                return Json(sINHVIENdata, JsonRequestBehavior.AllowGet);
            }

    View:

    @model IEnumerable<XXX.XXX.XXX.SINHVIEN>
    
    
    <table id="sinhvien">
        <thead>
            <tr>
                <td>ID_SINHVIEN</td>
                <td>MSSV</td>
            </tr>
        </thead>
    </table>
    
    @section scripts{
        <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <script>
            $(document).ready(function () {
            $('#sinhvien').DataTable({
            'ajax': {
            "type": 'GET',
            "url": "@Url.Action("DataTable_Index", "Main")",
            "datatype": "JSON",
            },
            "columns": [
    
            { "data": "ID_SINHVIEN" },
            { "data": "MSSV" }
            ]
            });
            });
    
    
        </script>
    
    }
    

    How it works:

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, May 28, 2019 9:49 AM