Develop Reference

How to implement nested datatables with unlimited depth?

I need datatables that can have nested rows dynamically created based on the data.
Something like this but with unlimited nested rows:
https://jsfiddle.net/dyv4L8bp/4/
Here is the code I have tried so far (taken from an example I found):
function fnFormatDetails(table_id, html) {
var sOut = "<table id=\"exampleTable_" + table_id + "\">";
sOut += html;
sOut += "</table>";
return sOut;
}
//////////////////////////////////////////////////////////// EXTERNAL DATA - Array of Objects
var terranImage = "https://i.imgur.com/HhCfFSb.jpg";
var jaedongImage = "https://i.imgur.com/s3OMQ09.png";
var grubbyImage = "https://i.imgur.com/wnEiUxt.png";
var stephanoImage = "https://i.imgur.com/vYJHVSQ.jpg";
var scarlettImage = "https://i.imgur.com/zKamh3P.jpg";
// DETAILS ROW A
var detailsRowAPlayer1 = { pic: jaedongImage, name: "Jaedong", team: "evil geniuses", server: "NA" };
var detailsRowAPlayer2 = { pic: scarlettImage, name: "Scarlett", team: "acer", server: "Europe" };
var detailsRowAPlayer3 = { pic: stephanoImage, name: "Stephano", team: "evil geniuses", server: "Europe" };
var detailsRowA = [ detailsRowAPlayer1, detailsRowAPlayer2, detailsRowAPlayer3 ];
// DETAILS ROW B
var detailsRowBPlayer1 = { pic: grubbyImage, name: "Grubby", team: "independent", server: "Europe" };
var detailsRowB = [ detailsRowBPlayer1 ];
// DETAILS ROW C
var detailsRowCPlayer1 = [{ pic: terranImage, name: "Bomber", team: "independent", server: "NA" }];
var rowA = { race: "Zerg", year: "2014", total: "3", details: detailsRowA};
var rowB = { race: "Protoss", year: "2014", total: "1", details: detailsRowB};
var rowC = { race: "Terran", year: "2014", total: "1", details: detailsRowCPlayer1};
var newRowData = [rowA, rowB, rowC] ;
////////////////////////////////////////////////////////////
var iTableCounter = 1;
var oTable;
var oInnerTable;
var detailsTableHtml;
//Run On HTML Build
$(document).ready(function () {
// you would probably be using templates here
detailsTableHtml = $("#detailsTable").html();
//Insert a 'details' column to the table
var nCloneTh = document.createElement('th');
var nCloneTd = document.createElement('td');
nCloneTd.innerHTML = '<img src="http://i.imgur.com/SD7Dz.png">';
nCloneTd.className = "center";
$('#exampleTable thead tr').each(function () {
this.insertBefore(nCloneTh, this.childNodes[0]);
});
$('#exampleTable tbody tr').each(function () {
this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
});
//Initialse DataTables, with no sorting on the 'details' column
var oTable = $('#exampleTable').dataTable({
"bJQueryUI": true,
"aaData": newRowData,
"bPaginate": false,
"aoColumns": [
{
"mDataProp": null,
"sClass": "control center",
"sDefaultContent": '<img src="http://i.imgur.com/SD7Dz.png">'
},
{ "mDataProp": "race" },
{ "mDataProp": "year" },
{ "mDataProp": "total" }
],
"oLanguage": {
"sInfo": "_TOTAL_ entries"
},
"aaSorting": [[1, 'asc']]
});
/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('#exampleTable tbody td img').live('click', function () {
var nTr = $(this).parents('tr')[0];
var nTds = this;
if (oTable.fnIsOpen(nTr)) {
/* This row is already open - close it */
this.src = "http://i.imgur.com/SD7Dz.png";
oTable.fnClose(nTr);
}
else {
/* Open this row */
var rowIndex = oTable.fnGetPosition( $(nTds).closest('tr')[0] );
var detailsRowData = newRowData[rowIndex].details;
this.src = "http://i.imgur.com/d4ICC.png";
oTable.fnOpen(nTr, fnFormatDetails(iTableCounter, detailsTableHtml), 'details');
oInnerTable = $("#exampleTable_" + iTableCounter).dataTable({
"bJQueryUI": true,
"bFilter": false,
"aaData": detailsRowData,
"bSort" : true, // disables sorting
"aoColumns": [
{ "mDataProp": "pic" },
{ "mDataProp": "name" },
{ "mDataProp": "team" },
{ "mDataProp": "server" }
],
"bPaginate": false,
"oLanguage": {
"sInfo": "_TOTAL_ entries"
},
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
var imgLink = aData['pic'];
var imgTag = '<img width="100px" src="' + imgLink + '"/>';
$('td:eq(0)', nRow).html(imgTag);
return nRow;
}
});
iTableCounter = iTableCounter + 1;
}
});
});
Can someone send me an example. Please dont send examples with a single nested row only. I need unlimited ones.

