File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
    <head>
        <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
  
        <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
      <link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
        <meta charset=utf-8 />
        <title>DataTables - JS Bin</title>
    </head>
    <body>
         <p>
          <label>Filter Salary: </label><input type="text" id="live_range_val_salary" readonly style="border:0; color:#f6931f; font-weight:bold;">
        </p>
        <div id="val_range_salary" style="width:200px"></div>
        <div class="container">
            <table id="example" class="display" width="100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>
​
                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </body>
</html>
CSSSaved
 
body {
    font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #fff;
}
​
​
div.container {
    min-width: 980px;
    margin: 0 auto;
}
​
​
JavaScriptSaved
 
// Simple server-side processing
$(document).ready(function() {
    $('#example').dataTable( {
        "processing": true,
        "serverSide": true,
        "ajax":{
          "url":"/ssp/server_processing.php",
          "data": function(d){
            d.sal_min = sal_range.slider("values", 0);
            d.sal_max = sal_range.slider("values", 1); 
          }
        } 
    } );
} );
var sal_range;
        $.fn.dataTable.ext.search.push(
          function(settings, data, dataIndex) {
            var min = parseFloat(sal_range.slider("values", 0));
            var max = parseFloat(sal_range.slider("values", 1));
            var col = parseFloat(data[5]) || 0; // data[number] = column number
            if ((isNaN(min) && isNaN(max)) ||
              (isNaN(min) && col <= max) ||
              (min <= col && isNaN(max)) ||
              (min <= col && col <= max)) {
              return true;
            }
            return false;
          }
        );
sal_range = $("#val_range_salary");
var val_range_salary = $("#live_range_val_salary");
     sal_range.slider({
          range: true,
          min: 40000,
          max: 9900000,
          step: 1000,
          values: [40000, 9900000],
          slide: function(event, ui) {
            val_range_salary.val(ui.values[0] + " - " + ui.values[1]);
          },
          stop: function(event, ui) {
           table.draw();
   
          }
        });
    val_range_salary.val(sal_range.slider("values", 0) + " - " + sal_range.slider("values", 1));
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers