WordPress可排序的表行

Question

I'm customizing a plugin and there is an admin menu that contains a table showing results from WordPress Database.

I'm using (Jquery, Bootstrap, dataTables, font-awesome):

//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css
//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js
//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css
//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js
https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js

Here is the table:

<table id="myTable" class="table table-bordered table-striped offer_tabb">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <?php
            foreach ($results as $result) {
        ?>
                <tr id="<?php echo $result->id; ?>" data-order="<?php echo $result->order; ?>">
                    <td>
                        <?php echo $result->id; ?>
                    </td>
                    <td>
                        <?php echo $result->name; ?>
                    </td>
                    <td>
                        <?php echo $result->email; ?>
                    </td>
                    <td>
                        <a class="btn btn-primary btn-sm">
                            <i class="fa fa-edit"></i>Edit
                        </a>
                        <a onclick="ConfirmationBox(this, 'Delete this', 'warning');" class="btn btn-danger btn-sm">
                            <i class="fa fa-trash-o"></i> Delete
                        </a>
                    </td>
                </tr>
            <?php } ?>
    </tbody>
</table>

JS code:

<script type="text/javascript">

    //dataTables options.
    jQuery(document).ready(function () {               
        jQuery('#myTable').DataTable({
            "order": false,
            "lengthMenu": [[10, 100, -1], [10, 100, "All"]]
        });
    });

    //Make the table body sortable.
    jQuery("table tbody").sortable({
        update: function (event, ui) {
            UpdateOrder();
        }
    });

    //Function that would be fired on sorting.
    function UpdateOrder() {
        var currAjax = null;
        var templates = new Array();

        jQuery("table tbody tr").each(function () {
            var template = new Object();
            template.id = jQuery(this).attr("id");
            template.order = jQuery(this).index();
            templates.push(template);
        });

        var orderdata = {
            action: 'UpdateTaskOrderAjax',
            data: templates
        };

        jQuery.ajax({
            type: 'POST',
            beforeSend: function (jqXHR) {
                if (currAjax != null){
                    currAjax.abort();
                }
                currAjax = jqXHR;
            },
            url: ajaxurl,
            data: orderdata,
            dataType: 'text',
            success: function (response) {
                var n = new notify({'style': 'success', 'title': 'Changed', 'message': 'Congrats!.  FAQ order changed.'});
                n.show();
                setTimeout(function () {
                    n.hide();
                }, 3000); 
            }
        });
    }
</script>

The rows are sortable and I can change the position of each row, But I get that error wp-admin/admin-ajax.php 400 (Bad Request).

Each row contains the id and the order of each result from the DB, I want to update the order, When I drag and drop a row and these changes are saved, So that when I come to the same page or I show these results for the users, It's orders as I ordered them inside the table.

Something similar to the WordPress menus, You can drag the pages and order them as you want, Then save the changes.

How to apply that to the above table and DB?