How to add external data to javascript for jquery auto complete

I'm trying to make a auto complete search bar using jquery autocomplete. The thing is I need to display Json data from an external site into my search bar.
Whenever I try to put the data as such from json into the script, it's working. But when I refer external url it refuses to work.
I tried implementing all json data into my script. But it takes so long to process as there will be more than 40000+ lines in my html page.
The Json link for the data which I have to display is here
<script>
$('#id_ticker').autocomplete({
source: function(request, response) {
var data = {
"success": true,
"data": [
{
"symbol": "AACG",
"name": "ATA Creativity Global American Depositary Shares",
"lastsale": "$2.19",
"netchange": "-0.45",
"pctchange": "-17.045%",
"volume": "1408435",
"marketCap": "68715455.00",
"country": "China",
"ipoyear": "",
"industry": "Service to the Health Industry",
"sector": "Miscellaneous",
"url": "/market-activity/stocks/aacg"
},
{
"symbol": "AACI",
"name": "Armada Acquisition Corp. I Common Stock",
"lastsale": "$9.88",
"netchange": "0.01",
"pctchange": "0.101%",
"volume": "8345",
"marketCap": "204609860.00",
"country": "United States",
"ipoyear": "2021",
"industry": "",
"sector": "",
"url": "/market-activity/stocks/aaci"
}],
"additional_data": {
"pagination": {
"start": 0,
"limit": 5,
"more_items_in_collection": true,
"next_start": 5
}
}
};
var datamap = data.data.map(function(i) {
return {
label: i.symbol + ' - ' + i.name.split(' ').slice(0, 2).join(' '),
value: i.symbol,
desc: i.title
}
});
var key = request.term;
datamap = datamap.filter(function(i) {
return i.label.toLowerCase().indexOf(key.toLowerCase()) >= 0;
});
response(datamap);
},
minLength: 1,
delay: 500
});
</script>
The above code works and the below code doesn't.
<script>
$('#id_ticker').autocomplete({
source: function(request, response) {
var data = {
"success": true,
"data": ["https://raw.githubusercontent.com/rreichel3/US-Stock-Symbols/main/nyse/nyse_full_tickers.json"
],
"additional_data": {
"pagination": {
"start": 0,
"limit": 5,
"more_items_in_collection": true,
"next_start": 5
}
}
};
var datamap = data.data.map(function(i) {
return {
label: i.symbol + ' - ' + i.name.split(' ').slice(0, 2).join(' '),
value: i.symbol,
desc: i.title
}
});
var key = request.term;
datamap = datamap.filter(function(i) {
return i.label.toLowerCase().indexOf(key.toLowerCase()) >= 0;
});
response(datamap);
},
minLength: 1,
delay: 500
});
</script>
Looking for a solution to add this and also for a solution to reduce the json key pair with only "symbol" and "name" from each corresponding data in the link.

Try this:
function toAutocomplete(dt, keyvar){
let rli = [];
for (let i = 0; i < dt.length; i++) rli.push(dt[i][keyvar]);
return rli;
}
function inArrayAutocompleteSelected(key, array_autocomplete, array_master){
let x = array_master[$.inArray(key, array_autocomplete)];
return x;
}
$('#id_ticker').autocomplete({ source: [], minLength: 1 });
// $('#id_ticker').autocomplete("disable");
let url = 'https://raw.githubusercontent.com/rreichel3/US-Stock-Symbols/main/nyse/nyse_full_tickers.json';
let r = _ajax('GET', url, ''); // your ajax script
console.log(r);
let liAuto = toAutocomplete(r, 'name');
console.log(liAuto);
$('#id_ticker').autocomplete("option", "source", liAuto );
// $('#id_ticker').autocomplete("enable");
$("#id_ticker").autocomplete({
select: function( event, ui ) {
console.log(ui, ui.item);
getData = inArrayAutocompleteSelected(ui.item.value, liAuto, r);
console.log(getData);
}
});

datatable.js ajax livereload after n seconds

