File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/jquery.mark.min.js" integrity="sha512-mhbv5DqBMgrWL+32MmsDOt/OAvqr/cHimk6B8y/bx/xS88MVkYGPiVv2ixKVrkywF2qHplNRUvFsAHUdxZ3Krg==" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/datatables.mark.js/2.0.0/datatables.mark.min.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <label>Search ports:</label>
      <input placeholder="Search.." type="text" id="myInputTextField">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Ports</th>
          </tr>
        </thead>
​
        <tfoot>
          <tr>
            <th>Name</th>
            <th>Ports</th>
          </tr>
        </tfoot>
​
        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>0-65535</td>
          </tr>
          <tr>
            <td>Garrett Winters</td>
            <td>80; 443</td>
          </tr>
          <tr>
            <td>Ashton Cox</td>
            <td>5000-6000; 1433</td>
          </tr>
          <tr>
            <td>Cedric Kelly</td>
            <td>49152-65535; 100-1024</td>
          </tr>
          <tr>
            <td>Jenna Elliott</td>
            <td>27510</td>
          </tr>
          <tr>
            <td>Brielle Williamson</td>
           <td>8000-8007</td>
          </tr>
          <tr>
            <td>Herrod Chandler</td>
          <td>20-22; 23</td>
          </tr>
          <tr>
            <td>Rhona Davidson</td>
            <td>Integration Specialist</td>
            <td>50000-50100</td>
          </tr>
          <tr>
            <td>Colleen Hurst</td>
            <td>39000-39300; 50000-50100; 5955</td>
          </tr>
          <tr>
            <td>Sonya Frost</td>
            <td>4244</td>
          </tr>
          <tr>
            <td>Jena Gaines</td>
            <td>7268; 1433</td>
          </tr>
          <tr>
            <td>Quinn Flynn</td>
            <td>Financial Controller</td>
            <td>80; 443; 8443</td>
          </tr>
          <tr>
            <td>Charde Marshall</td>
           <td>1433-1434; 443</td>
          </tr>
        </tbody>
      </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;
}
​
JavaScriptSaved
 
$(document).ready(function() {
​
    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[1].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)) {
                    max = parseInt(test[i].split('-')[0], 10);
                }
​
                //console.log(searchValue, min, max);
                if (searchValue >= min && searchValue <= max) {
                   //p;o;ppppppppppppppppppppppp  console.log(test[i]);
                    // console.log(rowData);
                    keyword = test[i];
                    return true;
                }
            }
​
            return false;
        }
​
    );
​
​
    // DataTable
    var table = $('#example').DataTable({
        mark: true,
        initComplete: function() {
​
            var api = this.api();
​
            $('#myInputTextField').on('keyup', function(event) {
                searchValue = $(this).val();
                $('#example')
                    .DataTable()
                    .column(1)
                   // .search($('#myInputTextField').val(), true, false)
                    .draw();
            });
​
        }
    });
​
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers