All rows not rendered during load
All rows not rendered during load
Hi,
I am using datatable 1.9.
We are showing jquery sparklines in one of the columns for the same http://omnipotent.net/jquery.sparkline/
For jquery sparklines show up only when we get the size of the element.
for hidden elements there is no size and thus sparkline doesnt get loaded.
In Datatable, i currently have, lets say 13 records. and i have my _datatable.info set to 10 entries to be shown on load.
Due to which, the next 3 records do not show the sparlines.
So if u click next or sort it or apply filter or change the number of shown entries, those 3 rows do not show sparklines
Is there any ways to capture the table change event , or get the hidden elements on load.
Thanks in advance
I am using datatable 1.9.
We are showing jquery sparklines in one of the columns for the same http://omnipotent.net/jquery.sparkline/
For jquery sparklines show up only when we get the size of the element.
for hidden elements there is no size and thus sparkline doesnt get loaded.
In Datatable, i currently have, lets say 13 records. and i have my _datatable.info set to 10 entries to be shown on load.
Due to which, the next 3 records do not show the sparlines.
So if u click next or sort it or apply filter or change the number of shown entries, those 3 rows do not show sparklines
Is there any ways to capture the table change event , or get the hidden elements on load.
Thanks in advance
This discussion has been closed.
Replies
[code]
$('#table').dataTable();
$('.inlinesparkline').sparkline();
[/code]
change it to:
[code]
var table = $('#table').dataTable();
table.$('.inlinesparkline').sparkline();
[/code]
The reason for this: DataTables will remove form the DOM rows which aren't needed for the current page - so the selector you have to init spark lines at the moment will only get the items on the first page. The $ API method for DataTables is basically a jQuery "proxy" and will operate on all rows in the table.
Allan
i have made a simple plugin to use with sparkline for datatable 1.9.
so far i haven't problems with reloading or refreshing the page.
PARAM:
sType: "Line","Bar","Pie" : type of chart to show
iColInline: -1, : i ndex column where chart is created
aiInlineCols: [], : array of columns to process
sClassName: "InlineChart", : class name associated with spakline
sNullZeroChart: "Default","Null2Zero","Zero2Null" : treatment for zero and null values
sWidthChart: "3em", : width of chart in cell
sHeigthChart: "20px", : height of chart in cell
sLineColor: "blue", : line color (Line chart)
sFillColor: "#CCDDFF", : fill color (Line chart)
bShowSpots: false, : show spots (Line chart)
sBarColor: "blue", : positive bar color (Bar chart)
sNegBarColor: "red", : negative bar color (Bar chart)
sZeroBarColor: "#CCDDFF", : Zero bar color (bar chart)
sNullBarColor: "gray", : null bar color (bar chart)
asMapColorCol: [], : array of string colors (Bar,Pie chart)
aoMapColorVal: null : array of object colors (bar chart)
[code]
/*
* This source file is free software, under either the GPL v2 license or a
* BSD style license, as supplied with this software.
*
* This source file is distributed in the hope that it will be useful, but
* WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
* or FITNESS FOR A PARTICULAR PURPOSE.
* Parameters:
*/
jQuery.fn.dataTableExt.oApi.fnInlineChart = function(oSettings, options) {
oSettings.oApi._fnCallbackReg(oSettings, 'aoDrawCallback', function() {
var defaults = {
sType: "Line",
iColInline: -1,
aiInlineCols: [],
sClassName: "InlineChart",
sNullZeroChart: "Default",
sWidthChart: "3em",
sHeigthChart: "20px",
sLineColor: "blue",
sFillColor: "#CCDDFF",
bShowSpots: false,
sBarColor: "blue",
sNegBarColor: "red",
sZeroBarColor: "#CCDDFF",
sNullBarColor: "gray",
asMapColorCol: [],
aoMapColorVal: null
};
var oTable = oSettings.oInstance;
var properties = $.extend(defaults, options);
//Validar se as propriedades estao correctas
if (properties.iColInline < 0) {
return;
}
if (properties.aiInlineCols.length < 2) {
return;
}
if (oSettings.aiDisplay.length == 0) {
return;
}
var nTrs = oTable.$('tr', { "page": "current" });
for (var r = 0; r < nTrs.length; r++) {
// Loop through the rows/fields for matches
var nRow = nTrs[r];
var sValues = "";
/* Get the position of the current data from the node */
var aPos = oTable.fnGetPosition(nRow);
/* Get the data array for this row */
var aData = oTable.fnGetData(aPos);
for (var i = 0; i < properties.aiInlineCols.length; i++) {
var sData = aData[properties.aiInlineCols[i]];
sData = sData.replace("%", ""); //para poder trabalhar valores percentuais
sData = sData.replace("R$", ""); //para poder trabalhar moeda
sData = sData.replace(" ", ""); //para poder trabalhar sem espaços
sData = sData.replace(".", ""); //para poder trabalhar numeros
sData = sData.replace(",", "."); //para poder trabalhar numeros
if (properties.sNullZeroChart == "Default") {
if ((sData == null) || (sData == 'undefined'))
sData = "null";
else if (isNaN(parseFloat(sData)))
sData = "0";
}
if (properties.sNullZeroChart == "Null2Zero") {
if ((sData == null) || (sData == 'undefined') || (sData == ''))
sData = "0";
else if (isNaN(parseFloat(sData)) || parseFloat(sData) == null)
sData = "0";
}
if (properties.sNullZeroChart == "Zero2Null") {
if ((sData == null) || (sData == 'undefined') || (sData == ''))
sData = "null";
else if (isNaN(parseFloat(sData)))
sData = "null";
}
sValues = sValues + sData + ",";
};
sValues = sValues.substring(0, sValues.length - 1);
$('td:eq(' + properties.iColInline + ')', nRow).addClass(properties.sClassName);
$('td:eq(' + properties.iColInline + ')', nRow).addClass("sparkline");
$('td:eq(' + properties.iColInline + ')', nRow).attr("values", sValues);
}
//Draw inline chart
var cells = $("." + properties.sClassName, oTable);
if (cells !== null && cells !== 'undefined') {
if (properties.sType == 'Bar') {
if (properties.aoMapColorVal !== null && properties.aoMapColorVal !== 'undefined')
cells.sparkline('html', { type: "bar", width: properties.sWidthChart, height: properties.sHeigthChart, barColor: properties.sBarColor, negBarColor: properties.sNegBarColor, zeroBarColor: properties.sZeroBarColor, nullBarColor: properties.sNullBarColor, mapColor: properties.aoMapColorVal });
else {
if (properties.asMapColorCol.length !== 0)
cells.sparkline('html', { type: "bar", width: properties.sWidthChart, height: properties.sHeigthChart, barColor: properties.sBarColor, negBarColor: properties.sNegBarColor, zeroBarColor: properties.sZeroBarColor, nullBarColor: properties.sNullBarColor, mapColor: properties.asMapColorCol });
else
cells.sparkline('html', { type: "bar", width: properties.sWidthChart, height: properties.sHeigthChart, barColor: properties.sBarColor, negBarColor: properties.sNegBarColor, zeroBarColor: properties.sZeroBarColor, nullBarColor: properties.sNullBarColor });
}
}
if (properties.sType == "Line") {
if (properties.bShowSpots)
cells.sparkline('html', { type: "line", width: properties.sWidthChart, height: properties.sHeigthChart, lineColor: properties.sLineColor, fillColor: properties.sFillColor });
else
cells.sparkline('html', { type: "line", width: properties.sWidthChart, height: properties.sHeigthChart, lineColor: properties.sLineColor, fillColor: properties.sFillColor, spotColor: false, minSpotColor: false, maxSpotColor: false });
}
if (properties.sType == 'Pie') {
if (properties.asMapColorCol.length !== 0)
cells.sparkline('html', { type: "pie", width: properties.sWidthChart, height: properties.sHeigthChart, mapColor: properties.asMapColorCol });
else
cells.sparkline('html', { type: "pie", width: properties.sWidthChart, height: properties.sHeigthChart });
}
}
});
return this;
};
/*
* Example init
*/
$(document).ready(function(){
$('#example').dataTable()
.fnInlineChart ('Line', 5, [1,2,3,4]);
});
[/code]
MY table gets rendered with data first. Than i make singel DWR calls to get the value for sparklines and try to push them in the table cells.
This works for the first 10 rows. When i click next, on tht page, the values dont load
Help appreciated
beware that i have edited the code to correct a error due to NaN validation
joao noronha
Let me elaborate a little more on the situation i have here with my datatable.
I have 4 sparlines in my tables, and th data is dynamic.
So i associate each sparline with the Row id and fill it accordingly.
[code]viewATPDataTable.$('#displaySizeSparkline' + id).sparkline(sizeValues,sparklineOptions);[/code]
When i use your plugin, it returns the call since properties.iColInline = -1.
I'd love to put the plug-in up on the API page if that's okay? What name / link would you like for the credit? :-)
Allan
The purpuse of my plugin is to, for a set of columns, show in a defined column the spark in question.
its to work client-side, during the rendering of the table.
the developer has just to give wich columns to use and where to see it. the plugin himself is responsible for the distribuition of values and to present the chart.
i forgot one detail (you can alter it or remove): line 63 exist to deal with currency (R$ is from Brazil), the rest is to put right what it may be wrong (decimal point). There is probably a better way to do it.
It presumes that the column values are numbers, if not they return null or zero acording to sNullZeroChart.
Has to your return it happens because you don't give the column to render the chart (iColInline), has stated in my example above.
Allan,
At the moment I am documenting and building demos for the object I finish, jquerygrid. It uses datatable to upgrade asp.net gridview, all client-side by using properties from the object, no need to know jquery, the developer has just to fill the properties, allthough it may help in case of error or to change anything.
There are several other plugins in adition, one to present table charts (using jqplot.js), PaginationListbox, a refresh button, upgrade in tooltable (to allow print button to work with other objects than the table and use for table charting), and other small fixes to other plugins I used.
InlineChart plugin is a standalone and you can allready use, feel free to add it. Use my name João Paulo Noronha.
Joao
how do you have your code? if the example i gave is not working then use the properties to assign the values. By default the plugin uses 'InlineChart' has the class to draw the chart, if you use other one then you have to use the property sClassName to identify it.
[code]
/*
* Example init
*/
$(document).ready(function(){
$('#example').dataTable()
.fnInlineChart ({ sType: 'Line', iColInline: 5, aiInlineCols: [1,2,3,4] });
});
[/code
Joao
i initialize my table in the jquery ready function.
Now, i make a separate DWR call and get the values from the server based on every row.
This values i later on use in the callback function of DWR call and try to plot the sparkline as they are not static and i ahve as many as 5 sparlines in the table.
I tried using ur plugin and the example in my callback fucntion, but it didnt seem to work
[code] Loading...[/code]
So i have to pass the sparkline as a part of one column
you don't need to do nothing regarding sparkline, let the plugin do all the work for you. all you need is to tell it where to put (must have an empty column for it in your table) and what columns to process.
i completely agree with u, I am able to plot the trendlines, But this are all static trendlines.
I need to plot dynamic trendlines
My table row i.e. the td element has 2 spans, 1 span shows the recent value and in the other span i plot the trendline as shown in the JSP above.
Also, I have different data to be plotted for different rows, So alongwith the Column number i need to pass the row number also. and the exact Span element needs to be picked up, to plot the trendlines.
I hope i make sense
I understand what's wrong, sorry for all the mess. I thought that we were just talking about one sparkline column per row and all the same for the table. My plugin is build to work with only one spakliner for each row, within the TD element himself.
you need to change the plugin to have a function as parameter to validate the row in the process (this i think is the best solution).
After that is just a case of just call it as many times as sparklines you have in your rows, each call with a function to validate the proper row, that if false won't create nothing.
Just added the sparkline call in the callback function
Thanks a Lot, jp_Noronha and Allan