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

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

francisprakashfrancisprakash Posts: 4Questions: 0Answers: 0

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.

Replies

  • kthorngrenkthorngren Posts: 13,773Questions: 25Answers: 3,242

    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

  • francisprakashfrancisprakash Posts: 4Questions: 0Answers: 0
    edited August 17

    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();
                });
    
  • allanallan Posts: 54,680Questions: 1Answers: 8,552 Site admin

    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

  • francisprakashfrancisprakash Posts: 4Questions: 0Answers: 0

    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.

  • francisprakashfrancisprakash Posts: 4Questions: 0Answers: 0
  • allanallan Posts: 54,680Questions: 1Answers: 8,552 Site admin

    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

Sign In or Register to comment.