JQuery DataTable

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

Answer 1

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

Answer 2

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

Answer 3

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