How to search for a number within range in datatables delimited by "-" ?

francisprakash

I have a table with one of the column includes number and range of numbers. For example,

S.No Name percentage
1 Steve 60-70
2 Parker 70-80
3 Stark 80-90

$('#percentsearch').on('keyup', function() {
$('#example1')
.DataTable()
.column(7)
.search($('#percentsearch').val(), true, false)
.draw();
});

Search should give result when the input is between the range, for example 65, 79, 83

My search api is only works on numbers, not on ranges.

Can anyone help ?

Thanks.

kthorngren

You will need to create a search plugin. In the plugin you will need to parse the string, 60-70, for example, to get both numbers. Maybe use string split() like this: searchData.split('-'). Then you will have an array of two numbers. You can compare the input with the array to see if its within the range.

See this running example of a search plugin.

Kevin

francisprakash

That's Working! Thanks @kthorngren

Meantime, I'm unable to highlight the matched range.
I'm using mark.js, this works well with column search and full search.

How can I achieve this ?

Table looks like this,

No     Name      %expected
1      Steve     60-70; 20
2      Parker    30; 70-80
3      Stark     80-90; 60-70; 10 

var searchValue = '';
    $.fn.dataTable.ext.search.push(
    function( settings, searchData, index, rowData, counter ) {
      // If nothing in Range search then display the row
      if (searchValue === '') {
        return true;
      }
      // Get the min and max values of the row
      var test = searchData[2].split(';');
      for(var i in test) {
        var min = parseInt(test[i].split('-')[0], 10);
        var max = parseInt(test[i].split('-')[1], 10);

        if (isNaN( max )){
          var max = parseInt(test[i].split('-')[0], 10);
        }

        //console.log(searchValue, min, max);
        if (searchValue >= min && searchValue <= max) {
          // console.log(test[i]); //this shows the matched ranges
          return true;
        }
      }

      return false;
  }
);

var table = $('#example1').dataTable


$('#percentsearch').on('keyup', function(event) {
              searchValue = $(this).val();
                $('#example1')
                  .DataTable()
                  .column(4)
                  // .search($('#percentsearch').val(), true, false)
                  .draw();
            });

allan

The mark.js integration doesn't operate with a custom search. You'd need to trigger the highlighting manually (similar to what the integration does).

Allan

francisprakash

Thanks @allan

I'm not familiar with this concept and very much new to coding.

Could you please share any sample coding for highlighting search result for custom search ?

Thanks.

francisprakash

Please find the test case..

live.datatables.net/satirimu/1/edit?html,js,output

allan

If you need us to write some custom code for you, that would fall under our support plans.

What I would actually suggest is that you try using Mark.js without DataTables to get use to using it, and then use a draw callback to highlight the search term you are using. Looking at the code I linked to above will give you a good idea of how the current integration does it.

Allan