Highlighting Rows and Columns in Rowgrouping mode (not the plugin)
Highlighting Rows and Columns in Rowgrouping mode (not the plugin)
comfuner
Posts: 9Questions: 0Answers: 0
I am trying desperately :) to get this to work but it's not working..
that means highlighting rows or columns!! and if it's possible to change their other css such as font-color?
thanks
this is the code:
[code]
$(document).ready(function () {
var gs_array = new Array();
$.getJSON("https://spreadsheets.google.com/feeds/list/0AovTwC7nfGXAdG1yQ29KYkhpRjZ3ejFQVk5VZEZOS2c/od6/public/values?alt=json-in-script&gid=0", function (data) {
gs_array = data;
});
var oTable = $('#critic').dataTable({
"bServerSide": false,
"bProcessing": true,
"sAjaxDataProp": "feed.entry",
"sAjaxSource": "https://spreadsheets.google.com/feeds/list/0AovTwC7nfGXAdG1yQ29KYkhpRjZ3ejFQVk5VZEZOS2c/od6/public/values?alt=json",
"aoColumns": [
{
"mDataProp": null,
"sClass": "control center",
"sDefaultContent": ''
},
{ "mDataProp": "gsx$name.$t" },
{ "mDataProp": "gsx$haaretz.$t" },
{ "mDataProp": "gsx$galatz.$t" },
{ "mDataProp": "gsx$yediot.$t" },
{ "mDataProp": "gsx$walla.$t" },
{ "mDataProp": "gsx$pnai.$t" },
{ "mDataProp": "gsx$sof.$t" },
{ "mDataProp": "gsx$israel.$t" },
{ "mDataProp": "gsx$average.$t"}
],
"fnDrawCallback": function (oSettings) {
/*some function here*/
},
"aaSortingFixed": [[0, 'asc']],
"aaSorting": [[9, 'desc']],
"sDom": 'lfr<"giveHeight"t>ip',
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": false,
"bSortClasses": false,
"aoColumnDefs": [
{
"mRender": function (data, type, row) {
img_str = '';
return img_str;
}, "aTargets": [9, 8, 7, 6, 5, 4, 3, 2]
},
{ "bVisible": true, "aTargets": [0] },
{ "sClass" : "center" , "aTargets": [9, 8, 7, 6, 5, 4, 3, 2] }
]
});
// this is not working!!!
oTable.$('td').hover(function () {
var iCol = $('td', this.parentNode).index(this) % 5;
$('td:nth-child(' + (iCol + 1) + ')', oTable.$('tr')).addClass('highlighted');
}, function () {
oTable.$('td.highlighted').removeClass('highlighted');
});
//
var anOpen = [];
$('#critic td.control').live('click', function () {
console.log('click');
var nTr = this.parentNode;
var i = $.inArray(nTr, anOpen);
$(anOpen).each(function () {
if (this !== nTr) {
$('.innerDetails').animate({ opacity: 0 });
$('td.control', this).click();
}
});
if (i === -1) {
$('img', this).attr('src', "images/details_close.png");
var nDetailsRow = oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
$('div.innerDetails', nDetailsRow).slideDown('fast', function () {
$("div.dataTables_scrollBody").scrollTop(nTr.offsetTop);
});
anOpen.push(nTr);
}
else {
$('img', this).attr('src', "images/details_open.png");
$('.innerDetails').animate({ opacity: 0 }, 150);
$('div.innerDetails', $(nTr).next()[0]).slideUp(function () {
oTable.fnClose(nTr);
anOpen.splice(i, 1);
});
}
});
function fnFormatDetails(oTable, nTr, gs_array) {
var oData = oTable.fnGetData(nTr);
var sOut =
'' +
'' +
'' +
'' + oData.gsx$name.$t + '' +
'' + oData.gsx$year.$t + ' ,' +
'' + oData.gsx$country.$t + '' +
'' + oData.gsx$time.$t + '' +
'' + oData.gsx$director.$t + '' +
'' + oData.gsx$actors.$t + '' +
'' + oData.gsx$description.$t + '' +
'לחצו לביקורת באתר' +
'' +
'';
return sOut;
}
}); /* end of ready */
[/code]
that means highlighting rows or columns!! and if it's possible to change their other css such as font-color?
thanks
this is the code:
[code]
$(document).ready(function () {
var gs_array = new Array();
$.getJSON("https://spreadsheets.google.com/feeds/list/0AovTwC7nfGXAdG1yQ29KYkhpRjZ3ejFQVk5VZEZOS2c/od6/public/values?alt=json-in-script&gid=0", function (data) {
gs_array = data;
});
var oTable = $('#critic').dataTable({
"bServerSide": false,
"bProcessing": true,
"sAjaxDataProp": "feed.entry",
"sAjaxSource": "https://spreadsheets.google.com/feeds/list/0AovTwC7nfGXAdG1yQ29KYkhpRjZ3ejFQVk5VZEZOS2c/od6/public/values?alt=json",
"aoColumns": [
{
"mDataProp": null,
"sClass": "control center",
"sDefaultContent": ''
},
{ "mDataProp": "gsx$name.$t" },
{ "mDataProp": "gsx$haaretz.$t" },
{ "mDataProp": "gsx$galatz.$t" },
{ "mDataProp": "gsx$yediot.$t" },
{ "mDataProp": "gsx$walla.$t" },
{ "mDataProp": "gsx$pnai.$t" },
{ "mDataProp": "gsx$sof.$t" },
{ "mDataProp": "gsx$israel.$t" },
{ "mDataProp": "gsx$average.$t"}
],
"fnDrawCallback": function (oSettings) {
/*some function here*/
},
"aaSortingFixed": [[0, 'asc']],
"aaSorting": [[9, 'desc']],
"sDom": 'lfr<"giveHeight"t>ip',
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": false,
"bSortClasses": false,
"aoColumnDefs": [
{
"mRender": function (data, type, row) {
img_str = '';
return img_str;
}, "aTargets": [9, 8, 7, 6, 5, 4, 3, 2]
},
{ "bVisible": true, "aTargets": [0] },
{ "sClass" : "center" , "aTargets": [9, 8, 7, 6, 5, 4, 3, 2] }
]
});
// this is not working!!!
oTable.$('td').hover(function () {
var iCol = $('td', this.parentNode).index(this) % 5;
$('td:nth-child(' + (iCol + 1) + ')', oTable.$('tr')).addClass('highlighted');
}, function () {
oTable.$('td.highlighted').removeClass('highlighted');
});
//
var anOpen = [];
$('#critic td.control').live('click', function () {
console.log('click');
var nTr = this.parentNode;
var i = $.inArray(nTr, anOpen);
$(anOpen).each(function () {
if (this !== nTr) {
$('.innerDetails').animate({ opacity: 0 });
$('td.control', this).click();
}
});
if (i === -1) {
$('img', this).attr('src', "images/details_close.png");
var nDetailsRow = oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
$('div.innerDetails', nDetailsRow).slideDown('fast', function () {
$("div.dataTables_scrollBody").scrollTop(nTr.offsetTop);
});
anOpen.push(nTr);
}
else {
$('img', this).attr('src', "images/details_open.png");
$('.innerDetails').animate({ opacity: 0 }, 150);
$('div.innerDetails', $(nTr).next()[0]).slideUp(function () {
oTable.fnClose(nTr);
anOpen.splice(i, 1);
});
}
});
function fnFormatDetails(oTable, nTr, gs_array) {
var oData = oTable.fnGetData(nTr);
var sOut =
'' +
'' +
'' +
'' + oData.gsx$name.$t + '' +
'' + oData.gsx$year.$t + ' ,' +
'' + oData.gsx$country.$t + '' +
'' + oData.gsx$time.$t + '' +
'' + oData.gsx$director.$t + '' +
'' + oData.gsx$actors.$t + '' +
'' + oData.gsx$description.$t + '' +
'לחצו לביקורת באתר' +
'' +
'';
return sOut;
}
}); /* end of ready */
[/code]
This discussion has been closed.