I Created this table from video on you tube.(Consul think Programmer).but Search Option not showing
I Created this table from video on you tube.(Consul think Programmer).but Search Option not showing
risku
Posts: 3Questions: 1Answers: 0
code in here,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Table with Add and Delete Row Feature</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round|Open+Sans" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" type="text/css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.3/css/dataTables.bootstrap4.min.css" type="text/css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<script type="text/javascript">
window.addEventListener("load", functionInit);
function functionInit(){
document.querySelector('.load').classList.toggle('d-none');
document.querySelector('.idle').classList.toggle('d-none');
google.script.run.withSuccessHandler(createTable).processForm();
}
function reloadData(){
if (confirm('do you want to reload')){
functionInit();
}
}
//create the data table
function createTable(dataArray){
if(dataArray){
var result = "<table class='table table-bordered' id='dTable'>"+
"<thead style='white-space: nowrap'>"+
"<tr>"+
"<th scope='col'>ID</th>"+
"<th scope='col'>Status</th>"+
"<th scope='col'>Name</th>"+
"<th scope='col'>Log</th>"+
"<th scope='col'>Actions</th>"+
"</tr>"+
"</thead>";
for(var i=0; i<dataArray.length; i++){
result += "<tr>";
for(var j=0; j<dataArray[i].length; j++){
result += "<td>"+dataArray[i][j]+"</td>";
}
result += '<td><a class="add" title="Add" data-toggle="tooltip"> <i class="material-icons"></i></a><a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a><a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a></td>';
result += "<tr>";
}
result += "</table>";
var div = document.getElementById('dataTable');
div.innerHTML = result;
$(document).ready(function() {
$('#dTable').DataTable();
});
document.querySelector('.load').classList.toggle('d-none');
document.querySelector('.idle').classList.toggle('d-none');
//document.getElementById("massage").innerHTML = "";
}else{
var div = document.getElementById('dataTable');
div.innerHTML = "Data not found!";
document.querySelector('.load').classList.toggle('d-none');
document.querySelector('.idle').classList.toggle('d-none');
}
}
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
var actions = $("table td:last-child").html();
// Append table with add row form on add new button click
$(".add-new").click(function(){
$(this).attr("disabled", "disabled");
var index = $("table tbody tr:last-child").index();
var row = '<tr>' +
'<td><input type="text" class="form-control" name="id" id="id" autocomplete="off"></td>' +
'<td><input type="text" class="form-control" name="status" id="status" autocomplete="off"></td>' +
'<td><input type="text" class="form-control" name="name" id="name" autocomplete="off"></td>' +
'<td><input type="text" class="form-control" name="log" id="log" autocomplete="off"></td>' +
'<td>' + actions + '</td>' +
'</tr>';
$("table").append(row);
$("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
$('[data-toggle="tooltip"]').tooltip();
});
// Add row on add button click
$(document).on("click", ".add", function(){
var empty = false;
var input = $(this).parents("tr").find('input[type="text"]');
input.each(function(){
if(!$(this).val()){
$(this).addClass("error");
empty = true;
} else{
$(this).removeClass("error");
}
});
$(this).parents("tr").find(".error").first().focus();
if(!empty){
input.each(function(){
$(this).parent("td").html($(this).val());
});
$(this).parents("tr").find(".add, .edit").toggle();
if(confirm("Are you sure you want to save a new data in this row?")){
var recordId = this.parentNode.parentNode.cells[0].innerHTML;
var recordId2 = this.parentNode.parentNode.cells[1].innerHTML;
var recordId3 = this.parentNode.parentNode.cells[2].innerHTML;
var recordId4 = this.parentNode.parentNode.cells[3].innerHTML;
console.log([recordId,recordId2,recordId3,recordId4]);
google.script.run.toGoogleSheets({val: recordId, val2: recordId2, val3: recordId3, val4: recordId4})
$(".add-new").removeAttr("disabled");
}
}
});
// Edit row on edit button click
$(document).on("click", ".edit", function(){
$(this).parents("tr").find("td:not(:last-child)").each(function(){
$(this).html('<input type="text" class="form-control" value="' + $(this).text() + '">');
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").attr("disabled", "disabled");
});
// Delete row on delete button click
$(document).on("click", ".delete", function(){
var recordId = this.parentNode.parentNode.cells[0].innerHTML;
if(recordId.length < 20){
if(confirm("Are you sure you want to delete tis row?")){
console.log(recordId);
google.script.run.deleteDatabase({id: recordId});
$(this).tooltip('hide')
$(this).parents("tr").remove();
};
}else{
$(this).tooltip('hide')
$(this).parents("tr").remove();
}
$(".add-new").removeAttr("disabled");
});
});
</script>
<div class="container-lg">
<div class="table-responsive">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-4">
<button type="button" class="btn btn-info reload" onclick="reloadData()"><i class="fa fa-spinner fa-spin idle"></i><i class="fa fa-refresh fa-spin fa-fw load d-none"></i>Reload</button>
</div><br>
<div class="col-sm-4"><h2>Employee <b>Details</b></h2></div>
<div class="col-sm-4">
<button type="button" class="btn btn-info add-new"><i class="fa fa-plus"></i>Add New</button>
</div>
</div>
</div>
<div id="dataTable" class="tableClass">
<table class="table table-bordered" >
<thead>
<tr>
<th>ID</th>
<th>Status</th>
<th>Name</th>
<th>Log</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td> - </td>
<td> - </td>
<td> - </td>
<td> - </td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
This question has an accepted answers - jump to answer
Answers
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin
google apps script web app link
https://script.google.com/macros/s/AKfycbzxZl1J4fw2VansPnJtPJu5qAYkOaQrQPott_GBz7iQYwIQIhtzn5C6PvelqndmZUYG/exec
https://jsfiddle.net/riskuoffice/8zq60ty5/1/
Thanks for the test case but the table isn't loading. To progress this, please provide a test (or link to your page) that demonstrates the issue you want support for, and provide steps on how to reproduce the issue.
Colin
Look at the browser's console. You are getting this error:
Start by fixing that error.
Your test case has a lot of code. Maybe try simplifying it to get the Datatable to work then add back the code removed to simplify.
Kevin