Spending hours searching for the problem I am facing I found some possible solutions like these 2 jQuery DataTables "No Data Available in Table" , jQuery DataTables “No Data Available in Table” and tabled folds when sorting but none solved my issue
the problem is that when there is no data in my data table, It shows no data available in table which is right functionality, but as soon as I save the data through a web API Post call and call it through web API Get call and try to show it in my data table, the data shows along with no data available line at the end of my data table.
This is how my code looks like, I am using angularjs
my save button is as;
<button type="button"
class="btn btn-primary pull-right"
ng-click="Insert()"
ng-disabled="!frmClient.$valid">Save</button>
Here is the insert function in my js file
$scope.Insert = function ()
{
//make a call to server to save date
$http({
method: "Post",
data: $scope.Client,
url: "/api/ClientWebAPI"
}).then(function successCallback(clientData) {
if (clientData.data.IsValid)
{
//Load the collection of clients
$scope.Clients = clientData.data.Data;
$scope.InitControls();
}
else
{
$scope.Errors = clientData.data.Data.Errors;
}
});
}
My InitControls and Clients are as follows;
$scope.InitControls = function ()
{
$scope.Client = {
"rowuid": "0",
"ClientID": "",
"ClientName": "",
"CreatedBy": "",
"CreatedOn": "",
"UpdatedBy": "",
"UpdatedOn": ""
};
}
$scope.InitControls();
$scope.Clients = {};
and finally my HTML of data table looks like this;
<table id="UzairTable"
class="table table-bordered table-hover">
<thead>
<tr>
<th>Client ID</th>
<th>Client Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="Client in Clients">
<td>{{Client.ClientID}}</td>
<td>{{Client.ClientName}}</td>
<td> Edit/View/Delete</td>
</tr>
</tbody>
</table>
Can anyone help me and guide what am I missing, that would be a great help, I have tried initializing my data table before InitControls in my Insert function without any luck.
-----Edited-----
@Enrique Fernandez I replaced client in my <tr ng-repeat="Client in Clients"> but the issue persists
Here is the post call back which returns list of Clients;
public object Post(ClientModel model)
{
ClientData clientData = new ClientData();
if (ModelState.IsValid)
{
if (ClientHelper.Save(model).ToUpper() == "SAVED SUCCESSFULLY")
{
clientData.IsValid = true;
clientData.Data = ClientHelper.GetAll();
}
else
{
Validation validation = new Validation();
foreach (var modelState in ModelState)
{
foreach (var error in modelState.Value.Errors)
{
validation.Errors.Add(error.ErrorMessage);
}
}
clientData.IsValid = false;
clientData.Data = validation;
}
}
return clientData;
}
The GetAll() function in ClientHelper Class is as;
public static List<ClientModel> GetAll()
{
return service.GetAll().Select
(x => new ClientModel(x)).ToList();
}
My client Data class which is returned in my post call looks like this;
public class ClientData
{
public bool IsValid { get; set; }
public object Data { get; set; }
}
This is how my post call back is returning data to function successCallback(clientData) in my Controller $scope.Insert
And in my layout view this is how I am using data table;
<script>
$(function () {
$('#UzairTable').DataTable({
'paging': true,
'lengthChange': false,
'searching': true,
'ordering': true,
'info': true,
'autoWidth': true
});
})
</script>
hope that helps in resolving my issue.
Please note that this is not a duplication question as other questions does not resolve my issue, also this link does not resolved my issue Using Jquery Datatable with AngularJs
Regards
