Filter table from list of links

college_dev

I'd like to filter my table using a list of links (see bottom);

I tried just setting the value of the search field to the value of the link clicked, but no dice:

[code]
$("'ul.alphasort li a").click(function(){
var box = $("input#dataTables_filterbox") // I added the id to the input myself
var char = $(this).attr('title').toUpperCase();

if (char === 'ALL') { // if they click 'all', show everything
box.val(char);
} else {
box.val(char);
}
});
[/code]
This didn't work.

How can I do this, perhaps using fnDisplayRow() or similar? Can it be written as a plugin?

This is how I have the links set up:
[code]

All
A
B
C
...
[/code]

When they click one, it should only show rows with cells starting with this letter, and "all" should should all the rows, obviously.

allan

Hello,

The recommended way to do filtering is through the fnFilter() API function, which is built in to DataTables (no need for a plug-in here :-) ). See http://datatables.net/api#fnFilter for the documentation on this function. Basically, just pass whatever you want to filter the table by to this function and everything else will be taken care of for you. Then to filter by 'All', just pass an empty string to fnFilter() (i.e. filter by nothing).

The one thing it will not do however, is to fill in the value of the input box. But you already have this code, so you could just add a call to fnFilter() into there. The other option is to trigger the 'keyup' function which is attached to the input box with something like: box.keyup();

Hope this helps,
Allan

college_dev

Based upon your helpful advice, I've come up with this:

[code]
$(document).ready(function() {
$("table.data").dataTable({
"sDom": 'T<"clear">lfrtip', // create the XLS, CSV, print, and copy to clipboard buttons
"fnDrawCallback": function() {
$('table.data tbody tr').each(function() {
var email = $(this).find('td:last'); // find the last column of each row
$(email).html('' + $(email).text() + '');
});
}
});
$("ul.alphasort li a").click(function() {
var char = $(this).attr('title').toUpperCase();

if (char === 'ALL') { // if they click 'all', show everything
$("table.data").dataTable().fnFilter('');
} else {
$("table.data").dataTable().fnFilter('' + char + '');
}
});
});
[/code]

However, it doesn't appear to be working. I'm pretty sure the problem is the way I'm attempting to pass a variable as the fnFilter string. Any thoughts?

allan

A small alteration required:

[code]
$(document).ready(function() {
var oTable = $("table.data").dataTable({
"sDom": 'T<"clear">lfrtip', // create the XLS, CSV, print, and copy to clipboard buttons
"fnDrawCallback": function() {
$('table.data tbody tr').each(function() {
var email = $(this).find('td:last'); // find the last column of each row
$(email).html('' + $(email).text() + '');
});
}
});
$("ul.alphasort li a").click(function() {
var char = $(this).attr('title').toUpperCase();

if (char === 'ALL') { // if they click 'all', show everything
oTable.fnFilter('');
} else {
oTable.fnFilter('' + char + '');
}
});
});
[/code]
$().dataTable is an intialiser - so in fact you were intialisation DataTables many many times with your code. This example for API functions (and some of the others) might be of interest to you: http://datatables.net/examples/example_plugin_api.html

Regards,
Allan

college_dev

Still no dice. The table initializes perfectly well, but the links don't filter the table...

allan

I don't see anything obviously wrong with the code above, but I have just noticed this in your original post:

> When they click one, it should only show rows with cells starting with this letter, and "all" should should all the rows, obviously.

What is happening above is that the fnFilter() function is filtering the table looking for your designated character anywhere in the row. So a row with "apples, oranges, bananas" would match for the latter 'o', which is obviously not what you want.

We it's time to hit the regular expressions :-). A small change is all that is needed to your filter call tog et what you want:

[code]
oTable.fnFilter("^"+char, null, false);
[/code]

See http://datatables.net/api#fnFilter for the documentation on this function. Basically this is saying find rows which start with 'char'.

You can play with regular expressions and fnFilter with this demo: http://datatables.net/1.5-beta/examples/api/regex.html

Allan

sriram139

Hi Allan,
Small point to be noted here is that, it worked for me when I passed 'true' for the last parameter as below:
oTable.fnFilter("^"+char, null, true);

Please let me know if this is intended or is changed in recent releases. Hope I can go ahead with this approach.

Regards,
Sriram

allan

This is intended - with the DataTables 1.7 release, the handling of filtering has been cleaned up a lot. Part of the result of this clean up has been that the meaning of the third parameter passed to fnFilter has now changed - see the first point here: http://datatables.net/upgrade/1.7

Allan

Rajs

Hi

I am trying to filter on "empty" cells on a given column and am not able to get it right.
Basically, I have tables where some cells can be empty. I have a individual column level filter that displays all unique data in a drop down list (uses the $.fn.dataTableExt.oApi.fnGetColumnData plug in by Benedikt Forchhammer). It works perfectly fine for all non-empty cells. I have used regex to provide a strict match as well (when I filter for "25", I will only get 25 and not 255 or 525).

I have requriement to show rows with empty cells. But am not able to figure out how to do it. tried multiple options, regexes etc. but of no use. Any help would be appreciated.

Rajs

ravimacha

Hi Allen filtering with fnFilter for one column is not working in Internet Explorer. It works fine in firefox.

function doPegination(){
var myVisitorList=[{"bSortable": false,"bSearchable": true},{"bSearchable": false},{"bSortable": false,"bSearchable": false},{"bSortable": false,"bSearchable": false},null,null];
var frmScheduleVisitPage=[{"bSortable": false,"bSearchable": true},{"bSearchable": false},{"bSearchable": false,"bSortable": false},null,null];
var element = document.getElementById('isMyvisitorPageId');
var aocolumns;
if(element.value == 'true' ){
aocolumns = myVisitorList;
}else{
aocolumns = frmScheduleVisitPage;
}

oTable = $("#visitorTable").dataTable({
"fnInitComplete": function() {
},
"fnDrawCallback": function() {
$('#visitorTable tr.chosen_right_block').remove();
setOddEvenRowClasses();
if (( $('#visitorTable_paginate span span.paginate_button').size()) && ($('br.spacer').size())) {
$('#visitorTable_paginate')[0].style.display = "block";
} else {
if ( $('#visitorTable_paginate span span.paginate_button').size()) {
$('#visitorTable_paginate')[0].style.display = "block";
} else {
$('#visitorTable_paginate')[0].style.display = "none";
$('br.spacer').remove();}
}
},
"sPaginationType": "full_numbers",
//"aaSorting": [[0,'asc']],
"bLengthChange": false,
"iDisplayLength": 50,
"bFilter": true,
"bSort": false,
"bRetrieve": true,
"bProcessing": false,
//"asStripClasses": [ 'chosen_left_block', 'chosen_left_block'],
"bInfo": true,
//"bSortClasses": false,
//"bStateSave": true,
"bAutoWidth": false,
//"bDestroy": true,
"aoColumns": aocolumns
});
oTable.fnFilter("^"+this.id,null,false); // Not working in IE, works well in firefox (this.id is A)
// oTable.fnFilter('^((?A).)*$',null,true); // Not working


});


}