I want to reload a datatable after n amount of seconds.
$(document).ready(function() {
var table = $('#table_id').DataTable( {
"ajax": "http://192.168.1.134:8000/api/",
"columns": [
{ "data": "id" },
{ "data": "name" },
{ "data": "city" },
],
}
);
} );
setInterval(function(){
table.ajax.reload(null, false);
},5000);
But the total row in the table keeps being the same.

I find the answer in the Documenation
var table = $('#table_id').DataTable( {
"ajax": "http://192.168.1.134:8000/api/",
"columns": [
{ "data": "id" },
{ "data": "name" },
{ "data": "city" },
],
}
);
setInterval( function () {
table.ajax.reload(); // user paging is not reset on reload
}, 30000 );

How can I pass the datatable parameter to my controller for my crystal report for saving file name with parameters of the table in ASP.Net MVC?

I want to pass my javascript datatable data to my crystal report controller to save my filename with employeename and date from datatable. How can I do that? For example. I will save it with a filename named as
Payroll-08292020-Lastname
This is my datatable script.
var dataTable;
$(function () {
dataTable = $('#payrollTable').DataTable({
"ajax": "#Url.Action("getdata", "payroll")",
"scrollX": true,
"columns": [
{ "data": "EmployeeName" },
{ "data": "ShiftName" },
{
"data": "StartDate", "render": function (value) {
if (value === null) return "";
return moment(value).format('DD/MM/YYYY');
}
},
{
"data": "EndDate", "render": function (value) {
if (value === null) return "";
return moment(value).format('DD/MM/YYYY');
}
},
{
"data": "PayDate", "render": function (value) {
if (value === null) return "";
return moment(value).format('DD/MM/YYYY');
}
},
{ "data": "MonthlyRate" },
{ "data": "PerDay" },
{ "data": "Cola" },
{ "data": "RegularPayDaysWork" },
{ "data": "RegularPayTotal" },
{ "data": "RegHolidayDaysWork" },
{ "data": "RegHolidayPercent" },
{ "data": "RegHolidayTotal" },
{ "data": "SpecialNWHolidayDaysWork" },
{ "data": "SpecialNWHolidayPercent" },
{ "data": "SpecialNWHolidayTotal" },
{ "data": "DoubleHolidayDaysWork" },
{ "data": "DoubleHolidayPercent" },
{ "data": "DoubleHolidayTotal" },
{ "data": "RestdayDaysWork" },
{ "data": "RestdayPercent" },
{ "data": "RestdayTotal" },
{ "data": "RegOTDaysWork" },
{ "data": "RegOTTotal" },
{ "data": "RestdayOTDaysWork" },
{ "data": "RestdayOTTotal" },
{ "data": "SpecialHolidayOTDaysWork" },
{ "data": "SpecialHolidayOTTotal" },
{ "data": "SpecialWithRestdayOTDaysWork" },
{ "data": "SpecialWithRestdayOTTotal" },
{ "data": "RegularHolidayOTDaysWork" },
{ "data": "RegularHolidayOTTotal" },
{ "data": "RegularWithRestdayOTDaysWork" },
{ "data": "RegularWithRestdayOTTotal" },
{ "data": "DoubleHolidayOTDaysWork" },
{ "data": "DoubleHolidayOTTotal" },
{ "data": "DoubleWithRestdayOTDaysWork" },
{ "data": "DoubleWithRestdayOTTotal" },
{ "data": "AbsentDays" },
{ "data": "AbsentTotal" },
{ "data": "LateHrs" },
{ "data": "LateTotal" },
{ "data": "UndertimeHrs" },
{ "data": "UndertimeTotal" },
{ "data": "AllowanceTotal" },
{ "data": "WitholdingTaxTotal" },
{ "data": "PagibigContributionTotal" },
{ "data": "PhilhealthContributionTotal" },
{ "data": "SSSContributionTotal" },
{ "data": "HDMFLoanTotal" },
{ "data": "SSSLoan" },
{ "data": "CashLoanTotal" },
{ "data": "OtherDeductionsTotal" },
{ "data": "LeaveDays" },
{ "data": "LeaveTotal" },
{ "data": "GrossIncome" },
{ "data": "TotalDeductions" },
{ "data": "NetIncome" },
{
"data": "Id", "render": function (data) {
return "<a class='btn btn-default btn-sm' onclick=edit(" + data + ")><i class='fa fa-pencil'></i>Edit</a> <a class='btn btn-default btn-sm' onclick=printpreview(" + data + ")><i class='fa fa-print'></i>Print Payslip</a>"
},
"orderable": false,
"searchable": false,
"width": "170px"
}
],
"language": {
"emptyTable": "No data found"
}
});
and this is my function to trigger printpreview in datatable.
function printpreview(id)
{
window.location.href = "#Url.Action("export", "payroll")?id=" + id;
}
This is my controller for crystal report.
public ActionResult Export(int? id)
{
ReportDocument rd = new ReportDocument();
rd.Load(Path.Combine(Server.MapPath("~/Reports/CrystalReportPayroll.rpt")));
rd.SetDataSource(db.Payrolls
.Select(p => new
{
Id = p.Id,
EmployeeId = p.Employees.FirstName + " " + p.Employees.MiddleName + " " + p.Employees.LastName,
StartDate = DbFunctions.TruncateTime(p.StartDate).Value,
EndDate = DbFunctions.TruncateTime(p.EndDate).Value,
PayDate = DbFunctions.TruncateTime(p.PayDate).Value,
Cola = p.Cola.Value,
MonthlyRate = p.MonthlyRate,
PerDay = p.PerDay,
RegularPayDaysWork = p.RegularPayDaysWork,
RegularPayTotal = p.RegularPayTotal,
RegHolidayDaysWork = p.RegHolidayDaysWork,
RegHolidayTotal = p.RegHolidayTotal,
SpecialNWHolidayDaysWork = p.SpecialNWHolidayDaysWork,
SpecialNWHolidayTotal = p.SpecialNWHolidayTotal,
DoubleHolidayDaysWork = p.DoubleHolidayDaysWork,
DoubleHolidayTotal = p.DoubleHolidayTotal,
RestdayDaysWork = p.RestdayDaysWork,
RestdayTotal = p.RestdayTotal,
RegOTDaysWork = p.RegOTDaysWork == null ? 0 : p.RegOTDaysWork.Value,
RegOTTotal = p.RegOTTotal == null ? 0 : p.RegOTTotal.Value,
RestdayOTDaysWork = p.RestdayOTDaysWork == null ? 0 : p.RestdayOTDaysWork.Value,
RestdayOTTotal = p.RestdayOTTotal == null ? 0 : p.RestdayOTTotal.Value,
SpecialHolidayOTDaysWork = p.SpecialHolidayOTDaysWork == null ? 0 : p.SpecialHolidayOTDaysWork.Value,
SpecialHolidayOTTotal = p.SpecialHolidayOTTotal == null ? 0 : p.SpecialHolidayOTTotal.Value,
SpecialWithRestdayOTDaysWork = p.SpecialWithRestdayOTDaysWork == null ? 0 : p.SpecialWithRestdayOTDaysWork.Value,
SpecialWithRestdayOTTotal = p.SpecialWithRestdayOTTotal == null ? 0 : p.SpecialWithRestdayOTTotal.Value,
RegularHolidayOTDaysWork = p.RegularHolidayOTDaysWork == null ? 0 : p.RegularHolidayOTDaysWork.Value,
RegularHolidayOTTotal = p.RegularHolidayOTTotal == null ? 0 : p.RegularHolidayOTTotal.Value,
RegularWithRestdayOTDaysWork = p.RegularWithRestdayOTDaysWork == null ? 0 : p.RegularWithRestdayOTDaysWork.Value,
RegularWithRestdayOTTotal = p.RegularWithRestdayOTTotal == null ? 0 : p.RegularWithRestdayOTTotal.Value,
DoubleHolidayOTDaysWork = p.DoubleHolidayOTDaysWork == null ? 0 : p.DoubleHolidayOTDaysWork.Value,
DoubleHolidayOTTotal = p.DoubleHolidayOTTotal == null ? 0 : p.DoubleHolidayOTTotal.Value,
DoubleWithRestdayOTDaysWork = p.DoubleWithRestdayOTDaysWork == null ? 0 : p.DoubleWithRestdayOTDaysWork.Value,
DoubleWithRestdayOTTotal = p.DoubleWithRestdayOTTotal == null ? 0 : p.DoubleWithRestdayOTTotal.Value,
AbsentDays = p.AbsentDays == null ? 0 : p.AbsentDays.Value,
AbsentTotal = p.AbsentTotal == null ? 0 : p.AbsentTotal.Value,
LateHrs = p.LateHrs == null ? 0 : p.LateHrs.Value,
LateTotal = p.LateTotal == null ? 0 : p.LateTotal.Value,
UndertimeHrs = p.UndertimeHrs == null ? 0 : p.UndertimeHrs.Value,
UndertimeTotal = p.UndertimeTotal == null ? 0 : p.UndertimeTotal.Value,
AllowanceTotal = p.AllowanceTotal == null ? 0 : p.AllowanceTotal.Value,
WitholdingTaxTotal = p.WitholdingTaxTotal == null ? 0 : p.WitholdingTaxTotal.Value,
PagibigContributionTotal = p.PagibigContributionTotal == null ? 0 : p.PagibigContributionTotal.Value,
PhilhealthContributionTotal = p.PhilhealthContributionTotal == null ? 0 : p.PhilhealthContributionTotal.Value,
SSSContributionTotal = p.SSSContributionTotal == null ? 0 : p.SSSContributionTotal.Value,
HDMFLoanTotal = p.HDMFLoanTotal == null ? 0 : p.HDMFLoanTotal.Value,
SSSLoan = p.SSSLoan == null ? 0 : p.SSSLoan.Value,
CashLoanTotal = p.CashLoanTotal == null ? 0 : p.CashLoanTotal.Value,
OtherDeductionsTotal = p.OtherDeductionsTotal == null ? 0 : p.OtherDeductionsTotal.Value,
LeaveDays = p.LeaveDays == null ? 0 : p.LeaveDays.Value,
LeaveTotal = p.LeaveTotal == null ? 0 : p.LeaveTotal.Value,
GrossIncome = p.GrossIncome == null ? 0 : p.GrossIncome.Value,
TotalDeductions = p.TotalDeductions == null ? 0 : p.TotalDeductions.Value,
NetIncome = p.NetIncome == null ? 0 : p.NetIncome.Value,
})
.Where(p => id == p.Id).ToList());
Response.Buffer = false;
Response.ClearContent();
Response.ClearHeaders();
Stream stream = rd.ExportToStream
(CrystalDecisions.Shared.ExportFormatType.PortableDocFormat);
stream.Seek(0, SeekOrigin.Begin);
return File(stream, "application/pdf", "Payroll.pdf");
}

Try this:
in your View:
<script>var url_reports = "#Url.Action("Export", "Payroll")"</script>
in your JS script:
function printpreview(id)
{
window.open(url_reports + "/" + id);
}
In your RouteConfig make sure that you have this:
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
Or create a custom route for you controller
routes.MapRoute(
"ExportPayroll",
"Payroll/Export/{id}",
new { controller = "Payroll", action = "Export", id = UrlParameter.Optional }
);

Store Result of Renamed JS.Tree Node

I have an editable tree structure. A user can create, rename and delete individual nodes. Right now, when I choose a node to rename, I store the original value in a variable using this code.
function rename() {
var data = null;
data = $(plBox2).jstree().get_selected(true)[0].text;
console.log(data);
}
This function is called when when "Rename" is selected in the context menu. What I want to do is store the new value of that node after it is renamed but I cannot figure it out. My ultimate goal is to send both the old value and the new value to a MySQL table.
Here is my tree and context menu:
$('#plBox2').jstree({
"checkbox": {
"keep_selected_style": false
},
"core" : {
"themes": {
"name": "default",
"dots": true,
"icons": true,
},
"check_callback": true,
},
"plugins" : [
"massload", "wholerow", "contextmenu", "changed", "sort", "dnd",
],
"contextmenu":{
"items": function($node) {
var tree = $("#plBox2").jstree(true);
return {
"Info": {
"separator_before": false,
"separator_after": false,
"label": "Info",
"action": function (obj) { document.getElementById('finInfo').style.display='block';
}
},
"Create": {
"separator_before": false,
"separator_after": false,
"label": "Create",
"action": function (data) {
var inst = $.jstree.reference(data.reference),
obj = inst.get_node(data.reference);
inst.create_node(obj, {}, "last", function (new_node) {
new_node.data = {file: true};
setTimeout(function () { inst.edit(new_node); },0);
});
}
},
"Rename": {
"separator_before": false,
"separator_after": false,
"label": "Rename",
"action": function (obj) {
tree.edit($node);
rename();
}
},
"Remove": {
"separator_before": false,
"separator_after": false,
"label": "Remove",
"action": function (obj) {
tree.delete_node($node);
}
}
};
}
},
HTML:
<div class="2colWrap">
<div class="col1">
<div id="plBox2"></div>
</div>
<div class="col2">
<div id="finishBox"></div>
</div>
</div>
Thanks!

You can use this statement below!
"Rename": {
"separator_before": false,
"separator_after": false,
"label": "Rename",
"action": function (obj) {
console.log("waht?");
currentNode = $node;
//tree.edit($node);
tree.edit('j1_1', null, function (node, status) {
debugger;
console.log("old name: " + node.original.text);
console.log("new: " + node.text);
console.log(arguments);
});
}
},