cant get fixed header to work
cant get fixed header to work
Been trying to figure it out by myself for a few days now, but I am really just stuck starring at the screen. Since this is my first time using datatables.net I was hoping there was someone in here that can help me.
getting this error: "Unable to get value of the property 'fnGetData': object is null or undefined"
this is my code:
[code]
$(document).ready(function () {
$('.jTable th').css("padding-right", "15px");
$('.tableWidth').css("width", $('.jTable').width());
var oTable = $('.jTable').dataTable({
//#1 Searchfields top and bottom
//"sDom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
"iDisplayLength": -1,
//#2 Show x rows per page
"aLengthMenu": [[50, 100, -1], [50, 100, "Alle"]],
//#3 Show/hide columns
"sDom": 'C<"clear">lfrtip',
"oColVis": {
"buttonText": "Change columns"
},
"fnFooterCallback": function (nRow, aasData, iStart, iEnd, aiDisplay) {
$($(nRow).children()).remove();
for (var i = 0; i < aasData[0].length; i++) {
var a = document.createElement('th');
$(a).html('');
$(nRow).append(a);
}
var columnas = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28]; //the columns you wish to add
for (var j in columnas) {
var columnaActual = columnas[j];
var total = 0;
for (var i = iStart; i < iEnd; i++) {
total = total + parseInt(aasData[aiDisplay[i]][columnaActual]);
}
if (isNaN(total)) {
total = "";
}
$($(nRow).children().get(columnaActual)).html(addCommas(total));
}
},
"aoColumnDefs": [{ "aTargets": ["Lisens", "Lisens 3.Part", "Vedlikehold", "Support", "Konsulent", "Installasjon", "Opplæring", "AMS", "Total", "Veiet Lisens", "Veiet Lisens 3P", "Veiet Vedlikehold", "Veiet Support", "Veiet Konsulent", "Veiet AMS", "Veiet Total"], "bUseRendered": false, "fnRender": function (o) { return o.oSettings.fnFormatNumber(parseFloat(o.aData[o.iDataColumn])); } }]
});
new FixedHeader(oTable);
//#4 Select/deselect one/several rows with mouseclick
/* Add a click handler to the rows - this could be used as a callback */
$('.jTable tr').click(function () {
if ($(this).hasClass('row_selected'))
$(this).removeClass('row_selected');
else
$(this).addClass('row_selected');
});
/* Init the table */
// new FixedHeader(oTable);
});
//METHODS START
//#3 Show/hide columns ( to use function: Link)
//function fnShowHide(iCol) {
// /* Get the DataTables object again - this is not a recreation, just a get of the object */
// var oTable = $('.jTable').dataTable();
// var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
// oTable.fnSetColumnVis(iCol, bVis ? false : true);
//}
//#4 Select/deselect one/several rows with mouseclick
/*
* I don't actually use this here, but it is provided as it might be useful and demonstrates
* getting the TR nodes from DataTables
*/
function fnGetSelected(oTableLocal) {
var aReturn = new Array();
var aTrs = oTableLocal.fnGetNodes();
for (var i = 0; i < aTrs.length; i++) {
if ($(aTrs[i]).hasClass('row_selected')) {
aReturn.push(aTrs[i]);
}
}
return aReturn;
}
function addCommas(n) {
var rx = /(\d+)(\d{3})/;
return String(n).replace(/\d+/, function (w) {
while (rx.test(w)) {
w = w.replace(rx, '$1,$2');
}
return w;
});
}
[/code]
and
[code]
(function ($) {
/*
* Function: fnGetColumnData
* Purpose: Return an array of table values from a particular column.
* Returns: array string: 1d data array
* Inputs: object:oSettings - dataTable settings object. This is always the last argument past to the function
* int:iColumn - the id of the column to extract the data from
* bool:bUnique - optional - if set to false duplicated values are not filtered out
* bool:bFiltered - optional - if set to false all the table data is used (not only the filtered)
* bool:bIgnoreEmpty - optional - if set to false empty values are not filtered from the result array
* Author: Benedikt Forchhammer
*/
$.fn.dataTableExt.oApi.fnGetColumnData = function (oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty) {
// check that we have a column id
if (typeof iColumn == "undefined") return new Array();
// by default we only wany unique data
if (typeof bUnique == "undefined") bUnique = true;
// by default we do want to only look at filtered data
if (typeof bFiltered == "undefined") bFiltered = true;
// by default we do not wany to include empty values
if (typeof bIgnoreEmpty == "undefined") bIgnoreEmpty = true;
// list of rows which we're going to loop through
var aiRows;
// use only filtered rows
if (bFiltered == true) aiRows = oSettings.aiDisplay;
// use all rows
else aiRows = oSettings.aiDisplayMaster; // all row numbers
// set up data array
var asResultData = new Array();
var oTable = $('.jTable').dataTable();
for (var i = 0, c = aiRows.length; i < c; i++) {
iRow = aiRows[i];
var sValue = oTable.fnGetData(iRow, iColumn);
// var aData = this.fnGetData(iRow);
// var sValue = aData[iColumn];
// ignore empty values?
if (bIgnoreEmpty == true && sValue.length == 0) continue;
// ignore unique values?
else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue;
// else push the value onto the result data array
else asResultData.push(sValue);
}
return asResultData;
}
} (jQuery));
function fnCreateSelect(aData) {
var r = '', i, iLen = aData.length;
for (i = 0; i < iLen; i++) {
r += '' + aData[i] + '';
}
return r + '';
}
$(document).ready(function () {
/* Initialise the DataTable */
var oTable = $('.jTable').dataTable();
var ddl = "";
/* Add a select menu for each TH element in the table footer */
$("thead tr th").each(function (i) {
if (i != 0) {
ddl += "" + fnCreateSelect(oTable.fnGetColumnData(i)) + "";
}
else
ddl += " ";
});
ddl += "";
$(".jTable thead:last").append(ddl);
$("thead tr td").each(function (i) {
if (i != 0) {
$('select', this).change(function () {
oTable.fnFilter($(this).val(), i);
});
}
});
});
[/code]
The error pops up at these lines in jquerydataTables.js when I try to run:
[code]
function _fnGetCellData( oSettings, iRow, iCol, sSpecific )
{
var sData;
var oCol = oSettings.aoColumns[iCol];
var oData = oSettings.aoData[iRow]._aData;
if ( (sData=oCol.fnGetData( oData, sSpecific )) === undefined )
{
if ( oSettings.iDrawError != oSettings.iDraw && oCol.sDefaultContent === null )
{
_fnLog( oSettings, 0, "Requested unknown parameter "+
(typeof oCol.mDataProp=='function' ? '{mDataprop function}' : "'"+oCol.mDataProp+"'")+
" from the data source for row "+iRow );
oSettings.iDrawError = oSettings.iDraw;
}
return oCol.sDefaultContent;
[/code]
all help is appreciated
getting this error: "Unable to get value of the property 'fnGetData': object is null or undefined"
this is my code:
[code]
$(document).ready(function () {
$('.jTable th').css("padding-right", "15px");
$('.tableWidth').css("width", $('.jTable').width());
var oTable = $('.jTable').dataTable({
//#1 Searchfields top and bottom
//"sDom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
"iDisplayLength": -1,
//#2 Show x rows per page
"aLengthMenu": [[50, 100, -1], [50, 100, "Alle"]],
//#3 Show/hide columns
"sDom": 'C<"clear">lfrtip',
"oColVis": {
"buttonText": "Change columns"
},
"fnFooterCallback": function (nRow, aasData, iStart, iEnd, aiDisplay) {
$($(nRow).children()).remove();
for (var i = 0; i < aasData[0].length; i++) {
var a = document.createElement('th');
$(a).html('');
$(nRow).append(a);
}
var columnas = [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28]; //the columns you wish to add
for (var j in columnas) {
var columnaActual = columnas[j];
var total = 0;
for (var i = iStart; i < iEnd; i++) {
total = total + parseInt(aasData[aiDisplay[i]][columnaActual]);
}
if (isNaN(total)) {
total = "";
}
$($(nRow).children().get(columnaActual)).html(addCommas(total));
}
},
"aoColumnDefs": [{ "aTargets": ["Lisens", "Lisens 3.Part", "Vedlikehold", "Support", "Konsulent", "Installasjon", "Opplæring", "AMS", "Total", "Veiet Lisens", "Veiet Lisens 3P", "Veiet Vedlikehold", "Veiet Support", "Veiet Konsulent", "Veiet AMS", "Veiet Total"], "bUseRendered": false, "fnRender": function (o) { return o.oSettings.fnFormatNumber(parseFloat(o.aData[o.iDataColumn])); } }]
});
new FixedHeader(oTable);
//#4 Select/deselect one/several rows with mouseclick
/* Add a click handler to the rows - this could be used as a callback */
$('.jTable tr').click(function () {
if ($(this).hasClass('row_selected'))
$(this).removeClass('row_selected');
else
$(this).addClass('row_selected');
});
/* Init the table */
// new FixedHeader(oTable);
});
//METHODS START
//#3 Show/hide columns ( to use function: Link)
//function fnShowHide(iCol) {
// /* Get the DataTables object again - this is not a recreation, just a get of the object */
// var oTable = $('.jTable').dataTable();
// var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
// oTable.fnSetColumnVis(iCol, bVis ? false : true);
//}
//#4 Select/deselect one/several rows with mouseclick
/*
* I don't actually use this here, but it is provided as it might be useful and demonstrates
* getting the TR nodes from DataTables
*/
function fnGetSelected(oTableLocal) {
var aReturn = new Array();
var aTrs = oTableLocal.fnGetNodes();
for (var i = 0; i < aTrs.length; i++) {
if ($(aTrs[i]).hasClass('row_selected')) {
aReturn.push(aTrs[i]);
}
}
return aReturn;
}
function addCommas(n) {
var rx = /(\d+)(\d{3})/;
return String(n).replace(/\d+/, function (w) {
while (rx.test(w)) {
w = w.replace(rx, '$1,$2');
}
return w;
});
}
[/code]
and
[code]
(function ($) {
/*
* Function: fnGetColumnData
* Purpose: Return an array of table values from a particular column.
* Returns: array string: 1d data array
* Inputs: object:oSettings - dataTable settings object. This is always the last argument past to the function
* int:iColumn - the id of the column to extract the data from
* bool:bUnique - optional - if set to false duplicated values are not filtered out
* bool:bFiltered - optional - if set to false all the table data is used (not only the filtered)
* bool:bIgnoreEmpty - optional - if set to false empty values are not filtered from the result array
* Author: Benedikt Forchhammer
*/
$.fn.dataTableExt.oApi.fnGetColumnData = function (oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty) {
// check that we have a column id
if (typeof iColumn == "undefined") return new Array();
// by default we only wany unique data
if (typeof bUnique == "undefined") bUnique = true;
// by default we do want to only look at filtered data
if (typeof bFiltered == "undefined") bFiltered = true;
// by default we do not wany to include empty values
if (typeof bIgnoreEmpty == "undefined") bIgnoreEmpty = true;
// list of rows which we're going to loop through
var aiRows;
// use only filtered rows
if (bFiltered == true) aiRows = oSettings.aiDisplay;
// use all rows
else aiRows = oSettings.aiDisplayMaster; // all row numbers
// set up data array
var asResultData = new Array();
var oTable = $('.jTable').dataTable();
for (var i = 0, c = aiRows.length; i < c; i++) {
iRow = aiRows[i];
var sValue = oTable.fnGetData(iRow, iColumn);
// var aData = this.fnGetData(iRow);
// var sValue = aData[iColumn];
// ignore empty values?
if (bIgnoreEmpty == true && sValue.length == 0) continue;
// ignore unique values?
else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue;
// else push the value onto the result data array
else asResultData.push(sValue);
}
return asResultData;
}
} (jQuery));
function fnCreateSelect(aData) {
var r = '', i, iLen = aData.length;
for (i = 0; i < iLen; i++) {
r += '' + aData[i] + '';
}
return r + '';
}
$(document).ready(function () {
/* Initialise the DataTable */
var oTable = $('.jTable').dataTable();
var ddl = "";
/* Add a select menu for each TH element in the table footer */
$("thead tr th").each(function (i) {
if (i != 0) {
ddl += "" + fnCreateSelect(oTable.fnGetColumnData(i)) + "";
}
else
ddl += " ";
});
ddl += "";
$(".jTable thead:last").append(ddl);
$("thead tr td").each(function (i) {
if (i != 0) {
$('select', this).change(function () {
oTable.fnFilter($(this).val(), i);
});
}
});
});
[/code]
The error pops up at these lines in jquerydataTables.js when I try to run:
[code]
function _fnGetCellData( oSettings, iRow, iCol, sSpecific )
{
var sData;
var oCol = oSettings.aoColumns[iCol];
var oData = oSettings.aoData[iRow]._aData;
if ( (sData=oCol.fnGetData( oData, sSpecific )) === undefined )
{
if ( oSettings.iDrawError != oSettings.iDraw && oCol.sDefaultContent === null )
{
_fnLog( oSettings, 0, "Requested unknown parameter "+
(typeof oCol.mDataProp=='function' ? '{mDataprop function}' : "'"+oCol.mDataProp+"'")+
" from the data source for row "+iRow );
oSettings.iDrawError = oSettings.iDraw;
}
return oCol.sDefaultContent;
[/code]
all help is appreciated
This discussion has been closed.
Replies
[code]
$('#results-Print').click(function(){
debugger;
var data;
oTable=$('#resultsTable').dataTable();
//alert(oTable.fnGetData().length);
for(var row in oTable.fnGetData()){
data=oTable.fnGetData(row,[0,3,4]);
debugger;
}
});
[/code]