One Search button for two categories

paintitblack

Hi,

I have different categories in my table and I want to implement one search button to show two categories (of 5).

Actually I use this code:

{
                text: 'Purchased',
                action: function ( e, dt, node, config ) {
                    var table = $('#sites').DataTable();
                    table.columns( 1 ).search( "Purchased" ).draw();
                }
            },{
                text: 'Sold',
                action: function ( e, dt, node, config ) {
                    var table = $('#sites').DataTable();
                    table.columns( 1 ).search( "Sold" ).draw();
                }
            }

And I tried to change it into this (which doesn't work also with enabled regex):

{
                text: 'Purchased or Sold',
                action: function ( e, dt, node, config ) {
                    var table = $('#sites').DataTable();
                    table.columns( 1 ).search( "Purchased|Sold" ).draw();
                }
            }

Have anybody an idea to merge the to buttons without changing the categories?

Thanks in advance

Patrick

allan

To enable regex you'd need to use the second and third parameters of column().search().

Aside from that, what you have above looks like it should work to me. Can you link to the page please?

Allan

edit typo in link

paintitblack

I uploaded my file here -> http://wechselstube.host4free.de/start5.php

Or is it possible to select two buttons (multi-select) at the same time?

kthorngren

Timely thread, I was just thinking about doing something like this too. Put something together based on your above code. Not sure its the best way but does seem to work.

http://live.datatables.net/ducahoko/1/edit

Thanks for the starter code!

EDIT: Basically each button adds or subtracts that option from the regex search. As it stands there won't be a blank search, ie, you can't turn off all four options.

Kevin

allan

Hi,

Thanks for putting up the code. As I mentioned above, you'd need to enabled regex using the second and third parameters of column().search().

Allan

paintitblack

Cool I love this solution and it works pretty well on my project. Thank you very much :-)

Does anybody now how to mark/highlight the selected buttons? May be this helps a bit while navigate

Cheers Patrick

allan

button().active().

Allan

paintitblack

This works pretty well too :-)

Please let me know if you have any improvements in the code below. Otherwise the topic can be closed.

Thank you very much for helping me out!

buttons: [
'pageLength',
{ extend: "create", editor: siteEditor },
{ extend: "edit", editor: siteEditor },
{ extend: "remove", editor: siteEditor },
{
text: 'All',
action: function ( e, dt, node, config ) {
var table = $('#sites').DataTable();
table.columns( 1 ).search( "" ).draw();
table.button( 5 ).active( false );
table.button( 6 ).active( false );
table.button( 7 ).active( false );
table.button( 8 ).active( false );
var regex = [];
}
},
{
text: 'Purchased',
action: function ( e, dt, node, config ) {
var table = $('#sites').DataTable();
if(jQuery.inArray( 'Purchased', regex )>=0) {
this.active( false );
} else {
this.active( true );
}
option = regex.indexOf('Purchased');
if (option == -1) {
regex.push('Purchased');
} else {
regex.splice(option, 1);
}
table.columns( 1 ).search( regex.join('|'), true, false ).draw();
}
},
{
text: 'Sold',
action: function ( e, dt, node, config ) {
var table = $('#sites').DataTable();
if(jQuery.inArray( 'Sold', regex )>=0) {
this.active( false );
} else {
this.active( true );
}
option = regex.indexOf('Sold');
if (option == -1) {
regex.push('Sold');
} else {
regex.splice(option, 1);
}
table.columns( 1 ).search( regex.join('|'), true, false ).draw();
}
},
{
text: 'Fonds',
action: function ( e, dt, node, config ) {
var table = $('#sites').DataTable();
if(jQuery.inArray( 'Fonds', regex )>=0) {
this.active( false );
} else {
this.active( true );
}
option = regex.indexOf('Fonds');
if (option == -1) {
regex.push('Fonds');
} else {
regex.splice(option, 1);
}
table.columns( 1 ).search( regex.join('|'), true, false ).draw();
}
},
{
text: 'Observed',
action: function ( e, dt, node, config ) {
var table = $('#sites').DataTable();
if(jQuery.inArray( 'Observed', regex )>=0) {
this.active( false );
} else {
this.active( true );
}
option = regex.indexOf('Observed');
if (option == -1) {
regex.push('Observed');
} else {
regex.splice(option, 1);
}
// alert( option + ": " + regex.join('|') );
table.columns( 1 ).search( regex.join('|'), true, false ).draw();
}
}

kthorngren

One thing I noticed with my code is the var regex = []; under the "All" button is incorrect. It should just be regex = []; with the var regex = []; initialization before the DataTable init.

With the var regex = []; under "All" the regex searching gets out of sync. For example click "Purchased", then "All", then "Sold". You will see both "Purchased" and "Sold". Remove the var and the same steps will result in showing only "Sold".

Kevin

paintitblack

okay, I removed the var in front of regex