Can I change rendering of responsive datatables plugin - javascript

I have the following datatable which has some columns grouping.
And with the responsive plugin for datables when resizes Iget this display.
However the 2 first column titles are lost, is this possible with jquery datatables to change this behavior??
This is the html template I am using
tableVistaEjecucionPendientes: "<div>" +
"<div>" +
"<div class=\"btn-group\" role=\"group\" aria-label=\"Basic example\">" +
"<button type=\"button\" id=\"btnVistaIniciativas\" class=\"btn btn-default\" onclick=\"iniciativasEstrategicas.GetVistaEjecucionPendientes('Iniciativas')\">Iniciativas</button>" +
"<button type=\"button\" id=\"btnVistaResponsables\" class=\"btn btn-default\" onclick=\"iniciativasEstrategicas.GetVistaEjecucionPendientes('Responsables')\">Responsables</button>" +
"</div>" +
"</div>" +
"<div class=\" divTableVistaEjecucionPendientes\">" +
"<table class='table tableVistaEjecucionPendientes' width=\"100%\">" +
"<thead>" +
"<tr>" +
"<th rowspan=\"3\" class=\"all\">" +
"{0}" +
"</th>" +
"<th colspan=\"4\">" +
"En Ejecución" +
"</th>" +
"<th colspan=\"4\">" +
"Pendientes" +
"</th>" +
"</tr>" +
"<tr>" +
"<th colspan=\"2\">" +
"A tiempo" +
"</th>" +
"<th colspan=\"2\">" +
"Desfasadas" +
"</th>" +
"<th colspan=\"2\">" +
"A tiempo" +
"</th>" +
"<th colspan=\"2\">" +
"Atrasadas" +
"</th>" +
"</tr>" +
"<tr>" +
"<th class=\"min-tablet-l\">" +
"Porcentaje" +
"</th>" +
"<th class=\"min-tablet-l\">" +
"Cantidad" +
"</th>" +
"<th class=\"min-tablet-l\">" +
"Porcentaje" +
"</th>" +
"<th class=\"min-tablet-l\">" +
"Cantidad" +
"</th>" +
"<th class=\"min-tablet-l\">" +
"Porcentaje" +
"</th>" +
"<th class=\"min-tablet-l\">" +
"Cantidad" +
"</th>" +
"<th class=\"desktop\">" +
"Porcentaje" +
"</th>" +
"<th class=\"desktop\">" +
"Cantidad" +
"</th>" +
"</tr>" +
"</thead>" +
"<tbody>" +
"{1}" +
"</tbody>" +
"</table>" +
"</div>" +
"</div>",
and thiis how I draw the datatable using the template
function drawVistaEjecucionPendientes(data, filter) {
resetBreadCrumb();
var html = "";
for (var i = 0; i < data.length; i++) {
html += template.rowVistaEjecucionPendientes.replace("{0}", data[i].Nombre)
.replace("{1}", data[i].ATiempoEjecucionPorcentaje != null ? data[i].ATiempoEjecucionPorcentaje + "%" : "0%")
.replace("{2}", data[i].ATiempoEjecucionCantidad)
.replace("{3}", data[i].DesfasadasEjecucionPorcentaje != null ? data[i].DesfasadasEjecucionPorcentaje + "%" : "0%")
.replace("{4}", data[i].DesfasadasEjecucionCantidad)
.replace("{5}", data[i].ATiempoPendientesPorcentaje != null ? data[i].ATiempoPendientesPorcentaje + "%" : "0%")
.replace("{6}", data[i].ATiempoPendientesCantidad)
.replace("{7}", data[i].DesfasadasPendientesPorcentaje != null ? data[i].DesfasadasPendientesPorcentaje + "%" : "0%")
.replace("{8}", data[i].DesfasadasPendientesCantidad);
}
$("#tab_iniciativasTiempos").html("<br>" + "<br>" + template.tableVistaEjecucionPendientes.replace("{0}", filter).replace("{1}", html));
$(".tableVistaEjecucionPendientes").DataTable({
responsive: {
details: {
type: "inline"
}
}
});
}

