4
Good morning!,
I read some articles about Datatables.net, for example:
Datatables.net - Examples index
Load tables with json using Datatables
Using jquery Datatables with ASP.net MVC 5
but I cannot upload the data to the view:
Class Clientex
public class ClienteX
{
public int ID { get; set; }
public string Nome { get; set; }
public int Idade { get; set; }
}
ACTION
public ActionResult Index()
{
return View();
}
public JsonResult AjaxHandler()
{
var model = new List<ClienteX>(){
new ClienteX{ID=1, Nome="João", Idade=42}
};
var Resultado = new
{
sEcho = "1",
iTotalRecords = 1,
iTotalDisplayRecords = 1,
aaData = model
};
return Json(Resultado, JsonRequestBehavior.AllowGet);
}
VIEW index.cshtml
<h2>DataTable - Ajax</h2>
<button type="button" id="btnEnviar">Enviar</button>
<table id="myDataTable" class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th>Nome</th>
<th>Idade</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function () {
$("#btnEnviar").click(function () {
$("#myDataTable").dataTable({
"bServerSide": true,
"sAjaxSource": "DOMDataSource/AjaxHandler",
"bProcessing": true,
"aoColumns":
[
{
"sName": "ID",
"mData": "ID"
},
{
"sName": "Nome",
"mData": "Nome"
},
{
"sName": "Idade",
"mData": "Idade"
}
]
});
});
});
</script>
The Submit button click event works:
$("#btnEnviar").click(function () {...
but the next code that calls the Jsonresult method and should popular the table is not executed, why ?
$("#btnEnviar").click(function () {
$("#myDataTable").dataTable({
"bServerSide": true,
"sAjaxSource": "DOMDataSource/AjaxHandler",
"bProcessing": true,
"aoColumns":
[
{
"sName": "ID",
"mData": "ID"
},
{
"sName": "Nome",
"mData": "Nome"
},
{
"sName": "Idade",
"mData": "Idade"
}
]
});
});
friend, if you put a Breakpoint in your action the request is coming ?
– Brunno
Another detail is to observe in the browser console if the request is returning all the right data.
– Ivan Teles
Hello Bruno thanks for the remark, the suggestion of Ivan Teles solved my problem and just to complete, yes I put a breakpoint in the action and was not coming.
– hard123