Question

我正在自定义插件，并且有一个管理菜单，其中包含一个显示WordPress数据库结果的表。

我正在使用（jQuery，Bootstrap，dataTables，超棒的字体）：

//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

这是桌子：

<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代码：

<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>

行是可排序的，我可以更改每行的位置，但是会收到错误wp-admin/admin-ajax.php 400 (Bad Request)。

每行包含数据库中每个结果的id和order，我想更新顺序，当我拖放一行并保存这些更改时，这样当我出现在同一页面上，或者我为用户显示这些结果。这是我在表中订购的顺序。

类似于WordPress菜单，您可以拖动页面并根据需要对其进行排序，然后保存更改。

如何将其应用于上表和数据库？

WordPress可排序表格行

0 个答案: