jquery jtable - 如何在表的顶行显示新添加的记录

时间:2015-09-01 07:14:21

标签: jquery jquery-jtable

我使用的是JTable最新版本,JQuery 2.4.0版本。
我创建一个Jtable表,它工作正常 但我想在使用jquery jtable添加新记录时。 我想将该记录添加到表格顶部(最新添加的项目位于最顶端位置)
。当页面重新加载时,所有记录必须按照给定的排序顺序排列。<登记/>

我该如何解决?这是我的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>

1 个答案:

答案 0 :(得分:2)

目前,您正在对名称列使用默认排序  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在deliverygrid_id DESC变量中发送jtSorting字符串值。 您可以找到有关排序Here

的更多信息