Using this as an example how do I control the format of the values in the cells?
for example, how would I format the Extn. column to read 5,407 or 54.07?
Name Position Office Extn. Start date Salary
Airi Satou Accountant Tokyo 5407 $2008/11/28 $162,700
I have been searching here and here but I can't quite work it out. can anyone advise?
I have tried something like this, but am having no success:
$(document).ready(function() {
$('#example').DataTable( {
data: dataSet,
columns: [
{ title: "Name" },
{ title: "Position" },
{ title: "Office" },
{ title: "Extn." },
{ title: "Start date" },
{ title: "Salary" }
],
"aoColumnDefs": [ {
"aTargets": [ 4 ],
"mRender": function (data, type, full) {
//var formmatedvalue=data.replace("TEST")
//return formmatedvalue;
return '$'+ data;
}
}]
} );
} );
Use the columns.render option.
Either with the built-in helper, to get a thousand seperator (5,407):
{
title: "Extn.",
render: $.fn.dataTable.render.number(',', '.', 0, '')
},
JSFiddle example
Or do it yourself with a custom function (54.07):
{
title: "Extn.", render: function (data, type, row) {
return data / 100;
}
},
JSFiddle example
Related
I want to make a function to sum up the value in data with vue.js but I don't know how to code it.
var quiz = {
questions: [
{
text: "who am I?",
responses: [
{ text: "John", value: 1000 },
{ text: "James", value: 2000 },
{ text: "Lucy", value: 3000 },
{ text: "Mari", value: 4000 }
]
},
{
text: "What do you want to be?",
responses: [
{ text: "first selector", value: 10 },
{ text: "second selector", value: 20 },
{ text: "third selector", value: 30 },
{ text: "fourth selector", value: 40 }
]
},
{
text: "How old are you?",
responses: [
{ text: "first selector", value: 10 },
{ text: "second selector", value: 20 },
{ text: "third selector", value: 30 },
{ text: "fourth selector", value: 40 }
]
}
]
}
and html code
<template v-if="resultOne">
<p>First result</p>
</template>
I had a following data like this, and I want to make some v-if code by using the value of them.
For example, if the sum of value become 1020, 1030, 1040, and 1050, I want to show "resultOne."
How can I make a code like this?
It's difficult to give you a complete answer as I don't know where quiz is coming from. Is it hardcoded or is it dynamic?
But either way, here is a method you can use to calculate the total value of the data:
const totalValue = quiz.reduce((total, item) => {
const itemSum = item.responses.reduce((sum, response) => {
return sum + response.value;
}, 0);
return total + itemSum;
}, 0);
If the data is static then I would suggest just doing the calculation inside a created() hook and storing it in a data prop.
like:
data() {
return {
totalValue: 0
}
},
created() {
this.calculateValue();
},
methods: {
calculateValue() {
this.totalValue = quiz.reduce((total, item) => {
const itemSum = item.responses.reduce((sum, response) => {
return sum + response.value;
}, 0);
return total + itemSum;
}, 0);
}
}
and then your v-if is simply v-if="[1020, 1030, 1040, 1050].includes(totalValue)"
If quiz is more dynamic then you can try to use a computed method.
I have a vuejs data like this:
new Vue({
el: "#app",
data() {
return {
alpha: [{
artist: "Aa"
}, {
artist: "Az"
},
{
artist: "Ab"
},
{
artist: "Ba"
},
{
artist: "Bb"
},
{
artist: "Bc"
},
{
artist: "Da"
},
{
artist: "Db"
}, {
artist: "Dc"
}, {
artist: "Dx"
},
]
}
}
})
What I want to do is simple to take the first letters of artist: A, B, C, D and create an array from them. After that I want to group all the artists by their index. So, the output would be:
A: (3) ["Aa", "Az", "Ab"]
B: (3) ["Ba", "Bb", "Bc"]
D: (4) ["Da", "Db", "Dc", "Dx"]
I can do this in my code, see below but the template isn't rendering it.
Here is the fiddle https://jsfiddle.net/fcas1wke/ for that works, you can see the console for the output
The array doesn't render because you are using non-numeric indexes on your array. This is described in more detail here, but basically non-numeric indexes can't be iterated over so they won't appear in the output.
A more standard way to handle this would be to use an object instead of an array. Here's a working version of your component:
Vue.component("alphabets", {
props: ['data'],
computed: {
stack() {
const result = {};
this.data.forEach(function(element) {
if (Array.isArray(result[element.artist[0]])) {
result[element.artist[0]].push(element.artist);
} else {
result[element.artist[0]] = [element.artist];
}
});
return result;
},
},
template: `<div>{{ stack }}</div>`,
});
Note this version uses a computed property instead of modifying the component's state on created.
I want to get the selected checkbox value from the data table, in my table, I have two columns and the first one is for the checkbox and the second one is for display values.
Here is just returning a checkbox. How can we know that there is a click that happens?
Help me.
Here is the code
function BindColumSelectTable(DataExchangeList) {
debugger
$('#columnSelectTable').DataTable({
"data": DataExchangeList,
"destroy": true,
"columns": [
{
data: 'check', render: function (data, type, row) {
debugger;
return '<input type="checkbox"/>'
}
},
{ data:"FieldCaption" },
],
"columnDefs": [
{
orderable: false,
className: "select-checkbox",
targets:0
},
{ className:"tabletdAdjust","targets":[1]}
],
});}
I'm using jquery data table
function BindColumSelectTable(DataExchangeList) {
$('#columnSelectTable').DataTable({
"data": DataExchangeList,
"destroy": true,
"columns": [
{
data: 'check', render: function (data, type, row) {
var checkbox = $("<input/>",{
"type": "checkbox"
});
if(data === "1"){
checkbox.attr("checked", "checked");
checkbox.addClass("checked");
}else{
checkbox.addClass("unchecked");
}
return checkbox.prop("outerHTML")
}
},
{ data:"FieldCaption" },
],
"columnDefs": [
{
orderable: false,
className: "select-checkbox",
targets:0
},
{ className:"tabletdAdjust","targets":[1]}
],
});}
Try this
Here is the answer I use onclick function for each click it will trigger the function
function BindColumSelectTable(DataExchangeList) {
debugger
$('#columnSelectTable').DataTable({
"data": DataExchangeList,
"destroy": true,
"columns": [
{
data: 'ColumnCheck', render: function (data, type, row) {
debugger;
return '<input type="checkbox" onclick="ColumnCheck(this)"/>'
}
},
{ data:"FieldCaption" },
],
"columnDefs": [
{
orderable: false,
className: "select-checkbox",
targets:0
},
{ className:"tabletdAdjust","targets":[1]}
],
});
}
the above code is the same i used in the question only one thing i added is an onclick function
and the onclick function is
function ColumnCheck(thisObj) {
debugger;
var dataExchangeCheckColumnVM = $('#columnSelectTable').DataTable().row($(thisObj).parents('tr')).data();
var dataExchangeCheckColumnList = $('#columnSelectTable').DataTable().rows().data();
for (var i = 0; i < dataExchangeCheckColumnList.length; i++) {
if (dataExchangeCheckColumnList[i].FieldCaption !== null) {
if (dataExchangeCheckColumnList[i].FieldCaption === dataExchangeCheckColumnVM.FieldCaption) {
dataExchangeCheckColumnList[i].ColumnCheck = thisObj.checked;
}
}
}
_dataExchangeColumnList = dataExchangeCheckColumnList;
}
so i used an property **ColumnCheck ** it is boolean variable. on each iteration it will added a true value if check box is checked
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'
}, ]
});
Trying to hook up a client/server interface for record updates. Alles gute until the very last mile: after returning the response to the client I get this error:
TypeError: f is undefined
dataTables.editor.js (line 252 col 138)
The response is:
{"data":
[{"planid":null,"evnamelast":"Duck","eveligibleincome":3232,"DT_RowId":10003869,"evnamefirst"
:"Daffy","estart":1440054000000,"eligibilityversionid":10003869,"evpositionname ":"Duck duck goose"}] }
The columns are setup as follows:
var dispCols = [{
data: null,
defaultContent: '',
className: 'select-checkbox',
orderable: false
},
{ data: "evnamefirst" },
{ data: "evnamelast" },
{ data: "evpositionname" },
{ data: "planid" },
{ data: "estart" },
{ data: "eveligibleincome", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
];
And the DataTables setup as:
//Define the Editor
editor = new $.fn.dataTable.Editor( {
ajax: {
"url": "/grid?pAction=UpdateRecs&recType=" + recType,
"dataSrc": ""
},
idSrc: "eligibilityversionid",
table: "#" + GRID_ID,
/*fields: columns */
fields: fields
} );
//Setup DataTable
var table = $GRID.DataTable( {
dom: "Bfrtip",
ajax: {
"url": "/grid?pAction=GetRecords&recType=" + recType,
"dataSrc": ""
},
columns: dispCols,
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
} );
Thanks in advance!
Asked this back in October 15, now it is August 2016. So I am going to answer this myself:
Use handsontable.