Related

append html text from JavaScript

I have a JavaScript function that takes Id and source and alignment... and append to html element due to the input parameter.
"<TR id='" + localMessageId + "' onmouseover='visiblepointmenu(\"" + localMessageId + "\");' onmouseout='hidepointmenu(\"" + localMessageId + "\");'>" +
"<TD class='td_left noselect' nowrap='nowrap' align='right'>" + Image + "</td>" +
"<TD class='td_center' style='table-layout:fixed; direction: " + direction + ";'>" +
"<TABLE cellSpacing=0 cellPadding=0>" +
"<TR style='HEIGHT:10px; " + VisibleHiddenTime + "'>" +
"<TD><div class='noselect' style='color:DarkGray;text-align:" + float_Timer + ";font-size: 11px;'>" + Name + dateMessage.ToString("hh:mm tt") + "</div></TD>" +
"</TR > " +
"<TR>" +
"<TD id = 'menu" + localMessageId + "' oncontextmenu='window.external.Menu(\"pointMenu#3\",\"" + message + "\", \"" + localMessageId + "\");'>" +
"<TABLE cellSpacing=0 cellPadding=0 style='background-image: url(data:image/png;base64," + previewLink.image_Base64 + ");" +
"background-position: center center;width:" + previewLink.width.ToString() + "px;height:" + previewLink.height.ToString() + "px; background-repeat: no-repeat; " +
"background-size: 100% 100%; float:" + float_Timer + ";'>" +
"<TBODY>" +
"<TR style='height: 83%;'>" +
"<TD class='description' onclick=openURL('" + url + "') style='cursor:pointer;padding-left:10px;' valign='bottom' align='left'>" +
"<font color='white' style='font-size: 110%'> " + previewLink.description + "</font>" +
"</TD>" +
"</TR>" +
"<TR style='vertical-align:top;'>" +
"<TD align='left' onclick=openURL('" + url + "') style='cursor:pointer; padding-left:10px;' >" +
"<font color='white' style='font-size: 100%' >" + homelink + "</font>" +
"</TD>" +
"</TR>" +
"</TBODY>" +
"</TABLE>" +
"</TD>" +
"<TD style='vertical-align:top;'>" +
"<div style='float:" + afloat + ";'>" +
"<img id='pnt" + localMessageId + "' class='noselect' draggable='false' src='data:image/png;base64," + SharedData.PointMenu + "' style='visibility:hidden;display:none;' onclick='window.external.Menu(\"pointMenu#3\", \"" + message + "\", \"" + localMessageId + "\");' />" +
"</div>" +
"</TD>" +
"</TR>" +
"</TABLE>" +
"</TD>" +
"<TD style='width:17px;' valign='top' align='left'>" +
"<img style='margin-top: 3px;" + visibility + "' id='read" + localMessageId + "' draggable='false' class='noselect' src='data:image/png;base64," + SharedData.getMessageStatusFromEnum(messageStatus, SendingMethode == SharedData.NotificationSendingMethod.AutoReply) + "'/>" +
"</TD>" +
"</TR>";
}
else
{
new_row = "<TR id='" + localMessageId + "' onmouseover='visiblepointmenu(\"" + localMessageId + "\");' onmouseout='hidepointmenu(\"" + localMessageId + "\");'>" +
"<TD class='td_left noselect' nowrap='nowrap' align='right'>" + Image + "</td>" +
"<TD class='td_center' id='Forward" + localMessageId + "' style='table-layout:fixed;direction:" + direction + ";'>" +
"<TABLE cellSpacing=0 cellPadding=0>" +
"<TR style='HEIGHT:10px; " + VisibleHiddenTime + "'>" +
"<TD><div class='noselect' style='color:DarkGray;text-align:" + float_Timer + "; font-size: 11px;'>" + Name + dateMessage.ToString("hh:mm tt") + "</div></TD>" +
"</TR>" +
"<TR>" +
"<TD id ='link" + localMessageId + "'>" +
"<div id='menu" + localMessageId + "' class='" + classname + "' oncontextmenu='window.external.Menu(\"pointMenu#3\",\"" + message + "\", \"" + localMessageId + "\");'>" +
" <P style='table-layout:fixed;'>" + text + "</p>" +
"</div>" +
"</TD>" +
"<TD style='vertical-align:top;'>" +
"<DIV style='float:" + afloat + ";'>" +
"<img id='pnt" + localMessageId + "' class='noselect' draggable='false' src='data:image/png;base64," + SharedData.PointMenu + "' style='visibility:hidden;display:none;');' onclick='window.external.Menu(\"pointMenu#3\", \"" + message + "\", \"" + localMessageId + "\");' />" +
"</DIV>" +
"</TD>" +
"</TR>" +
"</TABLE>" +
"</TD>" +
"<TD style='width:17px;' valign='top' align='left'>" +
"<img style='margin-top: 3px;" + visibility + "' id='read" + localMessageId + "' draggable='false' class='noselect' src='data:image/png;base64," + SharedData.getMessageStatusFromEnum(messageStatus, SendingMethode == SharedData.NotificationSendingMethod.AutoReply) + "'/>" +
"</TD>" +
"</TR>"
my problem is that id and all image sources and even some classes should be added at runtime from the function
I need a way better then concatenation because my code will be ugly if I type + every time
or want to know what is the best Practice

In html table how to show Yes/No instead of 1/0

I am receiving a json file from server and in this file there are some values 0/1. And therse values are showing same in html table. But i want to show these values as Yes/No.How can i do that
I am sharing my code
$.getJSON('list.php', function(data) {
$.each(data.classlists , function(i, f) {
var tblRows = "<tr>" + "<td>" + "Info" + "</td>" + "<td>" + f.messageName + "</td>" + "</tr>" +"<tr>" + "<td>" + "Link" + "</td>" +"<td><a target='_blank' href='"+link+"'>"+"Get INFO"+"</a></td>" + "</tr>" + "<tr>" + "<td>" + "Teacher" + "</td>" + "<td>" + f.date + "</td>" + "</tr>" + "<tr>" + "<td>" + "Is Live Now" + "</td>" + "<td>" + f.liveClassStatus + "</td>" + "</tr>" ;
in front of Is Live Now i want to show Yes or No
Pleaee make some necessary change

Put an if condition to check if the value is 1, then use yes otherwise no.
$.getJSON('list.php', function(data) {
$.each(data.classlists , function(i, f) {
var tblRows = "<tr>" + "<td>" + "Info" + "</td>" + "<td>" + f.messageName + "</td>" + "</tr>" +"<tr>" + "<td>" + "Link" + "</td>" +"<td><a target='_blank' href='"+link+"'>"+"Get INFO"+"</a></td>" + "</tr>" + "<tr>" + "<td>" + "Teacher" + "</td>" + "<td>" + f.date + "</td>" + "</tr>" + "<tr>" + "<td>" + "Is Live Now" + "</td>" + "<td>" + (f.liveClassStatus === 1 ? 'Yes' : 'No') + "</td>" + "</tr>" ;

How order table after selected option

I have URL API and i did group by "date".
But I would like to know how I can after I selected option from the data Importance its will order only the rows (and keep the date) by Importance.
Image how its order now:
http://prntscr.com/ebgodq
My code:
var table = $(".top-table");
var body = table.children("tbody");
var regdate = /^(\d{4}\-\d{2}\-\d{2})T(\d{2}:\d{2}:\d{2})$/;
$.get("http://api.tradingeconomics.com/calendar?c=guest:guest", function (data) {
showData(data);
});
function showData (data) {
//---Sort the data from the server
data.sort(function (a, b) {
return (new Date(a.Date)) - (new Date(b.Date));
});
var group = data.reduce(function (before, current) {
var day = current.Date.replace(regdate, "$1");
var hour = current.Date.replace(regdate, "$2");
if (!before[day]) {
before[day] = [];
}
current.Hour = hour;
before[day].push(current);
return before;
}, {});
for(var date in group) {
body.append("<tr style='text-align: left;background: #fafafa;line-height: 35px;border-bottom: 2px solid #ff9d00;font-size: 13pt;font-weight: normal;'>" +
"<th width='50%'>" + date + "</th>" +
"<th width='12%'>Actual</th>" +
"<th width='12%'>Previous</th>" +
"<th width='12%'>Forecast</th>" +
"<th width='4%'></th></tr>");
group[date].forEach(function(row){
var rowA = parseInt(row.Actual) > 0 ?
"<span style='color:red;'>" + noCommas(row.Actual) + "</span>" :
"<span style='color:green;'>" + noCommas(row.Actual) + "</span>";
var rowB = parseInt(row.Previous) > 0 ?
"<span style='color:red;'>" + noCommas(row.Previous) + "</span>" :
"<span style='color:green;'>" + noCommas(row.Previous) + "</span>";
var rowC = parseInt(row.Forecast) > 0 ?
"<span style='color:red;'>" + noCommas(row.Forecast) + "</span>" :
"<span style='color:green;'>" + noCommas(row.Forecast) + "</span>";
var Time = hourwithAMPM(row.Date);
body.append("<tr style='border-bottom: 1px solid #eeeeee;text-align: left;font-size: 12pt;font-weight: 300;line-height: 30px;'>" +
"<td><span class='im-" + row.Importance + "'>" + Time + "</span>" +
"<span style='margin: 0 10px 0;'><img src='/images/calendar/flags/" + noCommas(row.Country) + ".png' width='16' height='16' /></span>" +
"<span style='font-size: 11pt;color:#999999;font-weight: 600;word-spacing: -1px;margin: 0 5px 0;'>" + noCommas(row.Event) + "</span>"+
"<span style='color:#333333;'> " + noCommas(row.Reference) + "</span>" +
"</td>" +
"<td>" + rowA + "</td>" +
"<td>" + rowB + "</td>" +
"<td>" + rowC + "</td>" +
"<td><div class='arrow-down'></div></td>" +
"</tr>");
body.append("<tr class='showRow' style='display:none;'><td>yay!!!</td></tr>");
});
}
}

table pagination in jquery and html

I am trying pagination on the following code. Adding data to the table using JavaScript. Can anyone help me out with how I should go about it?
Any addition or rewrite of the code will be helpful.
function onDeviceReady() {
var queryquery =
var bestbuy = "";
jQuery.getJSON(queryquery, function(resultsbestbuy) {
var productstopdeal = JSON.parse(resultsbestbuy);
bestbuy += "<div class=\"table-container\">" + "<table class=\"table table-filter\">";
for (i = 0; i < productstopdeal.Products.length; i++) {
bestbuy += "<tbody>" + "<tr>" + "<td>" + "<div class=\"ckbox\">" + "<input type=\"checkbox\" id=\"checkbox1\">" + "<label for=\"checkbox1\"></label>" + "</div>" + "</td>" + "<td>" + "" + "<i class=\"glyphicon glyphicon-star\"></i>" + "" + "</td>" + "<td>" + "<div class=\"media\">" + "<a href=";
var pId = urlEncode(productstopdeal.Products[i].Id);
bestbuy += pId;
bestbuy += " class=\"pull-left\">" + "<img src=" + productstopdeal.Products[i].DefaultPictureModel.ImageUrl + " class=\"media-photo\" style=\"height:120px; width:120px;\">" + "</a>" + "<div>" + "<p>" + "<strong><small><strike>MRP: Rs. " + +"/-" + "</strike><br />Offer price: Rs. " + +"/-<br />You save: Rs. " + +"/-</small></strong>" + "</p>" + "</div>" + "<div class=\"media-body\">" + "<p>" + +"</p>" + "</div>" + "<button class=\"btn btn-success\" type=\"button\" id=\"addToCartButton\"><span class=\"glyphicon glyphicon-shopping-cart\"></span> BUY NOW</button>" + "</div>" + "</td>" + "</tr>" + "</tbody>" + "</table>";
}
bestbuy += "</div>";
$('#bestBuy').html(bestbuy);
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bestBuy"></div>

Corrected code from what i've understood.
jQuery.getJSON(queryquery, function (resultsbestbuy) {
var bestbuy = "";
var productstopdeal = JSON.parse(resultsbestbuy);
bestbuy += "<div class=\"table-container\">"
+ "<table class=\"table table-filter\"><tbody>";
for (i = 0; i < productstopdeal.Products.length; i++) {
bestbuy += "<tr>"
+ "<td>"
+ "<div class=\"ckbox\">"
+ "<input type=\"checkbox\" id=\"checkbox1\">"
+ "<label for=\"checkbox1\"></label>"
+ "</div>"
+ "</td>"
+ "<td>"
+ "<a href=\"javascript:;\" class=\"star\">"
+ "<i class=\"glyphicon glyphicon-star\"></i>"
+ "</a>"
+ "</td>"
+ "<td>"
+ "<div class=\"media\">"
+ "<a href='";
var pId = urlEncode(productstopdeal.Products[i].Id);
bestbuy += pId;
bestbuy += "' class=\"pull-left\">"
+ "<img src='" + productstopdeal.Products[i].DefaultPictureModel.ImageUrl + "' class=\"media-photo\" style=\"height:120px; width:120px;\">"
+ "</a>"
+ "<div>"
+ "<p>"
+ "<strong><small><strike>MRP: Rs. " + +"/-"
+ "</strike><br />Offer price: Rs. " + + "/-<br />You save: Rs. " + +"/-</small></strong>"
+ "</p>"
+ "</div>"
+ "<div class=\"media-body\">"
+ "<p>" + + "</p>"
+ "</div>"
+ "<button class=\"btn btn-success\" type=\"button\" id=\"addToCartButton\"><span class=\"glyphicon glyphicon-shopping-cart\"></span> BUY NOW</button>"
+ "</div>"
+ "</td>"
+ "</tr>"
}
bestbuy += "</tbody></table></div>";
$('#bestBuy').html(bestbuy);
});

concat string IE8 SCRIPT438: Object doesn't support property or method

I have this simple Javascript for string concatenation:
function stampaLista(store) {
lista = "<table ><tr>" +
"<td class='titoloLista' style='width:80px'>Data Ins.</td>" +
"<td class='titoloLista' style='width:130px'>Data/Ora Attività</td>" +
"<td class='titoloLista' style='width:100px'>Tipologia</td>" +
"<td class='titoloLista' style='width:30px'>Stato</td>" +
"<td class='titoloLista' style='width:150px'>Utente ins.</td>" +
"<td class='titoloLista' style='width:150px'>Utente designato</td>" +
"<td class='titoloLista' style='width:250px'>Anagrafica</td>" +
"<td class='titoloLista' style='width:30px'>Vai</td>" +
"</tr>";
for (i=0; i<store.length; i++) {
lista += "<tr >" +
"<td class='rigaLista'>" + store[i].dataIns + "</td>" +
"<td class='rigaLista'>" + store[i].dataAtt + " " + store[i].oraAtt + "</td>" +
"<td class='rigaLista'>" + store[i].idTipoAttivita + "</td>" +
"<td class='rigaLista'>" + store[i].stato + "</td>" +
"<td class='rigaLista'>" + store[i].utenteIns + "</td>" +
"<td class='rigaLista'>" + store[i].utenteAtt + "</td>" +
"<td class='rigaLista'>" + store[i].anagrafica + "</td>" +
"<td class='rigaLista'>" + "<div class='go' ><a id='" + store[i].id + "' href='#' class='go' return;><img alt='" + store[i].id + "' src='images/go.gif' /></a>" + "</div></td>" +
"</tr>";
};
lista += "</table>";
lista += "<div class='clearfloat'> </div>";
return lista;
}
but with IE8 I had error, on both population of "lista":
SCRIPT438: Object doesn't support property or method
The problem is solved with IE9 but i need to work also with IE8 due to customer requirements.
Any ideas ?
Thanks a lot
Fabrizio

Because there is HTML mixed with Javascript Make sure there is no HTML element id with the same id as a variable in the Javascript function.

Categories