DataTables

DataTables Examples

by Shrikrishna Gupta

HTML

<title>Example 1 - apply dataTable()</title>
      
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css"/>
 
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.0/js/dataTables.responsive.min.js"></script>
      
      
  </head>

    <body>
        <div class="container">
            
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
    <thead>
        <tr>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
        </tr>
        <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>
           ...

JavaScript

$(document).ready(function() {
            var $table = $('#example');
	$table.dataTable({"responsive": true,
            "aoColumnDefs": [
                {
                    "visible": false,
                    "aTargets": [0]
                }
            ]});

	// workaround for https://github.com/DataTables/Responsive/issues/71
	$table.on('responsive-resize.dt', function(e, datatable, columns) {
		for (var i in columns) {
			var index = parseInt(i, 10) + 1;
			$table.find('th:nth-child(' + index + ')').toggle(columns[i]);
		}
	});
});