Replies

• kthorngren Posts: 20,255Questions: 26Answers: 4,761

  August 2021

  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 Posts: 4Questions: 0Answers: 0

  August 2021 edited August 2021

  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 Posts: 61,627Questions: 1Answers: 10,090 Site admin

  August 2021

  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 Posts: 4Questions: 0Answers: 0

  August 2021

  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 Posts: 4Questions: 0Answers: 0

  August 2021

  Please find the test case..

  live.datatables.net/satirimu/1/edit?html,js,output
• allan Posts: 61,627Questions: 1Answers: 10,090 Site admin

  August 2021

  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