Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82820

Custom Range Search - Server Side

$
0
0

Hi,
I create a server side table.
I add search on every column.

this is how I add the search

            var table =   $('#canzoni_player').DataTable( {
        "processing": true,
        "serverSide": true,
                "autoWidth": false,


        "ajax": "scripts/tabella_playlist.php",
            "lengthMenu": [[18, 50,100, 250, 500, -1], [18, 50,100, 250, 500, "Tutti"]],
        "language": {
            "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Italian.json"
        },




        initComplete: function() {
        var api = this.api();




      // Apply the search
      api.columns([0, 1, 3, 4]).every(function() {
        var that = this;



        $('input', this.footer()).on('keyup change', function() {
          if (that.search() !== this.value) {
            that
              .search(this.value)
              .draw();
          }
        });
      });
    }

So I want to add a range filter only in one column
- I add the text input

<tbody><tr>
            <td>Minimo BPM</td>
            <td><input type="text" id="min" name="min"></td>
        </tr>
        <tr>
            <td>Massimo BPM</td>
            <td><input type="text" id="max" name="max"></td>
        </tr>
    </tbody>

I add the extended search for the column 3

$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var min = parseInt( $('#min').val(), 10 );
        var max = parseInt( $('#max').val(), 10 );
        var age = parseFloat( data[3] ) || 0; // use data for the age column

        if ( ( isNaN( min ) && isNaN( max ) ) ||
             ( isNaN( min ) && age <= max ) ||
             ( min <= age   && isNaN( max ) ) ||
             ( min <= age   && age <= max ) )
        {
            return true;
        }
        return false;
    }
);

So I have to add the code to initialize the search

    $('#min, #max').keyup( function() {
        table.columns( [3] )
        table.search(this.value);
        table.draw();
        } );

I add this after

        initComplete: function() {
        var api = this.api();

but it doesn't work. It search on the column 1,2 and not a range


Viewing all articles
Browse latest Browse all 82820

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>