DataTables.js - show/hide column when input's value is between 2 columns

user_12155694 0
Viewed 177

I would like to create external (next to DataTable table) input where user can enter zipCode. When zipCode is between value of two columns (zip code from and zip code to) then show, otherwise hide the row.

my input and table are simple

<input id="zipCode_" class="input100 hidden-password" type="search" name="zipCode_">

<table id="table_zipCodes">
<thead>
<tr>
    <th>Zone name</th>
    <th>zip code from</th>
    <th>zip code to</th>
    <th>description</th>
</tr>
</thead>

<tbody>
    <tr>
        <td>first</td>
        <td>10-100</td>
        <td>20-100</td>
        <td>test</td>
    </tr>
    <tr>
        <td>second</td>
        <td>30-200</td>
        <td>30-300</td>
        <td>test2</td>
    </tr>
    [...]
</tbody>

and my script:

var table = $('#table_zipCodes').DataTable({
             orderCellsTop: true,
             fixedHeader  : true,
            'paging'     : false
})

$('#zipCode_').on('keyup', function(event) {
            var new_zipCode = $(this).val();

            if (zipCode_value.length === 6) {
                
                table.rows().every(function() {      // <-- *i tried* table.rows(function(){
                    var this_row = this.data();
                    var col_from = this_row[1];
                    var col_to   = this_row[2];
                    console.log(this_row);     // <-- result below
                    console.log(this.child);   // <-- result below

                    if (new_zipCode >= col_from && new_zipCode <= col_to) {
                        table.row(this).child().show();    // i<-- no reaction like below with hide()
                    }
                    else {
                        // I TRIED
                        //table.row(this).child().hide();  <- no reaction
                        //this.child.hide().draw();   <- no reaction
                        // this.hide()  <- error "this.hide is not a function"
                    }
                });

                table.draw();
            }
        });

result from: console.log (this_row); as expected: one single row:

(4) ["first", "10-100", "20-100", "test"]
    0: "first"
    1: "10-100"
    2: "20-100"
    3: "test"
    length: 4
    __proto__: Array(0)

result from: console.log(this.child):

ƒ (){var d=b.apply(a,arguments);x.extend(d,
d,c.methodExt);return d}

The problem is, when i want to hide/show specific row it doesn't do anything. I read about external search with dataTable or search range but i want 'range' from one input and search two columns like so: if (new_zipCode >= col_from && new_zipCode <= col_to). After two days I just give up... I can't solve it :(

datatables jquery javascript
1 Answers

Thanks for the help mr @user12031119

Maybe somebody will need it so i'll write the answer:

my script looks like:

var table = $('#table_zipCodes').DataTable({
         orderCellsTop: true,
         fixedHeader  : true,
        'paging'     : false
})

$('#zipCode_').on('keyup change paste', function() {
    table.draw();
}

$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
    var col_from      = data[1];   // data from second column (`zipCode from`)
    var col_to        = data[2];   // data from third column (`zipCode to`)
    var zipCode_value = $('#zipCode_').val();    // data from input

    var new_zipCode = zipCode_value;    

    if (zipCode_value.length > 2) {
        if (new_zipCode.length < 6) {      
            // if length of input is not complete add regex wich will find everything to the end (it's like `like` in sql ( ... WHERE a LIKE 'string%'
            var matcher = new RegExp(new_zipCode + '*');
            if(matcher.test(col_from))
                return true;
            else
                return false;
        }
        else {
            // show only exact matching row
            if (new_zipCode >= col_from && new_zipCode <= col_to) {
                return true;
            }
            else
                return false;   // remove not maching row
        }
    }
    else
        return true;   // show everything

}
);

i tried to comment the code as much as i could. I hope I helped someone :)

user_121556940
Related