locked
JQuery DataTable RRS feed

  • Question

  • User-797751191 posted

    Hi

      Though it is showing 6 records but below it displays Show 0 to 0 of 0 entries. When i search/sort it says No Data available in table.

    $(document).ready(function () {
    $('#tblUser').dataTable();
    loadData();

    }); function loadData() { $.ajax({ url: "/Home/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.UserName + '</td>'; html += '<td>' + item.Password + '</td>'; html += '<td>' + item.FirstName + '</td>'; html += '<td>' + item.LastName + '</td>'; html += '<td><a href="#" onclick="return getbyName(\'' + item.UserName + '\')">Edit</a> | <a href="#" onclick="Delete(\'' + item.UserName + '\')">Delete</a></td>'; html += '</tr>'; }); $('.tbody').html(html); }, error: function (errormessage) { alert(errormessage.responseText); } }); }

    VIEW

    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/jquery.dataTables.min.css" rel="stylesheet" />

    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/bootstrap.js"></script>
    <script src="~/scripts/jquery.dataTables.min.js"></script>
    <script src="~/Scripts/User.js"></script>

    <div class="container">
    <h2>User Record</h2>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="clearTextBox();">Add New User</button><br /><br />
    <table id="tblUser" class="table table-bordered table-hover">
    <thead>
    <tr>
    <th>
    UserName
    </th>
    <th>
    Password
    </th>
    <th>
    FirstName
    </th>
    <th>
    LastName
    </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">User</h4>
    </div>
    <div class="modal-body">
    <form>
    <div class="form-group">
    <label for="Name">User Name</label>
    <input type="text" class="form-control" id="UserName" placeholder="Name"/>
    </div>
    <div class="form-group">
    <label for="Name">Password</label>
    <input type="text" class="form-control" id="Password" placeholder="Name"/>
    </div>
    <div class="form-group">
    <label for="Name">First Name</label>
    <input type="text" class="form-control" id="FirstName" placeholder="Name"/>
    </div>
    <div class="form-group">
    <label for="Name">Last Name</label>
    <input type="text" class="form-control" id="LastName" placeholder="Name"/>
    </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>

    CONTROLLER

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.Mvc;
    using CrudApp.Models;

    namespace CrudApp.Controllers
    {
    public class HomeController : Controller
    {
    UserDb usrDB = new UserDb();
    public ActionResult Index()
    {
    return View();
    }
    public JsonResult List()
    {
    return Json(usrDB.GetAllUser(), JsonRequestBehavior.AllowGet);
    }
    public JsonResult AddUser(User Usr)
    {
    return Json(usrDB.AddUser(Usr), JsonRequestBehavior.AllowGet);
    }
    public JsonResult GetbyName(string UsrName)
    {
    var UserName = usrDB.GetAllUser().Find(x => x.UserName.Equals(UsrName));
    return Json(UserName, JsonRequestBehavior.AllowGet);
    }
    public JsonResult UpdateUser(User Usr)
    {
    return Json(usrDB.UpdateUser(Usr), JsonRequestBehavior.AllowGet);
    }
    public JsonResult DeleteUser(string UsrName)
    {
    return Json(usrDB.DeleteUser(UsrName), JsonRequestBehavior.AllowGet);
    }
    }
    }

    Thanks

    Wednesday, October 30, 2019 4:39 AM

All replies

  • User283571144 posted

    Hi jsshivalik,

    According to your description,I suggest you put $('#tblUser').dataTable(); in ajax. Because according to the previous practice, the datatable will be loaded first, so the page displays 0 to 0. The current practice is to get the data first, then load the datatable.

    More details, you could refer to below codes:

    <link href="~/Content/bootstrap.css" rel="stylesheet" />
        <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <script>
            $(document).ready(function () {
                //$('#tblUser').dataTable();
                loadData();
    
            });
            function loadData() {
                $.ajax({
                    url: "/Home/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.Id + '</td>';
                            html += '<td>' + item.FirstName + '</td>';
                            html += '<td>' + item.LastName + '</td>';
                            html += '<td><a href="#" onclick="return getbyName(\'' + item.Id + '\')">Edit</a> | <a href="#" onclick="Delete(\'' + item.Id + '\')">Delete</a></td>';
                            html += '</tr>';
                        });
                        $('.tbody').html(html);
                        $('#tblUser').dataTable();
                    },
                    error: function (errormessage) {
                        alert(errormessage.responseText);
                    }
                });
            }
        </script>
    
     <div>
                <div class="container">
                    <h2>User Record</h2>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="clearTextBox();">Add New User</button><br /><br />
                    <table id="tblUser" class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>
                                    Id
                                </th>
                                <th>
                                    FirstName
                                </th>
                                <th>
                                    LastName
                                </th>
                                <th></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">User</h4>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="Name">User Name</label>
                                    <input type="text" class="form-control" id="UserName" placeholder="Name" />
                                </div>
                                <div class="form-group">
                                    <label for="Name">Password</label>
                                    <input type="text" class="form-control" id="Password" placeholder="Name" />
                                </div>
                                <div class="form-group">
                                    <label for="Name">First Name</label>
                                    <input type="text" class="form-control" id="FirstName" placeholder="Name" />
                                </div>
                                <div class="form-group">
                                    <label for="Name">Last Name</label>
                                    <input type="text" class="form-control" id="LastName" placeholder="Name" />
                                </div>
                            </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>
            </div>
    

    Result:

    Best Regards,

    Brando

    Thursday, October 31, 2019 6:51 AM
  • User-797751191 posted

    Hi Brando

      I am getting this error now

    jquery.dataTables.min.js:90 Uncaught TypeError: Cannot read property 'mData' of undefined
    at HTMLTableCellElement.<anonymous> (jquery.dataTables.min.js:90)
    at Function.each (jquery-1.10.2.js:671)
    at init.each (jquery-1.10.2.js:280)
    at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:90)
    at Function.each (jquery-1.10.2.js:671)
    at init.each (jquery-1.10.2.js:280)
    at init.m [as dataTable] (jquery.dataTables.min.js:82)
    at Object.success (User.js:65)
    at fire (jquery-1.10.2.js:3062)
    at Object.fireWith [as resolveWith] (jquery-1.10.2.js:3174)

    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" />
    
    <script src="~/Scripts/jquery-1.10.2.js"></script>  
    <script src="~/Scripts/bootstrap.js"></script>  
    <script src="~/scripts/DataTables/jquery.dataTables.min.js"></script>
    <script src="~/Scripts/User.js"></script> 
    
    <div class="container">  
    
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="clearTextBox();">Add New User</button><br /><br />  
        <table id="tblUser" class="table table-striped table-bordered dt-responsive nowrap" width:"100%" cellspacing="0" >  
            <thead>  
                <tr>  
                    <th>  
                        UserName 
                    </th>  
                    <th>  
                        Password  
                    </th>  
                    <th>  
                        FirstName  
                    </th>  
                    <th>  
                        LastName  
                    </th>  
                </tr>  
            </thead>  
            <tbody class="tbody">  
      
            </tbody>  
        </table>  
    </div>  
    
    function loadData() {
        $.ajax({
            url: "/Home/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.UserName +  '</td>';
                    html += '<td>' + item.Password +  '</td>';
                    html += '<td>' + item.FirstName + '</td>';
                    html += '<td>' + item.LastName + '</td>';
                    //html += '<td><a href="#" onclick="return getbyName(\'' + item.UserName + '\')">Edit</a> | <a href="#" onclick="Delete(\'' + item.UserName + '\')">Delete</a></td>';
                    html += '<td> <a href="#"  id="btnEdit" onclick="return getbyName(\'' + item.UserName + '\');"><i class="glyphicon glyphicon-pencil"></i></a>  <a href="#" class="btn btn-danger btn-sm" id="btnDelete" onclick="Delete(\'' + item.UserName + '\');"><i class="glyphicon glyphicon-trash"></i></a></td>';
                    //html += '<td> <a href="#" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-edit"></span>  onclick="return getbyName(\'' + item.UserName + '\')" </a> | <a href="#" onclick="return getbyName(\'' + item.UserName + '\')" </a></td>';
                    html += '</tr>';
                });
                $('.tbody').html(html);
                $('#tblUser').dataTable();
            },
            error: function (errormessage) {
                alert(errormessage.responseText);
            }
        });
    }
    
    
    $(document).ready(function () {
    
        loadData();
        
    });

    Thanks

    Thursday, October 31, 2019 7:32 AM
  • User283571144 posted

    Hi jsshivalik,

    As far as I know, this error means the column is not match the thead in the table, I suggest you add a blank <th></th> in the thread .Because edit is missing a column.

    Details, you could refer to below codes:

    <link href="~/Content/bootstrap.css" rel="stylesheet" />
        <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
        <script src="~/Scripts/bootstrap.min.js"></script>
        <script>
            $(document).ready(function () {
                //$('#tblUser').dataTable();
                loadData();
    
            });
            function loadData() {
                $.ajax({
                    url: "/Home/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.Id + '</td>';
                            html += '<td>' + item.FirstName + '</td>';
                            html += '<td>' + item.LastName + '</td>';
                            html += '<td><a href="#" onclick="return getbyName(\'' + item.Id + '\')">Edit</a> | <a href="#" onclick="Delete(\'' + item.Id + '\')">Delete</a></td>';
                            html += '</tr>';
                        });
                        $('.tbody').html(html);
                        $('#tblUser').dataTable();
                    },
                    error: function (errormessage) {
                        alert(errormessage.responseText);
                    }
                });
            }
        </script>
    
     <div>
                <div class="container">
                    <h2>User Record</h2>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="clearTextBox();">Add New User</button><br /><br />
                    <table id="tblUser" class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>
                                    Id
                                </th>
                                <th>
                                    FirstName
                                </th>
                                <th>
                                    LastName
                                </th>
                                <th></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">User</h4>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="Name">User Name</label>
                                    <input type="text" class="form-control" id="UserName" placeholder="Name" />
                                </div>
                                <div class="form-group">
                                    <label for="Name">Password</label>
                                    <input type="text" class="form-control" id="Password" placeholder="Name" />
                                </div>
                                <div class="form-group">
                                    <label for="Name">First Name</label>
                                    <input type="text" class="form-control" id="FirstName" placeholder="Name" />
                                </div>
                                <div class="form-group">
                                    <label for="Name">Last Name</label>
                                    <input type="text" class="form-control" id="LastName" placeholder="Name" />
                                </div>
                            </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>
            </div>
    

     

    Best Regards,

    Brando

    Friday, November 1, 2019 7:51 AM