alex

datatables

HTML

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.2.6/js/dataTables.rowReorder.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.2.6/css/rowReorder.dataTables.min.css">
<table class="table table-hover" id="launch_cpa_table">
    <thead class="bg-info">
        <th class="text-white">Step</th>
        <th class="text-white">Name</th>
        <th class="text-white">Gate</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Test 1</td>
            <td>Test 1</td>
        </tr>
         <tr>
            <td>2</td>
            <td>Test 2</td>
            <td>Test 2</td>
        </tr>
         <tr style = 'background : gray'>
            <td>3</td>
            <td>Test 3</td>
            <td>Test 3</td>
        </tr> 
         <tr>
            <td>4</td>
            <td>Test 4</td>
            <td>Test 4</td>
        </tr> 
         <tr>
            <td>5</td>
            <td>Test 5</td>
            <td>Test 5</td>
        </tr> 
        <tr style = 'background : gray'>
            <td>6</td>
            <td>Test 6</td>
            <td>Test 6</td>
        </tr> 
        
    </tbody>
</table>

JavaScript

$(document).ready(function () {
    var launch_table = $('#launch_cpa_table').DataTable( {
        rowReorder: true,
        columnDefs: [
            { orderable: true, className: 'reorder', targets: [0] },
            { orderable: false, targets: '_all' }
        ],
        paging: false
    } );
});