Datatables show only the table headers
Datatables show only the table headers
justarrow
Posts: 3Questions: 1Answers: 0
Hello,
I am new to DataTables, and I an trying to implement it in my asp.net core 2.2 web application. The problem is that i read all the tutorials available and tried some from GitHub but I couldn't for a reason show the data from the SQLServer table into the Datatable.
My Controller "RazorBudgetController.cs" code:
namespace SUCOCoreControl.Controllers
{
public class RazorBudgetController : Controller
{
private readonly SUCODbContext _context;
public RazorBudgetController(SUCODbContext context)
{
_context = context;
}
// GET: /<controller>/
public IActionResult OPEXWBS()
{
return View();
}
[HttpPost]
public IActionResult LoadData()
{
try
{
var draw = HttpContext.Request.Form["draw"].FirstOrDefault();
// Skiping number of Rows count
var start = Request.Form["start"].FirstOrDefault();
// Paging Length 10,20
var length = Request.Form["length"].FirstOrDefault();
// Sort Column Name
var sortColumn = Request.Form["columns[" + Request.Form["order[0][column]"].FirstOrDefault() + "][name]"].FirstOrDefault();
// Sort Column Direction ( asc ,desc)
var sortColumnDirection = Request.Form["order[0][dir]"].FirstOrDefault();
// Search Value from (Search box)
var searchValue = Request.Form["search[value]"].FirstOrDefault();
//Paging Size (10,20,50,100)
int pageSize = length != null ? Convert.ToInt32(length) : 0;
int skip = start != null ? Convert.ToInt32(start) : 0;
int recordsTotal = 0;
// Getting all data
var wbsData = (from tempwbs in _context.OPEXWBS
select tempwbs);
//Sorting
if (!(string.IsNullOrEmpty(sortColumn) && string.IsNullOrEmpty(sortColumnDirection)))
{
wbsData = _context.OPEXWBS.OrderBy(sortColumn + " " + sortColumnDirection);
}
//Search
if (!string.IsNullOrEmpty(searchValue))
{
wbsData = wbsData.Where(m => m.OPEXWBSID.Contains(searchValue) || m.OPEXWBSENG.Contains(searchValue) || m.SubHeaderID.Contains(searchValue));
}
//total number of rows count
recordsTotal = wbsData.Count();
//Paging
var data = wbsData.Skip(skip).Take(pageSize).ToList();
//Returning Json Data
return Json(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data });
}
catch (Exception)
{
throw;
}
}
[HttpGet("api/[action]")]
public IActionResult Edit(string id)
{
try
{
if (string.IsNullOrEmpty(id))
{
return RedirectToAction("OPEXWBS", "RazorBudget");
}
return View("Edit");
}
catch (Exception)
{
throw;
}
}
[HttpPost("api/[action]")]
public IActionResult Delete(string id)
{
try
{
if (string.IsNullOrEmpty(id))
{
return RedirectToAction("OPEXWBS", "RazorBudget");
}
int result = 0;
if (result > 0)
{
return Json(data: true);
}
else
{
return Json(data: false);
}
}
catch (Exception)
{
throw;
}
}
}
}
The View page "OPEXWBS.cshtml"
...............
<table id="wbsTable" class="table display nowrap table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>SubHeaderID</th>
<th>OPEXWBSID</th>
<th>OPEXWBSENG</th>
<th>ServiceMaterialENG</th>
<th>ServiceMaterialARB</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
@section Scripts {
<script>
$(function () {
$('#wbsTable').DataTable({
"dom": 'Bfrtip',
"buttons": [
'pageLength',
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
],
"select": true,
"processing": true, // for show progress bar
"serverSide": true, // for process server side
"filter": true, // this is for disable filter (search box)
"orderMulti": false, // for disable multiple column at once
"ajax": {
"type": 'POST',
//"url": 'LoadData',
"url": "@Url.Action("LoadData", "RazorBudget")",
"dataSrc": "",
"datatype": "jason",
"contentType": 'application/json',
},
"columnDefs":
[{
"targets": [0],
"visible": false,
"searchable": false
}],
"columns": [
{ "data": "SUBHeaderID", "name": "SUBHeaderID", "autoWidth": true },
{ "data": "OPEXWBSID", "name": "OPEXWBSID", "autoWidth": true },
{ "data": "ServiceMaterialENG", "name": "ServiceMaterialENG", "autoWidth": true },
{ "data": "ServiceMaterialARB", "name": "ServiceMaterialARB", "autoWidth": true },
{
"render": function (data, type, full, meta)
{ return "<a href='#' class='btn btn-info' onclick=Edit('" + full.OPEXWBSID + "'); >Edit</a>"; }
},
{
data: null, render: function (data, type, row)
{
return "<a href='#' class='btn btn-danger' onclick=Delete('" + row.OPEXWBSID + "'); >Delete</a>" ;
}
},
]
});
});
function DeleteData(OPEXWBSID)
{
if (confirm("Are you sure you want to delete ...?"))
{
Delete(OPEXWBSID);
}
else
{
return false;
}
}
function Delete(OPEXWBSID)
{
var url='@Url.Content("~/")' + "/Delete" ;
$.post(url, { ID: OPEXWBSID }, function (data)
{
if (data)
{
oTable=$('#wbsTable').DataTable();
oTable.draw();
}
else
{
alert("Something Went Wrong!");
}
});
}
</script>
}
The browser Response
Response Headers
HTTP/2.0 200 OK
cache-control: no-cache, no-store
pragma: no-cache
content-type: text/html; charset=utf-8
server: Kestrel
x-sourcefiles: =?UTF-8?B?QzpcVXNlcnNcbW9hdGFcc291cmNlXHJlcG9zXFNVQ09Db3JlQ29udHJvbFxTVUNPQ29yZUNvbnRyb2xccmF6b3JidWRnZXRcb3BleHdicw==?=
x-powered-by: ASP.NET
date: Mon, 25 Mar 2019 09:06:57 GMT
X-Firefox-Spdy: h2
I know the code is too much But can anyone discover what is wrong?
Thank you.
This discussion has been closed.
Answers
Hi @justarrow ,
Are you able to link to your page?
Cheers,
Colin
Colin,
Yes, the page and the table's header (titles) are loading but the table body and data is not showing.
could be something like render problem? or possibly the "url" part in the ajax script?
Can you post a link to your page, so that it can be seen in action?
It is not a web page hosted, it is on SQL server in my laptop.
Without seeing it fail, it's hard to say - I would suggest checking the browser's console since if it's not even showing an empty table it would suggest an error is occuring.