We Keep Coding

How to destroy and recreate datatable in JavaScript

I have created DataTable, am getting all data from API but I need destroy and recreate every 10seconds am using setInterval function but reload do not reload and every 10second destroy and recreate. Is possible, I am trying more reference but could not solve this issue and also attached code below please check my code and solve this issue
my code:
staffTransaction()
function staffTransaction(){
var todayDate = new Date();
var dd = String(todayDate.getDate()).padStart(2, '0');
var mm = String(todayDate.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = todayDate.getFullYear();
to_date = dd + '-' + mm + '-' + yyyy;
var date = new Date();
date.setDate(date.getDate() - 7);
var from_date = date.getDate()+'-'+ (date.getMonth()+1) +'-'+date.getFullYear();
var offerType = $('#offerType option:selected').val();
// alert(offerType)
var transStaff = {
"admin_id": localStorage.getItem("admin_id"),
"role": localStorage.getItem("role"),
"offer_type": 'znapay',
"from_date": from_date != undefined && from_date != "" ? from_date : "",
"to_date": to_date != undefined && to_date != "" ? to_date : "",
"store_id": localStorage.getItem('store-ids'),
"branch_id": localStorage.getItem('store_branch')
}
console.log(transStaff)
console.log('Staff' + JSON.stringify(transStaff))
fetch('https://app/api/v6/manager/transactions-web', {
method: "POST",
body: JSON.stringify(transStaff),
headers: {
'Content-Type': 'application/json',
'accept': 'application/json'
},
}).then(function(test) {
return test.json()
}).then(function(callback) {
$('#transaction-lists').html("")
$("#transaction-dates").html("Transactions from " + callback.from_date + " to " + callback.to_date)
var ListTransation = "";
var transList = callback.transaction_list;
if (callback.transaction_list.length == 0) {
$('.not-found').html("<p>Data Not Found");
ListTransation = "<tr><td colspan='7' align='center'>No Transactions</td></tr>"
$('#transaction-lists').html(ListTransation);
} else {
var mapList = transList.map(function(x, y) {
if (y == 0) {
localStorage.setItem("last_transaction", x.transaction_id)
}
var email_help = x.elapsed_time <= 1800 ? "<img src='assets/images/email.png'>" : ""
// var email_help = x.elapsed_time <= 1800 ? "<i class='fa fa-envelope-o email-help' aria-hidden='true'></i>" : ""
// <i class="fa fa-envelope-o" aria-hidden="true"></i>
ListTransation += "<tr id=" + x.transaction_id + ">";
ListTransation += "<td class='reference-id'>" + x.reference_id + "</td>";
ListTransation += "<td>" + x.date + "</td>";
ListTransation += "<td>" + x.offer_type_label + "</td>";
ListTransation += "<td>" + x.offer_class + "</td>";
ListTransation += "<td>" + x.store_location + ", " + x.store_city + "</td>";
ListTransation += "<td class='bill-amount' style='text-align:center!important'>AED " + parseFloat(x.bill_amount).toFixed(2) + "</td>";
ListTransation += "<td>" + email_help + "</td>";
ListTransation += "</tr>";
});
$('#transaction-lists').html(ListTransation);
table = $('.staff-transtable').DataTable( {
destroy: true,
paging: false
} );
table.destroy();
setTimeout(function(){
table1 = $('.staff-transtable').DataTable( {
searching: true,
retrieve: true,
paging: true
} );
},2000)
}
});
}

Filter response from api and show them in different div on the basis of points

I want to sort them on the basis of points. I suppose the points id less than 100 then it should be appended to a <div class="small"> div and if it is higher then 100 and it should be appended to another div.
Right now the whole data is showing in the same div. How do I filter them so can be shown in different div according to the points they have.
Code
function getLeaderbordDetail()
{
var html_data= '';
myMemberId = NextBee.NBUtil.getSession(advertiserId + '_memberId');
var selector = {
'leaderBoardCont': $('#leaderBoard-cont')
},
noDataHtml = '<center><span class="no-leader">No Data Found!</span></center>',
getRowFn = function (srNo, point, firstName, lastName, schoolName) {
var htm = '';
var schoolLogo = '';
if (schoolName == null || schoolName == "")
{
var schoolLogo = '<div style="background: url(https:...../img/avatar.png)" class="profile-pic-circle" />';
}
else
{
var schoolLogo = getLogoPath(schoolName);
}
htm += '<div class="lb-user">'
htm += '<div class="row">'
htm += '<div class="col-sm-4 col-xs-12">'
htm += '<div class="lb-nummber"><span>' + srNo + '</span> ' + schoolLogo + '</div>'
htm += '</div>'
htm += '<div class="col-sm-8 col-xs-12">'
htm += '<div class="lb-desc">'
htm += '<h4>' + firstName + '</h4>'
htm += '<p>' + point + ' Points</p>'
htm += '</div>'
htm += '</div>'
htm += '</div>'
htm += '</div>'
return htm;
};
var currentTime = new Date();
var year = currentTime.getFullYear();
var firstDay = year + "-" + "01" + "-" + "01";
var lastDay = year + "-" + "12" + "-" + "31";
api.getRealTimLeaderBoardByType({
'member_program_id': programId,
'limit': 10,
'type': 'points',
'startDate':firstDay,
'endDate':lastDay
}, function (res1) {
var htm = '', leaderBoardData, leaderBoarddataCnt = 0, srNo;
if (typeof res1.status !== 'undefined') {
switch (res1.status) {
case 'success':
leaderBoardData = res1.response.leader_board;
for (var idx in leaderBoardData) {
srNo = leaderBoarddataCnt + 1;
if (leaderBoardData[idx]['memberInfo']['first_name'] == null)
leaderBoardData[idx]['memberInfo']['first_name'] = "--";
if (leaderBoardData[idx]['memberInfo']['last_name'] == null)
leaderBoardData[idx]['memberInfo']['last_name'] = "--";
if($.inArray(leaderBoardData[idx].member_id,['4482435','4483316','4482441'])==-1){
htm += getRowFn(srNo, leaderBoardData[idx]['point_count'], leaderBoardData[idx]['memberInfo']['first_name'], leaderBoardData[idx]['memberInfo']['last_name'], leaderBoardData[idx]['memberInfo']['profile_phto_url']);
leaderBoarddataCnt++;
}
if (leaderBoardData[idx]['member_id'] == myMemberId) {
myMemberId = "";
}
}
break;
default:
htm = noDataHtml;
break;
}
}
else
{
htm = noDataHtml;
}
selector.leaderBoardCont.html(htm);
var lbd_length = leaderBoardData.length
console.log(lbd_length);
if(lbd_length < 10 ) {
html_data += '<div class="lb-user">'
html_data += '<div class="row">'
html_data += '<div class="col-sm-12 col-xs-12">'
html_data += '<div class="">BECOME A <span class="bold">DVD CREW</span> TO SEE YOUR NAME HERE!</div>'
html_data += '</div>'
html_data += '</div>'
html_data += '</div>'
$("#leaderBoard-cont").append(html_data);
// var virtualdiv_length = 10 - lbd_length;
}
});
}
Any help will be greatly appreciated.

how to find the divs specific Nth siblings of child divs positions

i create new hours calendar. as per the IMAGE1 when user click on any of div that dynamic Span was created up to 8 hours.
i.e. if click on 00:00 its design up to 08:00 hours
so my question is how to get that specific siblings 8th divs child position.
Or any other way please suggest me.
$(this).eq(+8).attr("id");
IMAGE1
Table Design Code when ajax return Success:
$(r.emp_nm).each(function (index) {
tabelBody += "<tr><td style='width:10%'><div class='col-xs-3 col-md-3 on-break-tab'>" + this.fname.charAt(0) + this.lname.charAt(0) + "</div>" + this.fname + ' ' + this.lname + " </td>";
for (var i = 0; i < 24; i++) {
var tabelsubBody = "";
var p = 15;
var t_id = r.hours[i];
for (var j = 0; j < 4; j++) {
tabelsubBody += "<div style='float:left; width:25%;height:inherit;' class='Dropablesub_td' data-employeID='" + this.id + "' data-date='" + t_id + "' id='" + t_id + "_" + this.id + "_" + j + "'></div>";
}
if (i === 23) {
tabelBody += "<td style='width:12.5%' class='Dropabletd' data-employeID='" + this.id + "' data-date='" + t_id + "' id='" + t_id + "_" + this.id + "'>" + tabelsubBody + "</td></tr>";
} else {
tabelBody += "<td style='width:12.5%' class='Dropabletd' data-employeID='" + this.id + "' data-date='" + t_id + "' id='" + t_id + "_" + this.id + "'>" + tabelsubBody + "</td>";
}
}
});
$("#tabelBody").html(tabelBody);
$("#tdDate").html(r.today);
$("#SelectDate").val(r.today);
$("#currentSelect").val("Days");
Events();
And Events() is :
function Events() {
$("body").on("click", ".Dropablesub_td", function () {
var hidid = $(this).attr("id");
var Myleft = $(this).position().left;
var Mytop = $(this).position().top;
alert($(this).eq(+8).attr("id"));
$(this).append("<span id='" + hidid + "' class='divId label label-success ui-widget-content filediv unselectable' >ABCDEFGHIJKLMNOPQRSTUVWXYZ<span>");
$(this).children(
).css({zIndex: 999, position: "absolute", top: Mytop, left: Myleft, width: '40%', display: "block", border: "#808080 solid 2px", color: "black", background: "#00CEB4"});
});
}

You can get the desired element using .index() of current element and then using .eq() to target the next element.
Here in the snippet I have created a pseudo code for demonstration
$(document).on("click", ".dropabletd", function() {
var tr = $(this).closest('tr');
var tds = tr.find('td');
var index = tds.index(this);
var sibling = tds.eq(index + 8);
console.log($(this).attr('id'), sibling.attr('id'));
});
createTable();
function createTable() {
var tabelBody = ""
for (var i = 0; i <= 23; i++) {
tabelBody += "<td class='dropabletd' id='id" + i + "'>" + i + "</td>";
}
$("table tr").html(tabelBody);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr></tr>
</table>

lightbox video popup for youtube channel video

When I click on the image video popups but does not play i.e. shows only loading symbol.
My js code is
function showVideoList(channelid, rows, maxnumbervideos, apikey) {
try {
var videoinfo = JSON.parse(getJSONData("https://www.googleapis.com/youtube/v3/search?order=date&part=snippet&channelId=" + channelid + "&maxResults=" + maxnumbervideos + "&key=" + apikey));
var videos = videoinfo.items;
var videocount = videoinfo.pageInfo.totalResults;
// video listing
for (var j = 0; j < 3; j++) {
debugger;
//document.body.innerHTML+= "<div class='row'>" ;
// var div = document.getElementById("row");
//var append = "<div class='row'>"
$("#row").append("<div class='row'></div>");
for (var i = 0; i < 3; i++) {
var videoid = videos[i].id.videoId;
var videotitle = videos[i].snippet.title;
var videodescription = videos[i].snippet.description;
var videodate = videos[i].snippet.publishedAt; // date time published
var videothumbnail = videos[i].snippet.thumbnails.default.url; // default, medium or high
$('div.row').last().append("<div class='col s12 m4 l4'>"
+ "<div class='blog-post'>" + " <div class='card'> " + " <div class='card-image'> "
+ "<a href=https://www.youtube.com/watch?v=" + videoid + " target='_blank' class='voverlay'>"
+ "<img src='" + videothumbnail + "' style='border:none;float:left;margin-right:10px;' alt='" + videotitle + "' title='"
+ videotitle + "' /></a>"
+"</div>"
+ " <div class='card-content blog-post-content'> "
+ "<h2><a href='https://www.youtube.com/watch?v=" + videoid + "' target='_blank'>" + videotitle + "</a></h2>"
+ " <div class='meta-media'> "
+ "<div class='single-meta'>" + " Post By <a href='#'>Admin</a>" + " </div> "
+ " <div class='single-meta'> " + " Category : <a href='#'>Web/Design</a> " + " </div> "
+ " </div> "
+ " <div class='card-action'> "
+ " <a class='post-comment' href='#'><i class='material-icons'>comment</i><span>15</span></a> "
+ " <a class='readmore-btn' href='blog-single.html'>Read More</a> "
+ " </div> "
+"</div>" + "</div>" + "</div>" + "</div>"
);
}
document.body.innerHTML+="</div>";
// append += "</div>";
// div.innerHTML = append;
}
} catch (ex) {
alert(ex.message);
}
}

Cannot read property 'length' of undefined error in DataTable.js

I have read all the previous threads concerning this topic, but still end up getting
Uncaught TypeError: Cannot read property 'length' of undefined
in both Chrome and Internet Explorer. I have created an empty file, named it "DataTable.js" and copy-pasted the code from here
Then I added the following line at the end of the code where my table is built:
$('#standard_report_table').DataTable();
My scripts:
var buildStandardReportTable = function()
{
var divContent = "";
var url = "/InputData/db_getSqlQueryResult";
$.ajax({
url: url,
type: "POST",
async: false,
data: { sqlStr: "SELECT id, name_rus, visual_level, children_number, parent_id, effect_on_parent_id, lft, rgt, children_are_visible, report_type_id, font_color " +
"FROM report_entries_template_standard " +
"WHERE visible = 1 AND report_type_id = " + $("#reportTypeCombobox").val() + ' ' +
"ORDER BY lft", connectionStr: "dbCon"},
success: function (data)
{
var divContent = '';
var obj = jQuery.parseJSON(data);
divContent = buildStandarReportContent(obj);
//$('#choosenav1')[0].style.display = "block";
//$('#choosenav2')[0].style.display = "block";
//$('#choosenav3')[0].style.display = "block";
$("#standard_report_table").html(divContent);
$('#standard_report_table').DataTable();
}
})
}
var buildStandarReportContent = function (obj)
{
var divContent = '<thead border="0"><tr>';
divContent += '<th style="width: 30px"></th>';
divContent += '<th style="width: 30px"></th>';
divContent += '<th style="width: 30px"></th>';
divContent += '<th style="width: 30px"></th>';
divContent += '<th style="width: 30px"></th>';
divContent += '<th style="width: 30px"></th>';
divContent += '<th style="width: 30px"></th>';
divContent += '<th style="width: 1000px;">Статья</th>';
divContent += '<th>ID</th>';
divContent += '</tr></thead>';
// Table content
divContent += '<tbody id="table_data">';
for (i = 0; i < obj.length; i++)
{
//'<tr class="' + (obj[i].Уровень == 1 ? "success" : "")
//+ (obj[i].Уровень == 2 ? "warning" : "") + '"><td style="vertical-align: middle"><div style="margin-left:' + (obj[i].Уровень - 1) * 20 + 'px">' + obj[i].Статья_название + '</div></td>';
divContent += '<tr style="height: 10px; background-color:' + obj[i].font_color + '" ' +
'onmouseover = "setElementsVisibility(' + i + ', 1)" ' +
'onmouseout = "setElementsVisibility(' + i + ', 0)">';
divContent += '<td><div id = "add_child_sign' + i + '" style = "display : none";"><img src= "/Content/pics/plus_sign1.png" ' +
'style= "height:10px;width:10px;cursor:pointer" ' +
'onclick = "openAddNewChildWindow(' + obj[i].id + ')"</div></td>';
divContent += '<td><div id = "delete_sign' + i + '" style = "display : none";"><img src= "/Content/pics/delete_sign1.png" ' +
'style= "height:10px;width:10px;cursor:pointer" ' +
'onclick = "deleteChild(' + obj[i].id + ')"</div></td>';
divContent += '<td><div class = "glyphicon glyphicon-triangle-top" varia-hidden="true" id = "arrowup' + i + '" style = "' +
'height:10px;width:10px;cursor:pointer; color:red" ' +
'onclick = "swapChild(' + obj[i].id + ', \'up\')"></div>';
divContent += '<td><div class = "glyphicon glyphicon-triangle-bottom" id = "arrowdown' + i + '" style = " ' +
'height:10px; width:10px; cursor:pointer" ' +
'onclick = "swapChild(' + obj[i].id + ', \'down\')"></div></td>';
divContent += '<td><div id = "arrowleft' + i + '" style = "display : none";"><img src= "/Content/pics/arrowleft_sign1.png" ' +
'style= "height:10px;width:10px;cursor:pointer" ' +
'onclick = "editVisualLevel(' + obj[i].id + ', \'left\')"</div></td>';
divContent += '<td><div id = "arrowright' + i + '" style = "display : none";"><img src= "/Content/pics/arrowright_sign1.png" ' +
'style= "height:10px;width:10px;cursor:pointer" ' +
'onclick = "editVisualLevel(' + obj[i].id + ', \'right\')"</div></td>';
divContent += '<td><div id = "edit_sign' + i + '" style="display: none;"><div style = "vertical-align:bottom"><img src= "/Content/pics/edit_sign1.png" ' +
'style= "height:10px;width:10px;cursor:pointer" ' +
'onclick = "openEditChildWindow(' +
obj[i].id + ',\'' + obj[i].name_rus + '\',\'' + obj[i].name + '\',' + obj[i].effect_on_parent_id + ',' +
obj[i].parent_id + ',' + obj[i].report_type_id + ')"</div></td>';
divContent += '<td><div class = "cell_level_' + obj[i].visual_level + '" style = "margin-left : ' + 30 * (obj[i].visual_level - 1) + 'px; ' +
'cursor:' + (obj[i].children_number == 0 ? "default" : "pointer") + '" ' +
'onclick="collapseTreeNode(' + obj[i].lft + ',' + obj[i].rgt + ',' + obj[i].children_are_visible + ','+ obj[i].children_number + ')">';
divContent += obj[i].name_rus + '<span style="color:#A0A0A0; font-weight: normal;">&nbsp(' + obj[i].children_number + ')</span></div></td><td>' + obj[i].id + '</td><tr>';
}
divContent += '</tbody>'
divContent += '</table>';
return divContent;
}
HTML:
<div class="container">
<table id="standard_report_table" class="table table-striped"></table>
</div>

Use in this way.
var obj = jQuery.parseJSON(data);
$('#standard_report_table').DataTable({
"ajax": obj
});
define html
<table id="standard_report_table" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
</table>