locked
Datatable not showing correctly RRS feed

  • Question

  • User1979860870 posted

    Hi

    https://imgur.com/undefined

    <div class="container">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="clearTextBox();">Add New Location</button><br /><br />
        <table id="example" class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>
                        Code
                    </th>
                    <th>
                        Name
                    </th>
                    <th>
                        Street
                    </th>
                    <th>
                        City
                    </th>
                    <th>
                        State
                    </th>
                    <th>
                        Zip
                    </th>
                    <th>
                        Country
                    </th>
                    <th>
                        PanNo
                    </th>
                    <th>
                        GstRegNo
                    </th>
                    <th>
                        Mobile
                    </th>
                    <th>
                        Phone-1
                    </th>
                    <th>
                        Phone-2
                    </th>
                    <th>
                        EMail
                    </th>
                    <th>
                        Action
                    </th>
                </tr>
            </thead>
            <tbody class="tbody">
            </tbody>
        </table>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h4 class="modal-title" id="myModalLabel">Add Employee</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="Code">Code</label>
                            <input type="text" class="form-control" id="Code" placeholder="Code"  />
                        </div>
                        <div class="form-group">
                            <label for="Name">Name</label>
                            <input type="text" class="form-control" id="Name" placeholder="Name" />
                        </div>
                        <div class="form-group">
                            <label for="Street">Street</label>
                            <input type="text" class="form-control" id="Street" placeholder="Age" />
                        </div>
                        <div class="form-group">
                            <label for="City">City</label>
                            <input type="text" class="form-control" id="City" placeholder="State" />
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="btnAdd" onclick="return Add();">Add</button>
                    <button type="button" class="btn btn-primary" id="btnUpdate" style="display:none;" onclick="Update();">Update</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    
    ----------------------------------------------------------------
    Shared-AdminLTE->_Scripts.cshtml
    ----------------------------------------------------------------
    <script src="~/plugins/jquery/jquery.min.js"></script>
    <script src="~/plugins/datatables/jquery.dataTables.js"></script>
    <script src="~/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="~/ADMINLTE_Js/adminlte.min.js"></script>
    <script src="~/ADMINLTE_Js/Location.js"></script>
    
    -----------------------------------------------------------------
    $(document).ready(function () {
        //$("#delete-dialog").hide;
        loadData();
    });
    
    -------------------------------------------------------------------
    function loadData() {
        $.ajax({
            url: "/Location/List",
            type: "GET",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (result) {
                var html = '';
                $.each(result, function (key, item) {
                    html += '<tr>';
                    html += '<td>' + item.code + '</td>';
                    html += '<td>' + item.name + '</td>';
                    html += '<td>' + item.street + '</td>';
                    html += '<td>' + item.city + '</td>';
                    html += '<td>' + item.state + '</td>';
                    html += '<td>' + item.zip + '</td>';
                    html += '<td>' + item.country + '</td>';
                    html += '<td>' + item.panno + '</td>';
                    html += '<td>' + item.gstRegNo + '</td>';
                    html += '<td>' + item.mobile + '</td>';
                    html += '<td>' + item.phone_1 + '</td>';
                    html += '<td>' + item.phone_2 + '</td>';
                    html += '<td>' + item.e_Mail + '</td>';
                    html += '<td><a href="#" onclick="return getbyID(' + item.code + ')">Edit</a> | <a href="#" onclick="Delete(' + item.code + ')">Delete</a></td>';
                    html += '</tr>';
                });
                $('.tbody').html(html);
            },
            error: function (errormessage) {
                alert(errormessage.responseText);
            }
        });
    }

    Thanks

    Wednesday, January 20, 2021 9:18 AM

