I am new to angular 7 and want to implement datatable in angular 7.
I displayed data from api, and I triggered event from the table cell.
now I want to get data from the cell. but I get the data is null.
This is a component to display data from rest api.
ngOnInit() {
this.dataService.getMeterReading().subscribe(tourData => {
this.dtOptions = {
bLengthChange : false,
bInfo: false,
data: tourData,
columns: [
{
title: 'Unit',
data: 'UnitID'
},
{
title: 'Latitude',
data: 'DeviceID'
},
{
title: 'Logitude',
data: 'DeviceID'
},
{
title: 'Remarks',
data: 'DeviceID'
},
{
title: 'Image',
data: 'Image',
render: (data) => {
return data ? `<i class="fa fa-picture-o ImageMeterReading" data-blob="${data.data}" aria-hidden="true"></i>` : '';
}
}
]
};
$(document).on('click', 'i.ImageMeterReading', ($event) => {
let blob = $($event).data('blob');
});
this.dataTable = $(this.table.nativeElement);
this.dataTable.DataTable(this.dtOptions);
this.loading = false;
}
}
I expect to get BLOB data from the table cell.
but the actual output is null now.
Related
I have medications object as follow:
medications: [
{
'name': 'abc',
'id': naks23kn,
'resident': //this is resident id, resident is another object
.........
},
{.......},.....
]
I wanted to add another field residentName on this object list or is there any way so that I can display 'residentName' in the v-data-table ?:
medications: [
{
'name': 'abc',
'id': naks23kn,
'resident': //this is resident id, resident is another object
'residentName': 'ad' //set this new field
.........
},
{.......},.....
]
I am using `v-data-table> as :
<v-data-table
:headers="headers"
:items="medications"
:items-per-page="20"
:search="search"
class="elevation-23"
>
Now I want to add an residentName field based on the resident field. For this I did the following:
export default {
data() {
return {
medications: [],
}
},
computed: {
...mapGetters([
'allMedications', //this is used to get all medication from medication store
'getResidentsById',
]),
},
created() {
this.get_resident_list(),
this.get_registered_medication_list();
},
methods: {
...mapActions([
'get_registered_medication_list', //this is used to call API and set state for medication
'get_resident_list', //this is used to callAPI and set state for resident
]),
getResidentName(id) {
const resident = this.getResidentsById(id)
return resident && resident.fullName
},
},
watch: {
allMedications: {
handler: function () {
const medicationArray = this.allMedications;
console.log("Created this");
this.medications = medicationArray.map(medication => ({
...medication,
residentName: this.getResidentName(medication.resident)
})
);
},
immediate: true
},
}
}
In header
headers: [
{ text: 'Medication Name', value: 'name' },
{ text: 'Resident', value: 'residentName' },
]
This is in resident.js getter module
getResidentsById: (state) => (id) => {
return state.residents.find(resident => resident.id === id)
}
Edit: This is working, i.e I am getting residentName when the page is created but if I refresh the page then I get residentName=undefined
You can use map to add new prop to your each item in array
let medications = [{
name: 'abc',
id: 'naks23kn',
resident: 1
}]
medications.map(item => item.residentName = "Your Resident Name")
console.log(medications)
This should work
watch: {
allMedications: {
handler: function() {
const medicationArray = this.allMedications;
console.log("Created this");
this.medications = medicationArray.map(medication => medication.residentName = this.getResidentName(medication.resident)));
},
immediate: true
},
}
I want to create a form where in which the input data is added to a table that is on the next page. With VueJS.
The form has only a name and a dropdown menu.
I just want to input a name and a selected option to the table from the form.
The data from the dropmenu is - I'm unsure how to pull it into the dropdown.
Here is the JSON and my code:
Vue.js:
new Vue({
el: "#app",
data () {
return {
loading: false,
todos: [],
users_todos:[]
}
},
data:
{
currentstep: 1,
steps: [
{
id: 1,
title: "Personal",
icon_class: "fa fa-user-circle-o"
},
{
id: 2,
title: "Details",
icon_class: "fa fa-th-list"
},
{
id: 3,
title: "Send",
icon_class: "fa fa-paper-plane"
}
]
},
methods: {
stepChanged(step) {
this.currentstep = step;
}
},
mounted () {
this.loading = true;
axios.get('https://jsonplaceholder.typicode.com/users/1/todos?page=1')
.then(response => {this.users_todos = response.data})
.catch(error => console.log(error))
.finally(() => this.loading = false)
}
});
I have a page with a jQuery Datatable being from Ajax, and drawn with the npm treeGrid plugin. The table is drawn fine, but i'm trying to catch the end of the table loading to do some stuff (get additional data to be ready when the tree is expanded). The init.dt event or the initComplete option are fired before the table is drawn. If i put an alert in the event it is shown after the table top and bottom are drawn but before the data is rendered. And if i try to access the table data it is undefined.
Important: I get the same behavior if I remove the treeGrid object from the DataTable options. I even removed the treeGrid javascript...
So my question is: how can i have code run when everything is really ready?
Below are two implementations of the Datatble, with either init.dt or initComplete. I am also adding the columns object. Below are two screenshots of the alert and then the table drawn.
$(document).ready(function () {
$('#mainTable')
.on('init.dt', function () {
alert('Table initialisation complete')
})
.DataTable({
"ajax": '/API/RRate',
'treeGrid': {
'left': 20,
'expandIcon': '<span>+</span>',
'collapseIcon': '<span>-</span>'
},
"columns": columns
});
});
$(document).ready(function () {
$('#mainTable')
.DataTable({
"ajax": '/API/RRate',
'treeGrid': {
'left': 20,
'expandIcon': '<span>+</span>',
'collapseIcon': '<span>-</span>'
},
"columns": columns,
"initComplete": function (settings, json) {
alert('Table initialisation complete')
}
});
});
var columns = [
{
title: '',
target: 0,
className: 'treegrid-control',
data: function (item) {
if (item.children) {
return '<span>+</span>';
}
return '';
}
},
{
title: 'Name',
target: 1,
data: function (item) {
return item.name;
}
},
{
title: 'HeadCount',
target: 2,
data: function (item) {
return item.headCount;
}
},
{
title: 'Responded',
target: 3,
data: function (item) {
return item.responded;
}
},
{
title: 'Percentage',
target: 4,
data: function (item) {
return item.percentage;
}
},
{
title: 'InProcess',
target: 5,
data: function (item) {
return item.inProcess;
}
},
];
OK, i found how to do this:
function AfterLoad()
{
table.rows().each(function () {
console.log(this.cells(0));
var rowData = this.data();
console.log(rowData[0]);
});
}
$(document).ready(function () {
table = $('#mainTable')
.DataTable({
"ajax": '/API/RRate',
'treeGrid': {
'left': 20,
'expandIcon': '<span>+</span>',
'collapseIcon': '<span>-</span>'
},
"columns": columns,
"initComplete": function (settings, json) {
AfterLoad();
}
});
});
I'm trying to implement a datatable with mdbootstrap in vue.js.
I would like to update table data on events and when initialized but it does not work.
Template;
<div class="col-md-12">
<mdb-datatable
:data="data"
striped
bordered
/>
</div>
Script;
import { mdbDatatable } from 'mdbvue';
export default {
name: 'userManagement',
components: {
mdbDatatable
},
data() {
return {
className:"",
classList: [],
data: {
columns: [
{
label: 'Name',
field: 'className',
sort: 'asc'
}, {
label: 'ID',
field: 'id',
sort: 'asc'
}
],
rows: [
{
className: 'Tiger Nixon',
id:1
},
{
className: 'Garrett Winters',
id:2
}
]
}
}
},
methods: {
getClassList(){
var _this = this;
this.$axios.get('my_url/admin/classes').then(function (response) {
if (response.status === 200) {
_this.data.rows = [];
response.data.forEach(function (obj) {
let item = {
className: obj.className,
id: obj.id
};
_this.data.rows.push(item);
});
}
}).catch(function (err) {
alert("" + err);
});
}
},
mounted(){
this.getClassList();
},
It always shows default values, I check the data rows from console the value seems to be updated but no change on the datatable.
Any help would be appreciated.
We've found the solution for Your issue.
The new code is available here: https://mdbootstrap.com/docs/vue/tables/datatables/#external-api
Also to make sure the data is reactive it's necessary to add the following code to the Datatable component in our package:
watch: {
data(newVal) {
this.columns = newVal.columns;
},
(...)
}
It will be fixed in the next MDB Vue release.
I installed mdbvue 5.5.0 which includes the change that mikolaj described. This caused the table columns to update when changed but in order to get the rows to update too I had to add to the watch method in Datatable.vue as follows:
watch: {
data(newVal) {
this.columns = newVal.columns;
this.rows = newVal.rows;
},
This is my JavaScript code. My table id is tblEmployee.
$(document).ready(function (){
$('#tblEmployee').DataTable({
ajax: {
"url": "http://localhost:57507/api/Employee/Get",
"dataSrc": ""
},
columns : [{ data: 'Employee_Id' }, { data: 'Project_Id' }, { data: 'Grade_Id' }, { data: 'Site_Id' },{ data: 'Location_Id' },{ data: 'StartDate' }, { data: 'EndDate' }, { data: 'BillRate' }, { data: 'Role' },
]
});
});
This is the data from my database which the web API calls:
This is because you are setting the dataSrc = "" . As per data-tables docs dataSrc should be set to empty string if you are reading via ajax from a file. Since you are accessing the api to get a json string try something like this
A working js fiddle (with another Url)
var url = 'http://localhost:57507/api/Employee/Get';
var table = $('#example').DataTable({
'processing': true,
'serverSide': true,
'ajax': {
type: 'POST',
'url': url,
'data': function(d) {
console.log(d.order);
return JSON.stringify(d);
}
},
columns: [{
data: 'Employee_Id'
}, {
data: 'Project_Id'
}, {
data: 'Grade_Id'
}, {
data: 'Site_Id'
}, {
data: 'Location_Id'
}, {
data: 'StartDate'
}, {
data: 'EndDate'
}, {
data: 'BillRate'
}, {
data: 'Role'
}, ]
});