How to display data using DataTable fetched data from API? - javascript

I have data fetched form API. I want to display it into the DataTable.
The data is fetched from the API and it got displayed into the DataTable but I have problem in displaying the data. The data is displayed but it also give me
No data available in table
below is what I have tried
<div class="nk-block nk-block-lg">
<div class="nk-block-head">
<div class="nk-block-head-content">
<h4 class="nk-block-title">Data </h4>
<div class="nk-block-des">
<p>Policy</p>
</div>
</div>
</div>
<div class="card card-preview">
<div class="card-inner">
<table class="datatable-init table" id="datatable">
<thead>
<tr>
<th>#</th>
<th>Module</th>
<th>Policy & Terms of Services Details</th>
</tr>
</thead>
<tbody id="dataDetails">
</tbody>
</table>
</div>
</div>
<!-- .card-preview -->
</div>
<!-- nk-block -->
< script >
let cnt = 1;
$(document).ready(function() {
getList();
})
const getList = () => {
axios.get(`${url}getList`)
.then(function(res) {
if (res.data.status == 'success') {
res.data.result.map((e) => {
if (e.role_id == '3') {
$("#dataDetails").append(`
<tr>
<td>${cnt++}</td>
<td>${e.name}</td>
<td>${e.title}</td>
</tr>
`
);
}
})
}
})
}
<
/script>
How do I fix the problem ? Because inside the table have data, but it keep displaying the No data available in table
after adding the $("#datatable").DataTable(); inside the const
$("#dataDetails").append(`
<tr>
<td>${cnt++}</td>
<td>${e.name}</td>
<td>${e.title}</td>
</tr>
`
$("#datatable").DataTable();
);
I got error with Uncaught SyntaxError: missing ) after argument list
showing at this line

Related

Uncaught Error when using the right selector in JQuery to indicate a HTML table and use a Bootstrap-table function

I have a table inside a div in my Index.cshtml page (Asp.Net core)
<div id="tbldiv">
<table
id="tblCampaign"
class="table"
data-toggle="table">
<thead>
<tr>
<th data-field="name" scope="col">Name</th>
<th data-field="country">Country</th>
<th data-field="totalBudget">Total Budget</th>
<th data-field="dailyBudget">Daily Budget</th>
<th data-field="model">Model</th>
<th data-field="payout">Payout</th>
<th data-field="status">Status</th>
<th data-field="link">Link</th>
<th data-field="advertiserID">Advertiser ID</th>
</tr>
</thead>
</table>
</div>
I want to populate my table using Bootstrap table.
Here's my site.js:
$(document).ready(function () {
$('Index').ready(function () {
$.getJSON('Index?handler=ListCampaigns', function (data) {
$("#tblCampaign").bootstrapTable({
columns: data
});
});
});
});
My OnGetListCampaign() in Index.cshtml.cs:
public JsonResult OnGetListCampaigns()
{
var jsonCampaigns = CampaignManager.GetCampaignsTest();
return new JsonResult(jsonCampaigns);
}
Which Select from SQL database and return a List of my Item.
Here's my problem:
When I run it, it complains about the selector in site.js if I understood the problem, I used $("#tblCampaign") for and it should be right to select the Id using #
Uncaught Error: Syntax error, unrecognized expression: <div class="bootstrap-table bootstrap4">
<div class="fixed-table-toolbar"></div>
<div class="fixed-table-container">
<div class="fixed-table-header"><table></table></div>
<div class="fixed-table-body">
<div class="fixed-table-loading">
<span class="loading-wrap">
<span class="loading-text">Loading, please wait</span>
<span class="animation-wrap"><span class="animation-dot"></span></span>
</span>
</div>
</div>
<div class="fixed-table-footer"><table><thead><tr></tr></thead></table></div>
</div>
<div class="fixed-table-pagination"></div>
</div>

Event when element has been loaded into the DOM

Using Angular, I have created a table that displays data. The data comes from a CSV that is parsed with the Papa Parse library. My data is almost immediately available in the console but takes about 10 seconds to be displayed in the table. Here is the code for the table:
<div class="table-responsive" *ngIf="searchData?.length" style="padding-bottom: 10px;">
<table class="table table-striped table-sm">
<thead>
<tr>
<th *ngFor="let header of headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let record of searchData; let i = index">
<ng-container *ngIf="((i && !searchOn) || searchOn) && record.length > 1">
<td *ngFor="let index of indexes; let x = index">
<a *ngIf="x == 3" href="{{record[index]}}" target="_blank">{{record[index]}}</a>
<ng-container *ngIf="x != 3">{{record[index]}}</ng-container>
</td>
</ng-container>
</tr>
</tbody>
</table>
</div>
I am wanting to display a loading spinner while the table loads in but will need to listen for when the data has loaded into the DOM. How can I do this?
You already have *ngIf="searchData?.length" so this will work for when data has been loaded. Now, you only need to show spinner when data is loading... Just add another if condition with if it is not:
<div *ngIf="!searchData?.length">Loading...</div>

Table disappears after adding an item

i'm using datatables to display a list of project names and I'm using a button to add an item to the displayed array, but when i do so, my table disappears.
Here's the code:
view.html
<button ng-click="vm.add()">Add item</button>
<table datatable="ng" dt-instance="vm.dtInstance" dt-options="vm.dtOptions" dt-column-defs="vm.dtColumnDefs"
class="table table-hover table-striped table-bordered table-condensed">
<thead>
<tr style="background-color: #00b3ee; color: white; border:none">
<th style="text-align: center">Nom</th>
<th style="text-align: center">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="project in vm.project.projects">
<td style="width: 90%; vertical-align: middle">{{project}}</td>
<td align="center" style="vertical-align: middle">
<button data-toggle="modal" ng-click="vm.setProject(project)"
data-target="#deleteEureciaProjectModal" type="button" class="btn btn-danger">
<i class="fa fa-trash"> </i>Supprimer
</button>
</td>
</tr>
</tbody>
</table>
controller.js
vm.add = () => vm.project.projects.push('new project');
fetchProject().then(result => {
vm.project = result;
// vm.project = {
// projects: [
// "project1",
// "project2",
// "project3",
// "project4"
// ],
// etc...
// }
vm.project.projects.push("newProject"); //it's working here, which is normal
//init datatable
vm.dtInstance = {};
vm.dtOptions = DTOptionsBuilder.newOptions()
.withBootstrap();
vm.dtColumnDefs = [];
for (var i = 0; i < 2; i++) {
if (i == 1) {
vm.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef(i).notSortable());
} else {
vm.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef(i));
}
}
})
I've tried using objects instead of strings.. doesn't work either. I don't know what's going on.
I cannot use server side processing. This has to be done using the angular way.
Ok, so i found it :
For some reason, it worked when i initialized vm.project.project before the promise call. So i created the vm.project object, and i added the project property to it by adding an empty array. I was then able to add items without having my table disappearing.

How to populate table based on button click

I have a table which contains some data about car makes.
It looks like this:
Now in the table appears data for all makes, but I need to show data only for the make that I've clicked. For example if I click on Audi to show data only for this make.
This is my view where I have populated the table:
<div class="row">
#{var testList = Model.ProductMatchingVehicles.GroupBy(p => p.Make.Name).ToList(); foreach (var item in testList) {
<div class="btn btn-danger btnMake" data-id="#item.Key" id=btnMake onclick="myFunction()">#item.Key</div>
} }
</div>
<div class="row">
<div class="col-xs-12">
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Engine</th>
<th>Data</th>
<th></th>
</tr>
</thead>
<tbody>
#if (Model.ProductMatchingVehicles != null) { foreach (var item in Model.ProductMatchingVehicles) {
<tr>
<td>#item.Make.Name</td>
<td>#item.Model.Name</td>
<td>#item.Engine.Name</td>
</tr>
} }
</tbody>
</table>
</div>
</div>
Can you please advise me how to achieve this in javascript or jquery? Thanks!
You can try with following code:
1) Modify <tbody> as follows:
<tbody>
#if (Model.ProductMatchingVehicles != null) { foreach (var item in Model.ProductMatchingVehicles) {
<tr class="vehicle_rows" data-refId="#item.Key">
<td>#item.Make.Name</td>
<td>#item.Model.Name</td>
<td>#item.Engine.Name</td>
</tr>
} }
</tbody>
Here we have added the class and data-refId attribute to each <tr>
2) Modify the button click function a bit:
<div class="btn btn-danger btnMake" data-id="#item.Key" id=btnMake onclick="myFunction(this)">#item.Key</div>
Here passing this reference to function
3) The function myFunction will have logic something like this:
function myFunction(obj){
var $button = $(obj);
var car_make = $button.data("id"); //reading the data-id of clicked button
//hide all rows first
$(".vehicle_rows").hide();
//show only currenly clicked buttons associated rows
$(".vehicle_rows[data-refId="+car_make+"]").show();
}

