DataTables

DataTables Examples

by Lisa C

HTML

<title>Example 1 - apply dataTable()</title>
      

        <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
        
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
  
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>

      
      
  </head>

    <body>
        <div class="container">
            
<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
    <thead>
        <tr>
            <th>FirstColumn</th>
            <th>SecondColumn</th>
            <th>ThirdColumn</th>
        </tr>
    </thead>
    <tbody>
        
        <tr>
            <td>111111111111111111111111111111111111111111</td>
            <td>2222222222222222222222222222222222222222222222222222222</td>
            <td>3333333333333333333333333333333</td>
        </tr>
    </tbody>
</table>
            
        </div>
    </body>

JavaScript

$(document).ready(function() {

    $('#example').dataTable( {
      "columnDefs": [ {
        "targets": [0,1],
        "data": "description",
        "render": function ( data, type, row, meta ) {
          return type === 'display' && data.length > 20 ?
            '<span title="'+data+'">'+data.substr( 0, 18 )+'...</span>' :
            data;
        }
      } ]
    });
});