The Name of the Fiddle
Some description, please keep it in one line
author(s):
John Doe
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/keytable/2.2.0/css/keyTable.bootstrap.min.css">
<script src="https://cdn.datatables.net/keytable/2.2.0/js/dataTables.keyTable.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/scroller/1.4.2/css/scroller.bootstrap.min.css">
<script src="https://cdn.datatables.net/scroller/1.4.2/js/dataTables.scroller.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.2.0/css/select.bootstrap.min.css">
<script src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>
<table id="datatables-example" class="table table-condensed">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th></th>
</tr>
</thead>
</table>
CSS
body {
padding-top: 2em;
}
JavaScript
var _table = $('#datatables-example').DataTable({
stripeClasses: [],
stateSave: true,
scrollY: '42vh',
scroller: true,
keys: true,
select: true,
ajax: '/gh/gist/response.json/5f76000f0f5bb7043c2903a7e7c65bdf/',
columns: [
{ data: 'title' },
{ data: 'price', render: $.fn.dataTable.render.number(' ', ',', 2, '$') },
{ data: 'quantity', render: $.fn.dataTable.render.number(' ', ',', 2) },
{ data: null, render: function (data, type, row, meta) {
return '<a href=#"'+data.id+'" class="btn btn-xs btn-default">Action</a>';
}}
],
columnDefs: [
{ className: 'text-center', targets: [3] },
{ className: 'text-right', targets: [1, 2] },
{ targets: 3, orderable: false }
]
});
_table.on('key-focus', function (e, datatable, cell) {
var selected = datatable.row({selected: true}).index();
if (cell.index().row !== selected) {
datatable.rows().deselect();
datatable.row( cell.index().row ).select();
}
});