Search and Filter start with

lenamtl

Hi,

I'd like to give the ability to the user to search to start with only or contains
Using buttons so they can switch.
For the Datatables search we can do this
$('input[type = search]').on( 'keyup', function () {
table.search( '^' + this.value, true, false).draw();
} );
but I'm wondering if there is a setting for this in Datatables that can be kept in localstorage with other Datatables settings?

Same thing with Filters

colin

Hi @lenamtl ,

Have you look at stateSave, I think this will do what you're after,

Cheers,

Colin

lenamtl

Sorry my question was not clear

I'm looking for a way to give the user the ability to select a search method
let say by startwith **or **contains on the main Datatables search
by a click of a button / or radio selection or other way (suggestion is welcome)

I saw there is a smart or regex settings that we can set
also something like this
.search( "^"+this.value, true, true, true )

What will be the best way to handle this case without conflict and give the ability to the user to choose a method?

colin

HI @lenamtl ,

Ah, I see. Yep, this example here shows the regular expressions in action. You have a search box perhaps, then radio buttons beside it to select one of 'starts with', 'contains' or 'ends with'. Then apply the regular expression accordingly when you issue the search. I'd say that's a reason way for the user.

Cheers,

Colin

lenamtl

Thanks for the example, is this me or this does nothing just smart search even if I select regex...

The example does not help much..

I wish to see a working example on how to apply/enable smart or regex for startwith ...
This is confusing as smart and regex are not compatible so i

Radio button make more sense as I don't think that selecting smart + regex will work..

kthorngren

Maybe what you are missing with the example is that the search functions aren't adding any regex operators. If you want to test regex search operators you need to type them in the text input. Try these steps:

• Turn on Regex and turn off Smart search for the Name Column
• In the Name Column search input type ai
• You should see 4 results
• Now place a caret ^ in front of the string to look like this: ^ai
• Now you will see the one result that begins with ai

Does this help?

Kevin

lenamtl

Hi,

Thanks for the info but I don't understand the code

From the example
what I see is the value of the search and selected checkbox value is send and table is draw
but I don't understand what in the provided code enable or disable smart and regex
and also where to put a specific regex as I don't want user to type ^

kthorngren

I don't understand what in the provided code enable or disable smart and regex

Lets take the column search for an example:

function filterColumn ( i ) {
    $('#example').DataTable().column( i ).search(
        $('#col'+i+'_filter').val(),
        $('#col'+i+'_regex').prop('checked'),
        $('#col'+i+'_smart').prop('checked')
    ).draw();
}

The search api takes these parameters:
search( input [, regex[ , smart[ , caseInsen ]]] )

Where regex, smart, caseInsen are boolean values. In the example above it is using the state of the checkbox to get the boolean values; checked it true and unchecked is false. It also gets the value of the input. So for the first search step I have above the search looks like this:

search("ai", true, false)

Does that help your understanding?

where to put a specific regex as I don't want user to type ^

For the example page you need to type the ^. But in your code you can prefix the search string with the ^ if the user selects startswith. Your filter function would need to check for this, something like this:

function filterColumn ( i ) {
    var regex = '';
    if (startswith) {
        regex = '^';
    }
    $('#example').DataTable().column( i ).search(
        regex + $('#col'+i+'_filter').val(),
        $('#col'+i+'_regex').prop('checked'),
        $('#col'+i+'_smart').prop('checked')
    ).draw();
}

This will either prefix a blank string ('') or ^ to the regex search.

Kevin

lenamtl

This is more clear now
Thanks a lot for your time, I really appreciate