angularjs ng-repeat in a modal with ng-if

I have a list of data which i need to show in a modal popup. This modal is done in bootstrap. I have a controller attached to this html. Based on selected type or click i have to open the popup and display data in it in tabular format.
<modal visible="showModal" >
<div class="table-responsive" > <!-- <div class="table-responsive" > -->
<table class="table table-bordered table-hover success table-striped table-condensed">
<thead>
<tr class="success" style="table-layout:fixed">
<th class="alignAll visited" >Country</th>
<th class="alignAll visited" >Current Date</th>
<th class="alignAll visited" >Previous Date</th>
<th class="alignAll visited" >Difference</th>
</tr>
</thead>
<!-- thead Ends ./ -->
<tbody id="tableRowData">
{{dim}}
<tr ng-if="dim==totalRevenue" ng-repeat="disp in allDimensions">
<td class="alignLeft" ><strong>{{disp.country}}</strong></td>
<td class="textCenter" >{{disp.prevDate}}</td>
<td class="textCenter" >{{disp.prevToPrevDate}}</td>
<td class="textCenter" >{{disp.diffRevenue}}</td>
</tr>
</tbody>
</table>
</div>
<button type="button" class="btn btn-primary" ng-click="hideModal()" data-dismiss="modal">Close</button>
</modal>
and the controller looks like this.
app.controller('landingPageController', function($scope,$http,$rootScope,$q)
{
/*Global Variables*/
//Configure Every Page Aspect From MainController Such as common Calendar Dates
/*Modal PopUp At RootScope*/
$rootScope.showModal = false;
$rootScope.toggleModal = function(val)
{
$rootScope.showModal = !$scope.showModal;
if(val=="revenue")
{
$rootScope.dim = "totalRevenue";
log($rootScope.allDimensions);
// Filter Data Based On Selection
//$scope.filterDim = $.filterByDim($scope.dim,$rootScope.allDimensions);
// $.calculateDimensions(dim,$scope.allDimensions);
}
else if(val=="cartAban")
{
$rootScope.dim = "cartAbandonment";
} else if(val=="totalOrders")
{
$rootScope.dim = "totalOrders";
} else if(val=="pageView")
{
$rootScope.dim = "totalPageViews";
}
else
{
log("No Context Found");
}
};
$rootScope.hideModal = function()
{
$rootScope.showModal =false;
}
}
I have all $scope.allDimensions which contains all the object.My object looks like this.
{"data":[
{
"prevDate":"2015-05-27",
"prevToPrevDate":"2015-05-26",
"diffRevenue":110,
"diffCartAbandonment":-110,
"diffTotalOrders":-110,
"diffPageView":-110,
"country":"UKM",
"prevToPrevRevenue":110,
"prevRevenue":110,
"prevToCartAbandonment":110,
"prevCartAbandonment":110,
"prevToTotalOrders":110,
"prevTotalOrders":110,
"prevToPageView":110,
"prevPageView":110
},
{
"prevDate":"2015-05-27",
"prevToPrevDate":"2015-05-26",
"diffRevenue":110,
"diffCartAbandonment":-110,
"diffTotalOrders":-110,
"diffPageView":-110,
"country":"UKM",
"prevToPrevRevenue":110,
"prevRevenue":110,
"prevToCartAbandonment":110,
"prevCartAbandonment":110,
"prevToTotalOrders":110,
"prevTotalOrders":110,
"prevToPageView":110,
"prevPageView":110
}]}
I am not able to make this work.
Is there any way i can have ng-repeat use with ng-if and make this scenario work. ng-if="dim==<some value> can have any anything and based on that I would populate the table in a modal.
If you're just looking to have your data displayed then take a look at my Fiddle. This I believe is what you need..
<tr ng-repeat="disp in allDimensions.data">
Instead of ng-if you should use a filter (http://docs.angularjs.org/api/ng.filter:filter) on your ng-repeat to exclude certain items from your table.

Categories