DataTables

DataTables Examples

HTML

<title>Example 1 - apply dataTable()</title>
      
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowreorder/1.2.3/css/rowReorder.dataTables.min.css">
      <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.0/css/responsive.dataTables.min.css">


        <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/rowreorder/1.2.3/js/dataTables.rowReorder.min.js"></script>
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/responsive/2.2.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></th>
            <th>Order</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
            <th>Other</th>
            <th>Other</th>
            <th>Other</th>
            <th>Other</th>
            <th>Other</th>
            <th>Other</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>1</td>
            <td>Win 95+</td>
            <td> 4</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
            <td>X</td>
        </tr>
        <tr>
            <td></td>
            <td>2</td>
            <td>Win 95+</td>
            <td>5</td>
            <td>C</td>
            <td>X</td>
            <td>X</td>
           ...

JavaScript

$(document).ready(function() {
    $('#example').dataTable({
    responsive: {
            details: {
                type: 'column',
                target: 0
            }
        },
		rowReorder: {
            selector: 'td:nth-child(2)',
            dataSrc: 1
        },
		paging: false,
		info: false,
        scrollCollapse: false,
		scrollY: false,
		columnDefs: [
			{ orderable: false, className: 'control', targets: 0 },
            { orderable: false, className: 'reorder', targets: 1 },
            { orderable: false, targets: '_all' }
        ]
    });
});