Search number range within column

JoeJoeJoe

I have the following code and I need to search/filter the rows of my table so that it displays only rows with data in the relevant column that is greater than 0:

var xTable = $('#WTM_LOG').DataTable();

    var checkbox = $("#checkB");
    checkbox.click(function () {

        if (checkbox.is(":checked")) {

            xTable.column(4).search(">0").draw();                                
        }    
    });

So in the search([INSERT HERE]) I want to add a range rather than a number. Is this possible? The only other option I see is using this: https://datatables.net/examples/plug-ins/range_filtering.html

Having spent hours trying to understand the code in the above link, I don't entirely get it, and wouldn't know how to adapt my code to it.
Specifically, I don't get this:

.val(), 10 );

at the end of this line:

var min = parseInt( $('#min').val(), 10 );

and this:

|| 0;

at the end of this line:

var age = parseFloat( data[3] ) || 0;

Well, i know it means 'or zero' but not sure why. Either way, I can't get my code to do what I want it to.

kthorngren

Its hard to say what is wrong since you haven't posted your code or better a test case.

var min = parseInt( $('#min').val(), 10 );

You can read about the parseInt Function here..Basically that line is getting the value of the text input and converting it to a base 10 integer.

var age = parseFloat( data[3] ) || 0;

This uses short-circuit evaluation which is explained here.

The range filtering example is what you want to use. But we need to see what you are doing in order to help.

Kevin

colin

These are standard JavaScript questions, so I would recommend brushing up on that first before going any further:

parseInt takes a number and a base - the number being the value in the input element ($('#min').val()), the base being 10.

parseFloat returns a NaN if the parse fails - so, NaN || 0 will give you 0, a numeric value for the numeric column.

Colin

JoeJoeJoe

thank you for the answers. I did provide code. The code I provided above works fine if I use any number inside the search() parenthesis. The question was, is there a simple way to search for a range of numbers as opposed to a single number? (if I use >0 as in the code above, it doesn't work of course) or do I have to do it the way described in the following link?:

https://datatables.net/examples/plug-ins/range_filtering.html

kthorngren

Sorry, I thought you were working with the range filtering example for your case. The search plugin is the easiest way I can think of. You can use an if statement at the start to see if you want to compare a range of numbers and simply return true if not. If you do then use code similar to the function to return true for only those rows that are in the range otherwise return false.

Kevin

JoeJoeJoe

Thank you, I've gotten this code to do what I want it to, but there's a problem:

var checkbox = $("#checkB");
    checkbox.click(function () {

        if (checkbox.is(":checked")) {

            var table = $('#WTM_LOG').DataTable();

            $.fn.dataTable.ext.search.push(
                function (settings, data, dataIndex) {                   
                    var Search = parseFloat(data[4]);                          
                    if ((Search > 0)) {
                        return true;
                    }
                    return false;
                }
            );           
            table.draw();          
        }
    })

Problem is that on the column in question, I have Icons instead of number values if the value of the cell is >0. So if I leave this enabled, the above code no longer works.

so I've tried this instead (doesn't work):

    //TOGGLE BUTTON SEARCH 
        var checkbox = $("#checkB");
        checkbox.click(function () {

        if (checkbox.is(":checked")) {

        var table = $('#WTM_LOG').DataTable();

         $.fn.dataTable.ext.search.push(
          function (settings, data, dataIndex) {                                             

          if (table.ErrorCount === "#fa-exclamation-triangle") {

          return true;
          }
                 return false;
          }
          );           
                table.draw();          
            }
        }) 

This is the Column in question with the data being replaced by a symbol named "fa-exclamation-triangle":

            {
             "data": "ErrorCount",
               "render": function (data, type, row) {
               var id = "errors" + row.TaskSchedulerLogUid;
               return (data == 0)
                     ? data = ''
                      : data = '<i id="'+id+'" class="fas fa-exclamation-triangle" style="color:red"></i>'
              }

colin

Hi @JoeJoeJoe ,

It would be worth creating a test case for this, it would be easier to understand and support you. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

First I would update your render function to use orthogonal data and only the symbol if the type is display. Doing this will leave your original data intact for searching and sorting. Plus you can remove the data = in lines 6 and 7 above.

Then your original search should work. The problem is that you are pushing it onto the search array each time the click function is executed. You only want to push it once. You should move it outside the click function and run it once before Datatables initialization. You will need to put an if statement in that checks whether to run the plugin or not.

Today must be search plugin day I create this example for another post today that will show what I mean. In this case the all variable controls whether the search plug in code runs or simply returns true for each row.
http://live.datatables.net/xodekavo/1/edit

Kevin

JoeJoeJoe

Thank you so much. Problem solved!