I'm not fully understanding your question. Could you give us an example? At first glance/thought, it sounds like you might need better filtering on however you're pulling the data. That is, if you're talking about "If row 5 (date added) is 30 days old or older, hide the row", then I would suggest changing the filter when you pull the data. However, if you're talking about "If the row above has a date greater than this one, hide this one." It really depends on how you're trying to do it so if you could give an example, that'd be great. Thanks.
I'm not pulling the data from anywhere, since it's just a statical table, that is edited in a bad CMS.
Anyway, every row has an expiration date, when the that date is older than todays date, I need to hide the row. Right now I do it the hackish way by just adding a class "expired" on every row that is expired, and the expired class has a display:none. But there got to be some better way to do this?
To me that looks like the best way to go, honestly. What you could possibly do (sorry Allan if this is against any of your rules) is try to incorporate your function into the jquery.dataTable.js file itself and have some parameters (iFilterCol_(int), iFilterVal_(int), iFilterCondition_(int)) that would be passed into the table. This way, on initialization, you'd add something like...
And in your function like you have above, all you'd do is replace some of the values, have a switch/if else on the condition, and then you could reuse this else where if you wanted for different values. Hope this helps.
Okei, thanks for your help, I don't I'm going to hack around in the js file, I have a feeling it's going to cause more problems than it solves.
My main problem though, by hiding my rows using classes, DataTables doesn't work corretly when I want to show the hidden rows again. I have a button to show expired rows.
The rows shows up, but the now visible rows has lost it's style and their background color is just plain white. The fnDraw() don't work either. What does work is the commented out code, if I first sort on way and then back I get back to the correct style.
as display is the class in the css fill. I'm not sure if that's a bug in the dataTables, or if that's a jQuery bug as the .removeClass() is not something Allan wrote. I could be wrong though. Let me know.
Dynamically showing an hiding rows in DataTables is entirely done by filtering. You could potentially use the built in filtering on a specific column http://datatables.net/api#fnFilter if you know what date you are looking for, but if you want to use a range, or anything more complex than what is basically a static string, then you will need to use a filtering plug-in:
Documentation: http://datatables.net/development/filtering
Available plug-ins: http://datatables.net/plug-ins/filtering
Example of plug-in in action: http://datatables.net/examples/plug-ins/range_filtering.html
There isn't a plug-in to do date range filtering yet (if you fancy having a go, please let us know with your code! :-) ). I've added it to my to-do list although it will probably be a while before I get to that one...
But what about filtering by row className? is that possible?
But I was hoping for a function like fnToggleRows() where you just supply an domelement or an array with domelements of rows, and if they are visible hide them, if not show them. Should also be possible to supply an index or array with index'.
Yes indeed it is quite possible using custom filtering:
[code]
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var nTr = oSettings.aoData[iDataIndex].nTr;
if ( nTr.className.match( /whatever_class/ ) {
return true;
}
return false;
}
);
[/code]
What this code does (I have to say, I've not tested it, so there may be a trivial compile error... but the principle is right!) is for each row that DataTables asks to check the filtering of it will get the TR element, check the class and then return a boolean to say if it should be filtered out or not.
The way DataTables works internally is to have the aoData as the master data cache. There are then two arrays of indexes pointing to that array - aiDisplayMaster is the indexes after being sorted, and aiDisplay (which is what is used for the actual draw) is the indexes after sorting (from the master) and filtering (like the above function).
So it would be possible to pass DataTables an array of indexes from aoData for which you don't want in the display (just delete from the aiDisplay), but the above should achieve basically the same thing. It would be (I think) reasonably easy to write a plug-in which would take an array of TR elements and then buzz through the display array, removing the matching TR if you prefer to go that route.
Replies
Anyway, every row has an expiration date, when the that date is older than todays date, I need to hide the row. Right now I do it the hackish way by just adding a class "expired" on every row that is expired, and the expired class has a display:none. But there got to be some better way to do this?
$table.find('tbody tr').each(function(index, value) {
var $this = $(this),
tableDate = $this.find('td:eq(2)').text().split('-'),
startDate = new Date(tableDate[0], (parseInt(tableDate[1]) + 1), tableDate[2]),
todaysDate = new Date();
if(dates.compare(todaysDate, tableDate) === 1) {
$this.addClass('ended');
}
});
[code]
$('#tableName').dataTable({
"iFilterCol_0": 3,
"iFilterVal_0": Date(),
"iFilterCondition": "<"
})
[/code]
And in your function like you have above, all you'd do is replace some of the values, have a switch/if else on the condition, and then you could reuse this else where if you wanted for different values. Hope this helps.
My main problem though, by hiding my rows using classes, DataTables doesn't work corretly when I want to show the hidden rows again. I have a button to show expired rows.
$container.find('.fg-toolbar b').click(function() {
$table.find('tbody tr.ended').removeClass();
oTable.fnDraw();
/*
oTable.fnSort([[2, "asc"]]);
setTimeout(function() {
oTable.fnSort([[2, "desc"]]);
},100);
*/
});
The rows shows up, but the now visible rows has lost it's style and their background color is just plain white. The fnDraw() don't work either. What does work is the commented out code, if I first sort on way and then back I get back to the correct style.
Any thoughts?
Allan, might this be a bug?
$table.find('tbody tr.ended').removeClase().addClass("display")
as display is the class in the css fill. I'm not sure if that's a bug in the dataTables, or if that's a jQuery bug as the .removeClass() is not something Allan wrote. I could be wrong though. Let me know.
I don't need to add a class display. Removing the .ended class does the same thing, since the .ended class is what keeping the rows hidden.
I've had the same problem before. That the row style gets lost. Only then it was because i cloned the oTable. This, i think, has been fixed in 1.7.
Allan. Could you take a look at it?
Documentation: http://datatables.net/development/filtering
Available plug-ins: http://datatables.net/plug-ins/filtering
Example of plug-in in action: http://datatables.net/examples/plug-ins/range_filtering.html
There isn't a plug-in to do date range filtering yet (if you fancy having a go, please let us know with your code! :-) ). I've added it to my to-do list although it will probably be a while before I get to that one...
Regards,
Allan
But what about filtering by row className? is that possible?
But I was hoping for a function like fnToggleRows() where you just supply an domelement or an array with domelements of rows, and if they are visible hide them, if not show them. Should also be possible to supply an index or array with index'.
[code]
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var nTr = oSettings.aoData[iDataIndex].nTr;
if ( nTr.className.match( /whatever_class/ ) {
return true;
}
return false;
}
);
[/code]
What this code does (I have to say, I've not tested it, so there may be a trivial compile error... but the principle is right!) is for each row that DataTables asks to check the filtering of it will get the TR element, check the class and then return a boolean to say if it should be filtered out or not.
The way DataTables works internally is to have the aoData as the master data cache. There are then two arrays of indexes pointing to that array - aiDisplayMaster is the indexes after being sorted, and aiDisplay (which is what is used for the actual draw) is the indexes after sorting (from the master) and filtering (like the above function).
So it would be possible to pass DataTables an array of indexes from aoData for which you don't want in the display (just delete from the aiDisplay), but the above should achieve basically the same thing. It would be (I think) reasonably easy to write a plug-in which would take an array of TR elements and then buzz through the display array, removing the matching TR if you prefer to go that route.
Regards,
Allan