DataTables

DataTables Examples

by MaRlik

HTML

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.0/js/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.0/css/fixedColumns.dataTables.min.css">
<title>
  Scrolling and fixed</title>




<body>
  <div style="background:white">
    
    <button id="btn">Fix It</button>
    
    <table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
      <thead>
        <tr>
          <th>fixed column</th>
          <th>Browser</th>
          <th>Platform(s)</th>
          <th>Engine version</th>
          <th>CSS grade</th>
          <th>Browser</th>
          <th>Platform(s)</th>
          <th>Engine version</th>
          <th>CSS grade</th>
          <th>Browser</th>
          <th>Platform(s)</th>
          <th>Engine version</th>
          <th>CSS grade</th>
          <th>Browser</th>
          <th>Platform(s)</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>we got some text to show here with spaces and more</td>
          <td>Internet Explorer 4.0</td>
          <td>Win 95+</td>
          <td> 4</td>
          <td>X</td>
          <td>Trident</td>
          <td>Internet Explorer 4.0</td>
          <td>Win 95+</td>
          <td> 4</td>
          <td>X</td>
          <td>Trident</td>
          <td>Internet Explorer 4.0</td>
          <td>Win 95+</td>
          <td>4</td>
          <td>X</td>
        </tr>
        <tr>
          <td>we got some text to show here</td>
          <td>Internet Explorer 4.0</td>
          <td>Win 95+</td>
          <td> 4</td>
          <td>X</td>
          <td>Trident</td>
          <td>Internet Explorer 4.0</td>
          <td>Win 95+</td>
          <td> 4</td>
          <td>X</td>
  ...

JavaScript

$(function() {
		  $('#example').DataTable({
		    "fnRowCallback": function(nRow, aData, iDisplayIndex) {
		      $('td', nRow).each(function(iPosition) {
		        var sCellContent = $(this).html();
		        sCellContent = '<span style="white-space:nowrap;">' + sCellContent + '</span>';
		        $(this).html(sCellContent);
		      });
		      return nRow;
		    },
		    scrollX: true,
		    paging: true,
		    fixedColumns: {
		      leftColumns: 1
		    }
		  });
		});
    

 $('button').click(function() {
			var breite = $( "#example td" ).width();
			breite = breite + 21;
			$( ".DTFC_LeftWrapper" ).css("width",breite + "px");
 });