DataTables

DataTables Examples

by Ford Heacock

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.2/css/fixedColumns.dataTables.min.css">
<div class="container">
  <h3>Tooltip Example</h3>
  <a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>

<table id="example" class="stripe row-border order-column" cellspacing="0" width="100%">
        <thead>
        <tr>
            <th class="matrisHeader">&nbsp;</th>
            <th data-original-title="This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:" data-toggle="tooltip" data-placement="bottom" class="matrisHeader" data-container="body" title="">First Name</th>
            <th data-original-title="222" data-container="body" data-toggle="tooltip" data-placement="bottom" class="matrisHeader" title="">Last Name</th>
            <th data-original-title="333" data-container="body" data-toggle="tooltip" data-placement="bottom" class="matrisHeader" title="">Age</th>
            <th data-original-title="444" data-container="body" data-toggle="tooltip" data-placement="bottom" class="matrisHeader" title="">Title</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th data-original-title="555" data-container="body" data-toggle="tooltip" data-placement="bottom" style="text-align: center;" title="">ÖÇ1</th>
            <td data-original-title="666" data-container="body" data-toggle="tooltip" data-placement="bottom"...

JavaScript

$(document).ready(function(){
    $('[data-toggle="tooltip"]').tooltip();  
    
    $('#example').DataTable( {
        scrollY:        300,
        scrollX:        true,
        scrollCollapse: true,
        paging:         false,
        fixedColumns:   true
    } );
    
    
});