I am a beginner when it comes to Web development. I am converting my C# winforms app into a web app.

I am trying to implement custom search on a table using jQuery Datatables Plugin. Considering the custom search example (https://datatables.net/examples/plug-ins/range_filtering.html). I would like to show details of all the employees except whose office is in "Edinburgh".

Filter rest of the employees via textbox.

So basically sql equivalent of

select * from employees where office not like '%Edinburgh%';

This would display all the employees and their details except those whose office is in Edinburgh. I would like to perform filter on these employees.

EDIT:

I have compiled a Fiddle (https://jsfiddle.net/53futc2w/5/) using jQuery Datatables and populated with data.

On clicking the Non SC button I would like to display only the values which do not have "SC" in their description.

So basically sql equivalent of

select * from products where description not like '%SC%';

These values to be filtered based on the input provided into the textbox

Regards

share|improve this question
up vote 0 down vote accepted

I'm not sure if 'Edinburgh' should be hard-coded, or if you'd like users to be able to specify a value of their own, so here is the hard-coded solution, with comments for user-provided value option:

$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
    var exclude = 'Edinburgh'; // User provided value: $("#user-exclude-field").val();

    if(!exclude) return true; // nothing to exclude, so all rows should be included

    var re = new Regexp("\\b" + exclude + "\\b", "i"); // using the \b word boundary meta-character to match only "Edinburgh" and not "NewEdinburgh" (typo on purpose)
    return !re.test(data.office); // return TRUE (i.e. include this row in the search results) if the "office" attribute of the current row data does NOT match our excluded word
});

UPDATE

So based on your comment, here's a sample fiddle:

https://jsfiddle.net/bjLzkjnc/

UPDATE 2

So you want to instead be able to filter for all items that contain a word, or filter for all rows that do not contain that word. Update fiddle: jsfiddle.net/1xh3kys5

The magic here is the filter variable. Before it was just a boolean variable because we wanted to track two states: "contains SC" vs "show me everything". But now you actually have three states: "contains SC", "show me everything" and "show me everything that does not contain SC"... So a boolean is no longer enough.

There are a few ways to approach this, but I went with a filters object, so that you could eventually add more filters easily:

var filters = {
    sc: {active: false, re: new RegExp("\\bSC\\b", "i"), include: true}
};

The filters object here has only one attribute, one filter, called "sc". That attribute is itself an object, that has a few attributes that will let us represent all of our three states:

  • active is to turn this particular "sc" filter on/off. So when you want to show all rows, you simply set this to false, and deactivate the sc filter.
  • include is our boolean to control whether we want to include or exclude rows that contains the word "SC".
  • re is simply the regular expression we will use when we want to filter the rows.

When we filter rows now, we simply use the regular expression to determine if a particular row contains "SC".

var includes_sc = filters.sc.re.test(data[2]);
return (filters.sc.include ? includes_sc : !includes_sc);

So, based on the "include" attribute's value, and store it in a variable called includes_sc. If the current filter wants all rows that include "SC", we return includes_sc as is. If, on the other hand, we want all rows that do not include "SC", we return the inverse (!includes_sc) of includes_sc.

Hope this helps!

share|improve this answer
    
Got it - see my updated response with your fiddle - modified... – MacPrawn Jan 18 at 20:38
    
Thanks a million. That did the trick. I am trying to toggle the same by using Radio Buttons instead of a normal button. jsfiddle.net/bjLzkjnc/1 Please find the updated fiddle – Tango Jan 18 at 21:13
    
Right, so you simply have to set the global exclude_sc variable to the value of your choice, and then redraw your table. So in the case of radio buttons, just make sure when they are clicked they set exclude_sc and then redraw. – MacPrawn Jan 18 at 21:15
    
After setting the global exclude_sc I am able to toggle the radio buttons to obtain the output. I am trying to display only the values which have SC in them. Unfortunately I am not able to do that. jsfiddle.net/perfectnoob/bjLzkjnc/2 I have included the updated fiddle. – Tango Jan 18 at 22:43
    
Aha! So you changed the logic a bit - not it's not just a toggle of with SC vs everything, but with SC vs without SC... Here's an updated fiddle: jsfiddle.net/1xh3kys5 – MacPrawn Jan 18 at 22:59

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.