I'm using javaScript library called Tabulator trying to add column and allow users to have the ability to upload 1 image file in each row .
( i only use JavaScript not Jquery) I saw this link which helped a lot but didn't cover it all.
I've gone as far as adding a new column with a button in each row but i need to be able to add some sort of ID for each row so i can select it and connect it to Form that will post the image to my back-end server.
i couldn't find any document about how I can do this with this library but i have found some answers which have let me to this point.
var openButton = function(value, data, cell, row, options){ //plain text value
var button ='<button>upload ID </button>';
button.addEventListener('click',function(){
console.log("button is working");
});
return button;
};
I keep getting Error on my Console button.addEventListener is not a function
I'm using javaScript library called Tabulator trying to add column and allow users to have the ability to upload 1 image file in each row .
( i only use JavaScript not Jquery) I saw this link https://github./olifolkerd/tabulator/issues/153 which helped a lot but didn't cover it all.
I've gone as far as adding a new column with a button in each row but i need to be able to add some sort of ID for each row so i can select it and connect it to Form that will post the image to my back-end server.
i couldn't find any document about how I can do this with this library but i have found some answers which have let me to this point.
var openButton = function(value, data, cell, row, options){ //plain text value
var button ='<button>upload ID </button>';
button.addEventListener('click',function(){
console.log("button is working");
});
return button;
};
I keep getting Error on my Console button.addEventListener is not a function
3 Answers
Reset to default 8i finally figured out
first must add the variable that contain the function
var the_Function = function(cell, formatterParams, onRendered){ //plain text value
//var formA = '<form class="" action="/upload" method="post">'
//var inputFn = '<input type="file" id="imgupload" />' ;
//var uploadBtnn = '<button type="submit" id="OpenImgUpload">ID upload</button></form>'
//return uploadBtnn
return "<i class='fa fa-print'>function_trigger</i>";
};
then we must add the formatter to the column's
table.addColumn({title:"ID", field: "ID" ,formatter:the_Function,width:100, align:"center",cellClick:function(e, cell){
//button's function for example
var Btn = document.createElement('Button');
Btn.id = "Btn_Id";
console.log(Btn);
}
You can't attach event listeners to string values.
You need to first create the element by appending it to .innerHTML of another DOM element.
Then you will need to attach a click event listener on the document itself, not the element you dynamically created, because addEventListener will only work for elements that are part of the HTML tree when the javascript is initially loaded.
function add_button() {
var uid = "btn_" + document.querySelectorAll("button").length;
var button ='<button id='+ uid +'>upload ID </button>';
document.getElementById("buttons").innerHTML += button;
document.addEventListener('click',function(e){
if(e.target && e.target.id== uid){
console.log("button " + uid + " is working");
}
});
}
add_button();
add_button();<div id="buttons">
</div>This is clearly explained at Tabulator: http://tabulator.info/examples/3.1
//Generate print icon
var printIcon = function(cell, formatterParams){ //plain text value
return "<i class='fa fa-print'></i>";
};
//Build Tabulator
$("#example-table").tabulator({
height:"311px",
fitColumns:true,
rowFormatter:function(row){
if(row.getData().col == "blue"){
row.getElement().css({"background-color":"#A6A6DF"});
}
},
columns:[
{formatter:"rownum", align:"center", width:40},
{formatter:printIcon, width:40, align:"center", cellClick:function(e, cell){alert("Printing row data for: " + cell.getRow().getData().name)}},
{title:"Name", field:"name", width:150, formatter:function(cell, formatterParams){
var value = cell.getValue();
if(value.indexOf("o") > 0){
return "<span style='color:red; font-weight:bold;'>" + value + "</span>";
}else{
return value;
}
}},
{title:"Progress", field:"progress", formatter:"progress", sorter:"number", width:100},
{title:"Rating", field:"rating", formatter:"star", formatterParams:{stars:6}, align:"center", width:120},
{title:"Driver", field:"car", align:"center", formatter:"tickCross", width:50},
{title:"Col", field:"col" ,formatter:"color", width:50},
{title:"Line Wraping", field:"lorem" ,formatter:"textarea"},
{formatter:"buttonCross", width:30, align:"center"}
],
});
This is how I used it by triggering a window.location to the edit page:
<script>
//Generate Edit icon
var editIcon = function(cell, formatterParams){ //plain text value
return "<i class='fas fa-pen-square'></i>";
};
//define data array
var tabledata = [
<?php echo $tableData; ?>
];
var table = new Tabulator("#example-table", {
data:tabledata, //load row data from array
layout:"fitColumns", //fit columns to width of table
responsiveLayout:"hide", //hide columns that dont fit on the table
tooltips:true, //show tool tips on cells
addRowPos:"top", //when adding a new row, add it to the top of the table
history:true, //allow undo and redo actions on the table
pagination:"local", //paginate the data
paginationSize:20, //allow XX rows per page of data
movableColumns:false, //allow column order to be changed ?
resizableRows:false, //allow row order to be changed ?
initialSort:[ //set the initial sort order of the data
{column:"name", dir:"asc"},
],
columns:[ //define the table columns
{title:"Department", field:"userDeptName", editor:false},
{title:"Description", field:"userDeptDesc", editor:false},
{formatter:editIcon, width:40, align:"center", cellClick:function(e, cell){
alert("Going To: " + cell.getRow().getData().userDeptName);
window.location = "/account-departments/"+ cell.getRow().getData().userDeptName;
}},
],
});
</script>