All replies

  • User-474980206 posted

    you don't explain what is wrong. you should use the browser tools to see the ajax response data and validate it matches what is expected. is it an array, do the property names match (case sensitive).

    note: as names can contain a quote, your code will fail if one exists. you should create td objects and set the text.

          var $html = $("<table/>");
           $.each(result, function (key, item) {
                    $html
                          .append($('<tr>')
                                 .append($('<td>').text(item.code))
                                 .append($('<td>').text(item.name )
                                 .append($('<td>').text(item.street))
                                 .append($('<td>').text(item.city))
                                 .append($('<td>').text(item.state ))
                                 .append($('<td>').text(item.zip ))
                                 .append($('<td>').text(item.country ))
                                 .append($('<td>').text(item.panno ))
                                 .append($('<td>').text(item.gstRegNo ))
                                 .append($('<td>').text(item.mobile ))
                                 .append($('<td>').text(item.phone_1 ))
                                 .append($('<td>').text(item.phone_2 ))
                                 .append($('<td>').text(item.e_Mail ))
                                 .append($('<td>').text(<a href="#" onclick="return getbyID(' + item.code + ')">Edit</a> | <a href="#" onclick="Delete(' + item.code + ')">Delete</a> ))
                });
                $('.tbody').empty().append($html.find('<td>'));

    Wednesday, January 20, 2021 5:15 PM
  • User1979860870 posted

    Hi Bruce

       It is showing like in the link below

    https://imgur.com/undefined

    Thanks

    Thursday, January 21, 2021 4:40 AM
  • User1686398519 posted

    Hi jagjit saini, 

    https://imgur.com/undefined

    The image link you provided cannot be viewed.In addition, I used your code for testing, and the data can be correctly displayed in the table.I suggest you give the correct picture link and describe the problem you encountered in detail so that we can better help you.

    The following is the result of my test.

    Best Regards,

    YihuiSun

    Thursday, January 21, 2021 5:36 AM
  • User1979860870 posted

    Hi

    Using AdminLTE.css

    https://imgur.com/8Lo36sf

    <div class="container">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="clearTextBox();">Add New Location</button><br /><br />
        <table id="example" class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>
                        Code
                    </th>
                    <th>
                        Name
                    </th>
                    <th>
                        Street
                    </th>
                    <th>
                        City
                    </th>
                    <th>
                        State
                    </th>
                    <th>
                        Zip
                    </th>
                    <th>
                        Country
                    </th>
                    <th>
                        PanNo
                    </th>
                    <th>
                        GstRegNo
                    </th>
                    <th>
                        Mobile
                    </th>
                    <th>
                        Phone-1
                    </th>
                    <th>
                        Phone-2
                    </th>
                    <th>
                        EMail
                    </th>
                    <th>
                        Action
                    </th>
                </tr>
            </thead>
            <tbody class="tbody">
            </tbody>
        </table>
    </div>

    Thanks

    Thursday, January 21, 2021 6:03 AM
  • User1686398519 posted

    Hi jagjit saini, 

    Do you mean that the style of Datables is not displayed correctly?

    If you want to use Datables, you need to load the js/css file of the plugin you want to use.You can click this link to view the AdminLTE documentation.

    You can check whether you have referenced the jquery.dataTables.css file.

    Below is the demo I tested, you can refer to it.

    Model

        public class TestTableModel
        {
            public string Code { get; set; }
            public string Name { get; set; }
            public string Street { get; set; }
            public string City { get; set; }
            public string State { get; set; }
            public string Zip { get; set; }
            public string Country { get; set; }
            public string Panno { get; set; }
            public string GstRegNo { get; set; }
            public string Mobile { get; set; }
            public string Phone_1 { get; set; }
            public string Phone_2 { get; set; }
            public string E_Mail { get; set; }
        }

    Controller

        public class TestTableController : Controller
        {
            public IActionResult Index()
            {
                return View();
            }
            public IActionResult List()
            {
                List<TestTableModel> test = new List<TestTableModel>();
                for (int i = 1; i < 10; i++)
                {
                    test.Add(new TestTableModel
                    {
                        Code = "Code" + i.ToString(),
                        Name = "E_Mail" + i.ToString(),
                        Street = "Street" + i.ToString(),
                        City = "City" + i.ToString(),
                        State = "State" + i.ToString(),
                        Zip = "Zip" + i.ToString(),
                        Country = "Country" + i.ToString(),
                        Panno = "Panno" + i.ToString(),
                        GstRegNo = "GstRegNo" + i.ToString(),
                        Mobile = "Mmobile" + i.ToString(),
                        Phone_1 = "Phone_1" + i.ToString(),
                        Phone_2 = "Phone_2" + i.ToString(),
                        E_Mail = "E_Mail" + i.ToString()
                    });
                }
                return Json(test);
            }
        }

    View

    <link href="~/datatables/css/jquery.dataTables.css" rel="stylesheet" />
    <table id="example" class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>
                    Code
                </th>
                <th>
                    Name
                </th>
                <th>
                    Street
                </th>
                <th>
                    City
                </th>
                <th>
                    State
                </th>
                <th>
                    Zip
                </th>
                <th>
                    Country
                </th>
                <th>
                    PanNo
                </th>
                <th>
                    GstRegNo
                </th>
                <th>
                    Mobile
                </th>
                <th>
                    Phone-1
                </th>
                <th>
                    Phone-2
                </th>
                <th>
                    EMail
                </th>
                <th>
                    Action
                </th>
            </tr>
        </thead>
        <tbody class="tbody">
        </tbody>
    </table>
    @section scripts{
        <script src="~/datatables/js/jquery.dataTables.js"></script>
        <script>
        $(document).ready(function () {
        loadData();
    });
    function loadData() {
        $.ajax({
            url: "@Url.Action("List")",
            type: "GET",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            success: function (result) {
                console.log(result)
                $('#example').DataTable({
                    data:result,
                    columns: [
                        { data: "Code" },
                        { data: "Name" },
                        { data: "Street" },
                        { data: "City" },
                        { data: "State" },
                        { data: "Zip" },
                        { data: "Country" },
                        { data: "Panno" },
                        { data: "GstRegNo" },
                        { data: "Mobile" },
                        { data: "Phone_1" },
                        { data: "Phone_2" },
                        { data: "E_Mail" },
                        {
                            "data": null,
                            "render": function (value) {
                                return '<a href="#" onclick="return getbyID(' + value.Code + ')">Edit</a> | <a href="#" onclick="Delete(' + value.Code + ')">Delete</a>';
                            }
                        }
                    ]
               });
            },
            error: function (errormessage) {
                alert(errormessage.responseText);
            }
        });
    }
    </script>
    }

    Startup

    public void ConfigureServices(IServiceCollection services)
    {
    ... ... services.AddControllers().AddJsonOptions(opts => opts.JsonSerializerOptions.PropertyNamingPolicy = null);
    }

    Here is the result. 

    Best Regards,

    YihuiSun

    Thursday, January 21, 2021 8:06 AM
  • User753101303 posted

    Hi,

    So if the problem is that undefined is shown for the "PanNo" column, it likely means that this property doesn't exist. Double check that  /Location/List really returns a list of objects with matching properties.

    Thursday, January 21, 2021 8:19 AM
  • User1979860870 posted

    Hi

    Link -> https://imgur.com/25WCzSU

    I have below Css
    <link rel="stylesheet" href="~/plugins/fontawesome-free/css/all.min.css"> <link rel="stylesheet" href="~/AdminLTE_Css/adminlte.min.css"> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet"> <link href="//cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" rel="stylesheet" />

    Scripts
    <script src="~/plugins/jquery/jquery.min.js"></script>
    <script src="~/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="~/ADMINLTE_Js/adminlte.min.js"></script>
    <script src="~/plugins/datatables/jquery.dataTables.min.js"></script>

    Thanks

    Thursday, January 21, 2021 9:39 AM
  • User753101303 posted

    The problem is that item.panno shows "undefined" so more likely your item object does NOT have a panno property.

    So my first move would be to look at which objects are returned by the C# code that handles /Location/List and double check the declaration for this panno property.

    Edit: for example I would expect this behavior if you have a typo in the property name such as using in your C# code:

    public string Pano { get; set;} // and then item.panno is undefined in your JavaScript code

    Thursday, January 21, 2021 9:59 AM
  • User1686398519 posted

    Hi jagjit saini,

    Datatable not showing correctly

    1. "not showing correctly" means some data is displayed incorrectly?
      1. If this is the case, you can check your code like this:
        1. Add console.log(result) and then open the console in the browser through F12, set a breakpoint to view the value of result.
        2. Take item.code as an example to explain:
          1. If you do not configure in the ConfigureServices() method of the Startup class to keep the returned Json data consistent with the background definition, then you encounter this problem when using ajax to request dynamic binding data in asp.net core: The first letter of the the property names in the returned Json data will become lowercase.
            • services.AddControllers().AddJsonOptions(opts => 
              opts.JsonSerializerOptions.PropertyNamingPolicy = null);
          2. For instance:
            1. public string Code { get; set; }
            2. If the first letter of the  property name of your model is capitalized and you have not configure in the Startup,then the data you return is as follows:
              • code: "Code1"
            3. At this point, if you use item.Code to get data, you will get undefined.
            4. In fact, you didn't provide your Model. I don't know what the property names in your Model are, so you need to check your own code according to the methods mentioned above.
        3. Finally, I suggest that you configure in the ConfigureServices() method of the Startup class to keep the property name of the returned Json data the same as the property name in the Model.

    Here is how I test the code in the browser, you can refer to it.

    Best Regards,

    YihuiSun

    Friday, January 22, 2021 5:15 AM
  • User1979860870 posted

    Hi YihuiSun

       Do u mean this

    public void ConfigureServices(IServiceCollection services)
            {
                services.AddControllersWithViews();
                services.AddControllers().AddJsonOptions(opts => opts.JsonSerializerOptions.PropertyNamingPolicy = null);
            }

    Thanks

    Friday, January 22, 2021 5:42 AM
  • User1686398519 posted

    Hi jagjit saini, 

    What I mean is that you can configure it in the ConfigureServices() method of the Startup class so that the property name of the returned Json data is the same as the property name in the Model.

    If the returned data is not obtained correctly, it may be caused by incorrect property name.

    Best Regards,

    YihuiSun

    Wednesday, January 27, 2021 7:03 AM