Develop Reference

DataTables constructing input data via Javascript dynamically does not work - javascript

I'm trying to fill up a table dynamically. Following is my code. dataTest contains the final output of dataSet after the for loop. Using dataTest as the input for the table, the table works properly and it fills up. But, using dataSet throws out the error DataTables warning: table id=example - Requested unknown parameter '1' for row 0, column 1.. I've tried looking at https://datatables.net/manual/tech-notes/4 about this, but am not able to figure out. dataSet and dataTest essentially have the same value. Why does dataTest work but dataSet doesn't?
dataSet = "[";
for (prop = 0; prop < 26; prop++)
{
test = "['" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "','" + String(prop) + "'],";
test = test.replace(/'/g, '"');
// console.log(test);
dataSet = dataSet.concat(test);
// console.log(test.replace(/'/g, '"'));
// test = "'" + String(array0[prop]) + "' : '" + String(array1[prop]) + "'";
// console.log(JSON.stringify(test));
}
end = "]";
dataSet = dataSet.concat(end);
console.log(dataSet);
var dataTest = [["0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0"],["1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1"],["2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2","2"],["3","3","3","3","3","3","3","3","3","3","3","3","3","3","3","3","3","3","3","3"],["4","4","4","4","4","4","4","4","4","4","4","4","4","4","4","4","4","4","4","4"],["5","5","5","5","5","5","5","5","5","5","5","5","5","5","5","5","5","5","5","5"],["6","6","6","6","6","6","6","6","6","6","6","6","6","6","6","6","6","6","6","6"],["7","7","7","7","7","7","7","7","7","7","7","7","7","7","7","7","7","7","7","7"],["8","8","8","8","8","8","8","8","8","8","8","8","8","8","8","8","8","8","8","8"],["9","9","9","9","9","9","9","9","9","9","9","9","9","9","9","9","9","9","9","9"],["10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10","10"],["11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11","11"],["12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12","12"],["13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13","13"],["14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14","14"],["15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15","15"],["16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16","16"],["17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17","17"],["18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18","18"],["19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19","19"],["20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20","20"],["21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21","21"],["22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22","22"],["23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23","23"],["24","24","24","24","24","24","24","24","24","24","24","24","24","24","24","24","24","24","24","24"],["25","25","25","25","25","25","25","25","25","25","25","25","25","25","25","25","25","25","25","25"],]
$(document).ready(function() {
$('#example').DataTable({
data: dataSet,
columns: [{
title: "C1"
},
{
title: "C2"
},
{
title: "C3"
},
{
title: "C4"
},
{
title: "C5"
},
{
title: "C6"
},
{
title: "C7"
},
{
title: "C8"
},
{
title: "C9"
},
{
title: "C10"
},
{
title: "C11"
},
{
title: "C12"
},
{
title: "C13"
},
{
title: "C14"
},
{
title: "C15"
},
{
title: "C16"
},
{
title: "C17"
},
{
title: "C18"
},
{
title: "C19"
},
{
title: "C20"
},
]
// columns: [
// { title: "Name" },
// { title: "Position" },
// { title: "Office" },
// { title: "Extn." },
// { title: "Start date" },
// { title: "Salary" }
// ]
});
});
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" width="100%"></table>

Looking at your doc link it seems you saw an array and decided to markup an array as a String (no good since data table expects an array and not a string that looks like an array). What you should have done is create the array using JavaScript arrays.
It worked with you variable dataTest because that is an actual array, and (again) not a string that looks like an array
Below is a example of how you can create the data properly for the data table.
$(document).ready(function() {
var dataSet = [];
for (var prop = 0; prop < 5; prop++) {
var innerArray = [];
for (var innerProp = 0; innerProp < 3; innerProp++) {
innerArray.push(innerProp);
}
dataSet.push(innerArray);
}
//console.log(dataSet);
$('#example').DataTable({
data: dataSet,
columns: [{
title: "C1"
},
{
title: "C2"
},
{
title: "C3"
}
]
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" width="100%"></table>

Related

I use ColumnDef to create column in datatables and it return [object HTMLInputElement] in the note texterea but the other was fine
columnDefs: [
{
title: "STT",
targets: 0,
data: null,
render: function (data, type, row, meta) {
return (meta.row + meta.settings._iDisplayStart + 1);
},
},
{
title: "Loại sản phẩm*",
targets: 1,
data: null,
render: function (data, type, row, meta) {
return '<textarea style="width: 300px;" id="productname' + data.id + '" type="text" onchange="ChangeProductName(\'' + data.id + '\',this)" name="' + data.id + '" value="' + data.productname + '">' + data.productname + '</textarea>';
}
},
{
title: "Điều kiện*",
targets: 2,
data: null,
render: function (data, type, row, meta) {
return '<textarea style="width: 300px;" id="condition' + data.id + '" type="text" onchange="ChangeCondition(\'' + data.id + '\',this)" name="' + data.id + '" value="' + data.condition + '">' + data.condition + '</textarea>';
}
},
{
title: "Rebate(%)*",
targets: 3,
data: null,
width: "70",
render: function (data, type, row, meta) {
return '<div><input id="rebate' + data.id + '" type="number" style="width: 70px;" onchange="ChangeRebate(\'' + data.id + '\',this)" name="' + data.id + '" value="' + data.rebate + '"></div>';
}
},
{
title: "Ghi chú",
targets: 4,
data: null,
/*width: "250",*/
render: function (data, type, row, meta) {
return '<textarea id="note' + data.id + '" type="text" onchange="ChangeNote(\'' + data.id + '\',this)" name="' + data.id + '" value="' + data.note + '">' + data.note + '</textarea>';
}
},
{
title: "",
targets: 5,
data: null,
className: "dt-center",
width: "70",
render: function (data, type, row, meta) {
// return ' <i style="cursor: pointer;font-size: 25px;padding-bottom: 30px;" class="fa fa-trash removePG" aria-hidden="true" onclick=removePG(\'' + data.id + '\')></i>';
return '<div class="btn btn-danger removePG" style="cursor: pointer;font-size:25px;" ><i class="fa-solid fa-trash"></i></div>';
}
},
]
Here is the display
Why only the textarea in note have this error
I appreciate every explanation and suggestion about how I should fix this

It's clearly textarea value issue. Looks like data.note is object, but it've got to be a string. Check it twice)

When I click on the download link in the attached example, I want only the download event to be executed, but not the editor event.
Dojo Example: https://dojo.telerik.com/EcEDiGUB/27
HTML:
<div id="grid"></div>
JS:
var grid;
$(document).ready(function(){
grid = $("#grid").kendoGrid({
columns: [
{
field: "name",
},
{
field: "file",
template: function(e){
return '<div class="box">' + e.file + '</div>';
},
editor: function(e){
alert("open media editor");
return true;
}
}
],
dataSource: {
data: [
{ id: 1, name: "Jane Doe", file: "<div class='container'></div>" +
"<div class='file k-icon k-i-file-pdf'></div>" +
"<div class='download k-icon k-i-download'></div>" +
"</div>" },
{ id: 2, name: "John Doe", file: "<div class='container'></div>" +
"<div class='file k-icon k-i-file-pdf'></div>" +
"<div class='download k-icon k-i-download'></div>" +
"</div>" +
"<div class='container'></div>" +
"<div class='file k-icon k-i-file-xls'></div>" +
"<div class='download k-icon k-i-download'></div>" +
"</div>" }
],
schema:{
model: {
id: "id",
fields: {
file: { type: "string"}
}
}
}
},
editable: true,
}).data("grid");
$(".download").on("click", function(e){
e.preventDefault();
alert("download media");
});
It is now that the editable mode:
editable: true,
should be kept, because it is possible to edit as well as to start a download.
How can I start the download by clicking on the download icon without the editor event being fired?

you can use the columns.editable property:
{
field: "file",
template: function(e){
return '<div class="box">' + e.file + '</div>';
},
editable: function(){
return false;
},
editor: function(e){
alert("open media editor");
return true;
}
}
Dojo

I am building a custom plugin on WordPress to insert a [video_embed] shortcode with two attributes ("id" and "border"). The button for the TinyMCE editor that I have created is working but does not register the values. I have tried different ways of assigning the values to be passed but they do not work. The shortcode below is always returned as when I assign the variable 'returnText' as also shown. However I know this is not correct but in other methods I have tried no shortcode is returned:
[video_embed id="undefined" border="undefined"]
var returnText = '\[video_embed id="' + win[0] + '" border="' + win[1] + '"\]';
Is there something I'm missing? My full code for the JS file for the button is below.
(function(){
tinymce.create('tinymce.plugins.vidembedtinymceplugin', {
init: function(ed, url){
ed.addButton('vidembedbtn', {
title: 'Video Embed',
cmd: 'vidembedBtnCmd',
image: url + '/video-btn.png'
});
ed.addCommand('vidembedBtnCmd', function(){
var selectedText = ed.selection.getContent({format: 'html'});
var win = ed.windowManager.open({
title: 'Video Embed Properties',
body: [
{
type: 'textbox',
name: 'vidid',
label: 'Video ID',
minWidth: 500,
value: ''
},
{
type: 'textbox',
name: 'border-color',
plugins: "textcolor colorpicker",
toolbar: "forecolor backcolor",
label: 'Border Color',
minWidth: 500,
value : ''
},
],
buttons: [
{
text: "Ok",
subtype: "primary",
onclick: function(v) {
win.close();
var returnText = '\[video_embed id="' + win[0] + '" border="' + win[1] + '"\]';
var open = '\[';
var close = ']';
ed.execCommand('mceInsertContent', 0, returnText);
}
},
{
text: "Skip",
onclick: function() {
win.close();
var returnText = '' + selectedText + '';
ed.execCommand('mceInsertContent', 0, returnText);
}
},
{
text: "Cancel",
onclick: function() {
win.close();
}
}
],
onsubmit: function(e){
var params = [];
if( e.data.vidid.length > 0 ) {
params.push('id="' + e.data.vidid + '"');
}
if( e.data.border-color.length > 0 ) {
params.push('border="' + e.data.border-color + '"');
}
if( params.length > 0 ) {
paramsString = ' ' + params.join(' ');
}
var returnText = '' + selectedText + '';
ed.execCommand('mceInsertContent', 0, returnText);
}
});
});
},
getInfo: function() {
return {
longname : 'Video Embed',
author : 'Plugin Author',
authorurl : 'https://www.axosoft.com',
version : "1.0"
};
}
});
tinymce.PluginManager.add( 'vidembedtinymceplugin',
tinymce.plugins.vidembedtinymceplugin );
})();

First off, change all the e.data.border-color to e.data['border-color']!
The reason is because the key (which is border-color) contains a dash (-). But for more info, see the MDN doc. (find the section that has "any property name that is not a valid JavaScript identifier")
Now here's how you can solve the "undefined" issue:
The onclick value of the "Ok" button should be set to submit. So
use this instead of what you currently have:
{
text: "Ok",
subtype: "primary",
onclick: 'submit'
},
In the onsubmit() function, change this:
if( params.length > 0 ) {
paramsString = ' ' + params.join(' ');
}
var returnText = '' + selectedText + '';
to this one:
params = params.join(' ');
var returnText = (params ? '\[video_embed ' + params + '\]' : '') +
selectedText + '';
Try a demo

I have a database of lots of info that build the table. What I want to be able to do is load the data through the ajax call and then be able to edit the data in the table. But I can't get the data to show up on the page. I'm using the DataTables in another interface and the loading, sorting, and other cool features work. I haven't used Editor before and I'm a little confused.
function drawDataTable(){
var len = allocationData.length;
html = "<div id='dataTableDiv'><table id='dataTable' class='table table-bordered table-striped dataTable' role='grid'><thead><tr role='row'><th>System Name</th><th>Gatherer</th><th>Operator</th><th>County</th><th>Sample Date</th><th>Daily Avg</th></tr></thead><tbody>";
for (i=0;i<len;i++){
html += "<tr><td>" + allocationData['SystemName'][i] + "</td><td>" + allocationData['Gatherer'][i] + "</td><td>" + allocationData['Operator'][i] + "</td><td>" + allocationData['County'][i] + "</td><td>" + allocationData['SampleDate'][i] + "</td><td>" + allocationData['DailyAvg'][i] + "</td></tr>";
}
html += "</tbody></table></div>";
$(".table-responsive").html(html);
}
$(function(){
editor = new $.fn.dataTable.Editor( {
"ajax": "qry/dataTable.php",
"table": "#dataTable",
"fields":[{
"name": "SystemName"
},{
"name": "Gatherer"
},{
"name": "Operator"
},{
"name": "County"
},{
"name": "SampleDate"
},{
"name": "DailyAvg"
}]
});
$('#dataTable').DataTable({
dom: "Bfrtip",
ajax: {
type: "POST",
url: "qry/dataTable.php",
success: function(){
drawDataTable();
}
},
serverSide: true,
columns: [
{data: "SystemName"},
{data: "Gatherer"},
{data: "Operator"},
{data: "County"},
{data: "SampleDate"},
{data: "DailyAvg"}
],
select: true,
buttons: [
{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
});
});

Try editing your success: function. See if this helps.
success: function(result){
allocationData = JSON.parse(result);
drawDataTable();
}

I am new to Rally as well as javascript.I have taken the script from this site and i wanted to include the Iteration name along with the records.But it gives me object Object message when i executing the HTML Page.I need to solve this issue.Looking for assistance and thanks in advance.
-Mani
description here][1]
<!DOCTYPE html>
<html>
*emphasized text*<head>
<title>UserStoryWithPredecessors</title>
<script type="text/javascript" src="https://rally1.rallydev.com/apps/2.0p5/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
Ext.create('Rally.data.WsapiDataStore', {
model: 'UserStory',
fetch:
['FormattedID','Name','Iteration','Predecessors','FormattedID','CreationDate'],
autoLoad: true,
listeners: {
load: this._onDataLoaded,
///query: q,
scope: this
}
});
},
_onDataLoaded: function(store, data) {
var records = [];
Ext.Array.each(data, function(record) {
//Perform custom actions with the data here
//Calculations, etc.
var myPredecessors = record.get('Predecessors');
var predecessorData = "";
var predecessorCreationDate = "";
// Loop through and process Predecessor data
for (var i=0; i<myPredecessors.length; i++) {
thisPredecessor = myPredecessors[i];
thisPredecessorFormattedID = thisPredecessor["FormattedID"];
thisPredecessorName = thisPredecessor["Name"];
// Re-format Date/time string
thisPredecessorCreationDateString = thisPredecessor["CreationDate"];
thisPredecessorCreationDate = new
Date(thisPredecessorCreationDateString);
thisYear = thisPredecessorCreationDate.getFullYear();
thisMonth = thisPredecessorCreationDate.getMonth();
thisDay = thisPredecessorCreationDate.getDate();
thisPredecessorFormattedDate = thisMonth + "/" + thisDay + "/" +
thisYear;
// Post-pend updated data to value for array
predecessorData += thisPredecessorFormattedID + ": " +
thisPredecessorName + "<br>"
predecessorCreationDate += thisPredecessorFormattedDate + "<br>";
}
records.push({
FormattedID: record.get('FormattedID'),
Name: record.get('Name'),
Iteration: String(record.get('Iteration')),
Predecessors: predecessorData,
PredecessorCreationDate: predecessorCreationDate,
});
});
this.add({
xtype: 'rallygrid',
store: Ext.create('Rally.data.custom.Store', {
data: records,
pageSize: 20
}),
columnCfgs: [
{
text: 'FormattedID', dataIndex: 'FormattedID', width: '60px'
},
{
text: 'Name', dataIndex: 'Name', width: '400px'
},
{
text: 'Iteration', dataIndex: 'Iteration', width: '500px'
},
{
text: 'Predecessors', dataIndex: 'Predecessors', width: '200px'
},
{
text: 'Predecessor Creation Date(s)', dataIndex:
'PredecessorCreationDate', width: '200px'
}
]
});
}
});
Rally.launchApp('CustomApp', {
name: 'UserStoryWithPredecessors'
});
});
</script>
<style type="text/css">
.app {
/* Add app styles here */
}
</style>
</head>
<body></body>
</html>

Iteration attribute on a user story object is a reference to the actual Iteration object in the WS API. You need to traverse to name using a syntax like this:
Iteration: (record.get('Iteration') && record.get('Iteration')._refObjectName) || 'None'
You want to check that Iteration is not null before you output record.get('Iteration')._refObjectName)