<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Starter Template</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon -->
<link rel="icon" href="">
<!-- Bootstrap 4 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- DataTable -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/2.0.1/css/buttons.dataTables.min.css">
<style>
.content {
margin-top: 50px;
}
</style>
</head>
<body>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Navbar Left -->
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<!-- Navbar Right -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
<div class="content">
<div class="container">
<table id="table_id" class="display compact stripe" style="width:100%">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
<th>Column 6</th>
<th>Column 7</th>
<th>Column 8</th>
<th>Column 9</th>
<th>Column 10</th>
<th>Column 11</th>
<th>Column 12</th>
<th>Column 13</th>
<th>Column 14</th>
<th>Column 15</th>
<th>Column 16</th>
<th>Column 17</th>
<th>Column 18</th>
<th>Column 19</th>
<th>Column 20</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>Row 1 Data 3</td>
<td>Row 1 Data 4</td>
<td>Row 1 Data 5</td>
<td>Row 1 Data 6</td>
<td>Row 1 Data 7</td>
<td>Row 1 Data 8</td>
<td>Row 1 Data 9</td>
<td>Row 1 Data 10</td>
<td>Row 1 Data 11</td>
<td>Row 1 Data 12</td>
<td>Row 1 Data 13</td>
<td>Row 1 Data 14</td>
<td>Row 1 Data 15</td>
<td>Row 1 Data 16</td>
<td>Row 1 Data 17</td>
<td>Row 1 Data 18</td>
<td>Row 1 Data 19</td>
<td>Row 1 Data 20</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>Row 2 Data 3</td>
<td>Row 2 Data 4</td>
<td>Row 2 Data 5</td>
<td>Row 2 Data 6</td>
<td>Row 2 Data 7</td>
<td>Row 2 Data 8</td>
<td>Row 2 Data 9</td>
<td>Row 2 Data 10</td>
<td>Row 2 Data 11</td>
<td>Row 2 Data 12</td>
<td>Row 2 Data 13</td>
<td>Row 2 Data 14</td>
<td>Row 2 Data 15</td>
<td>Row 2 Data 16</td>
<td>Row 2 Data 17</td>
<td>Row 2 Data 18</td>
<td>Row 2 Data 19</td>
<td>Row 2 Data 20</td>
</tr>
<tr>
<td>Row 3 Data 1</td>
<td>Row 3 Data 2</td>
<td>Row 3 Data 3</td>
<td>Row 3 Data 4</td>
<td>Row 3 Data 5</td>
<td>Row 3 Data 6</td>
<td>Row 3 Data 7</td>
<td>Row 3 Data 8</td>
<td>Row 3 Data 9</td>
<td>Row 3 Data 10</td>
<td>Row 3 Data 1</td>
<td>Row 3 Data 2</td>
<td>Row 3 Data 3</td>
<td>Row 3 Data 4</td>
<td>Row 3 Data 5</td>
<td>Row 3 Data 6</td>
<td>Row 3 Data 7</td>
<td>Row 3 Data 8</td>
<td>Row 3 Data 9</td>
<td>Row 3 Data 10</td>
</tr>
<tr>
<td>Row 4 Data 1</td>
<td>Row 4 Data 2</td>
<td>Row 4 Data 3</td>
<td>Row 4 Data 4</td>
<td>Row 4 Data 5</td>
<td>Row 4 Data 6</td>
<td>Row 4 Data 7</td>
<td>Row 4 Data 8</td>
<td>Row 4 Data 9</td>
<td>Row 4 Data 10</td>
<td>Row 4 Data 1</td>
<td>Row 4 Data 2</td>
<td>Row 4 Data 3</td>
<td>Row 4 Data 4</td>
<td>Row 4 Data 5</td>
<td>Row 4 Data 6</td>
<td>Row 4 Data 7</td>
<td>Row 4 Data 8</td>
<td>Row 4 Data 9</td>
<td>Row 4 Data 10</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<!-- Tether -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<!-- Bootstrap 4 -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- DataTable -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/fixedheader/3.2.0/js/dataTables.fixedHeader.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.colVis.min.js"></script>
<script>
$(document).ready(function () {
// Setup - add a text input to each footer cell
$('#table_id thead tr')
.clone(true)
.addClass('filters')
.appendTo('#table_id thead');
var table = $('#table_id').DataTable({
dom: 'Bfrtip',
buttons: [
'colvis'
],
orderCellsTop: true,
pageLength: 50,
scrollX: true,
responsive: false,
stateSave: true,
fixedHeader: true,
initComplete: function () {
var api = this.api();
// For each column
api
.columns()
.eq(0)
.each(function (colIdx) {
// Set the header cell to contain the input element
var cell = $('.filters th').eq(
$(api.column(colIdx).header()).index()
);
var title = $(cell).text();
$(cell).html('<input type="text" placeholder="' + title + '" />');
// On every keypress in this input
$(
'input',
$('.filters th').eq($(api.column(colIdx).header()).index())
)
.off('keyup change')
.on('keyup change', function (e) {
e.stopPropagation();
// Get the search value
$(this).attr('title', $(this).val());
var regexr = '({search})'; //$(this).parents('th').find('select').val();
var cursorPosition = this.selectionStart;
// Search the column for that value
api
.column(colIdx)
.search(
this.value != ''
? regexr.replace('{search}', '(((' + this.value + ')))')
: '',
this.value != '',
this.value == ''
)
.draw();
$(this)
.focus()[0]
.setSelectionRange(cursorPosition, cursorPosition);
});
});
},
});
});
</script>
</body>
</html>