Asked by:
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
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