jquery jtable - 如何在 table 的第一行显示新添加的记录

Question

我使用的是 JTable 最新版本，JQuery 2.4.0 版本。
我创建了一个 Jtable table，它工作正常
但我想在使用 jquery jtable 添加新记录时。 我想将该记录添加到 table 的顶部（最新添加的项目到达最顶部的位置）
。当页面重新加载时，所有记录必须按给定的排序顺序排列。

我该如何解决？这是我的 html 文件：

<html lang="en">
    <head>
    <script src="jquery/jquery-2.1.0.js"></script>
    <script src="jquery-ui/ui/minified/jquery-ui.min.js"></script>
    <script src="jtable/jquery.jtable.min.js"></script>
    <link rel="stylesheet" href="jtable/themes/metro/blue/jtable.min.css">
    <script type="text/javascript">
        $(document).ready(function()
        {

            $('#GridTableContainer').jtable(
            {
                title: 'Delivery Grid Table',
                paging: true, //Enable paging
                pageSize: 10, //Set page size (default: 10)
                sorting: true, //Enable sorting
                defaultSorting: 'Name ASC', //Set default sorting
                actions:
                {
                    listAction: function (postData, jtParams)
                    {
                        console.log("Loading from custom function...");
                        return $.Deferred(function ($dfd)
                        {
                            $.ajax({
                                url: 'ajax/grid-ajax.php?action=list&jtStartIndex=' + jtParams.jtStartIndex + '&jtPageSize=' + jtParams.jtPageSize + '&jtSorting=' + jtParams.jtSorting,
                                type: 'POST',
                                dataType: 'json',
                                data: postData,
                                success: function (data)
                                {
                                    $dfd.resolve(data);
                                },
                                error: function ()
                                {
                                    $dfd.reject();
                                }
                            });
                        });
                    },
                    createAction: 'ajax/grid-ajax.php?action=create',
                    updateAction: 'ajax/grid-ajax.php?action=update',
                    deleteAction: 'ajax/grid-ajax.php?action=delete'
                },
                fields: {
                    deliverygrid_id: {
                        key: true,
                        list: false,
                        title: 'id',
                    },
                    area: {
                        title: 'Express',
                        width: '40%'
                    },
                    price: {
                        title: 'Fee ($)',
                        width: '20%'
                    }
                }

            });






        });
        $('#GridTableContainer').jtable('load');
    </script>
  </head>
  <body>
    <div id="GridTableContainer"></div>
  </body>
</html>

Answer 1

目前您正在为名称列使用默认排序
defaultSorting: 'Name ASC'
将其更改为关键列
defaultSorting: 'deliverygrid_id DESC'
并在 list 操作中的服务器端使用以下代码

if (jtSorting.Equals("deliverygrid_id DESC"))
{
    //here get data order by desc record for deliverygrid_id 
}

当你写 defaultSorting: 'deliverygrid_id DESC' 时，这意味着 jtable 在 jtSorting 变量中发送 deliverygrid_id DESC 字符串值。您可以找到有关排序的更多信息 Here

jquery jtable - 如何在 table 的第一行显示新添加的记录

jquery jtable - How to show newly added record in top row of table

jquery

jquery-jtable