File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.datatables.net/scroller/1.4.1/css/scroller.dataTables.css" rel="stylesheet" type="text/css" />
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
​
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
    <script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.js"></script>
    <script src="https://cdn.datatables.net/scroller/1.4.1/js/dataTables.scroller.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
      <thead>
        <tr>
          <th>ID</th>
          <th>First name</th>
          <th>Last name</th>
          <th>ZIP / Post code</th>
          <th>Country</th>
        </tr>
      </thead>
      </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
 
    var searchResults = null;
    $(document).ready(function() {
        searchResults = $('#example').DataTable( {
            serverSide: true,
            ordering: false,
            searching: false,
            select: true,
            ajax: function ( data, callback, settings ) {
                var out = [];
​
                for ( var i=data.start, ien=data.start+data.length ; i<ien ; i++ ) {
                    out.push( [ i+'-1', i+'-2', i+'-3', i+'-4', i+'-5' ] );
                }
​
                setTimeout( function () {
                    callback( {
                        draw: data.draw,
                        data: out,
                        recordsTotal: 5000000,
                        recordsFiltered: 5000000
                    } );
                }, 50 );
            },
            scrollY: 300,
            scroller: {
                loadingIndicator: true,
                displayBuffer: 3
            }
        } );
​
      $('body').keyup(function(e){
​
        if (!e.altKey) { return; }
​
        var selectedRow = searchResults.row('.selected');
        var selectedIndex = selectedRow.index();
​
        if (selectedIndex === undefined)
        {
          selectedIndex = -1;
        }
​
        if (e.keyCode == 38 || e.keyCode == 40)
        {
          var newIndex = -1;
          if (e.keyCode == 38) { newIndex = selectedIndex - 1; }
          else                 { newIndex = selectedIndex + 1; }
          if (newIndex < 0) { newIndex = 0; }
          else if (newIndex >= searchResults.data().length)
          {
            newIndex = searchResults.data().length - 1;
          }
          if (newIndex != selectedIndex)
          {
            if (selectedIndex >= 0)
            {
              $(searchResults.row(selectedIndex).node()).removeClass('selected');
            }
            $(searchResults.row(newIndex).node()).addClass('selected');
            searchResults.row(newIndex).scrollTo(false);
          }
        }
      }); //end on key up
​
    } );
Output 300px

This bin was created anonymously and its free preview time has expired. Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers