DataTables - Horizontal Scroll (9)

DataTables Examples

by Amit Vishwakarma

HTML

<title>Example 1 - apply dataTable()</title>
      
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
      

        <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
      
      

      
  </head>

    <body>
        <div class="container">
            
<table cellpadding="0" cellspacing="0" border="0" class="dataTable nowrap" id="example">
    <thead>
        <tr>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 4.0</td>
            <td>Win 95+</td>
            <td> 4</td>
            <td>X</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 5.0</td>
            <td>Win 95+</td>
            <td>5</td>
            <td>C</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 5.5</td>
            <td>Win 95+</td>
            <td>5.5</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 6</td>
            <td>Win 98+</td>
            <td>6</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet Explorer 7</td>
            <td>Win XP SP2+</td>
            <td>7</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>AOL browser (AOL desktop)</td>
            <td>Win XP</td>
            <td>6</td>
            <td>A</td>
        </tr>
        <tr>
            <td>Gecko</td>
        ...

JavaScript

/*var options = {
    "sScrollX": "110%",
    "bScrollCollapse": true,
     "scrollY":        "200px",
   
   
};

$(document).ready(function() {
    $('#example').dataTable(options);
}); */

$(document).ready(function() {
  // Setup - add a text input to each header cell
  $('#example thead th').each(function() {
    var title = $(this).text();
    $(this).html('<input type="text"   placeholder="Search ' + title + '" />');
  });

  // DataTable
  var table = $('#example').DataTable({
  "sScrollX": "110%",
    "bScrollCollapse": true,
     "scrollY":        "200px",
  
  });

  // Apply the search
  table.columns().every(function() {
    var that = this;

    $('input', this.header()).on('keypress change', function(e) {
      var keycode = e.which;
      //launch search action only when enter is pressed
      if (keycode == '13') {
        console.log('enter key pressed !')
        if (that.search() !== this.value) {
          that
            .search(this.value)
            .draw();
        }
      }

    });
  });
});