jQuery DataTables 长度更新问题答案

【问题标题】：jQuery DataTables length update problemjQuery DataTables 长度更新问题
【发布时间】：2011-08-05 10:49:18
【问题描述】：

我定义了一个动态数据表。

ListLone_datatable = jQuery('#my_table').dataTable(
    {
        'bFilter': false,
        'bPaginate': true,
        'iDisplayLength': 5,
        'bLengthChange': false,
        'bSort': true,
        'bInfo': true,
        'bAutoWidth': false,
        'sPaginationType': 'full_numbers',
        'oLanguage': 
        {
            'oPaginate': 
            {
                'sPrevious': '&laquo;',
                'sNext': '&raquo;'
            }
        },
        'bProcessing': true,
        'bServerSide': true,
        'sDom': '<"dataTables_top"pi>lftpir',
        'bDestroy': true,
        'sAjaxSource': ListLone_datasource_url + ListLone_filter,
        'aoColumns': 
            [
                {
                    'fnRender': 
                        function(row_data) 
                        { return _icon_html(row_data.aData[8], 'property_new.gif') },
                    'bSortable': false
                },
                {
                    'fnRender': 
                        function(row_data) 
                        { return _icon_html(row_data.aData[9], 'property_featured.png') }, 
                    'bSortable': false
                },
                {
                    'fnRender': 
                        function(row_data) 
                        { 
                        console.log('rowdata', row_data);
                            var control_div =
                                '<div class="row-actions">';

                            control_div += 
                                '<span><a href="' + row_data.aData[7] + 
                                '" target="_blank">View</a> | </span>';
                            control_div += 
                                '<span><a href="admin.php?page=_properties&id=' + 
                                row_data.aData[10] + '">Edit</a> | </span>';
                            control_div += 
                                '<span><a href="admin.php?page=_properties&id=' + 
                                row_data.aData[10] +'" class="pl_listing_delete">Delete</a> | </span>';

                            if (typeof(Admin_properties_item_menu) != 'undefined')
                            {
                                var addon_data = Admin_properties_item_menu(row_data.aData);
                                control_div += addon_data;
                            }

                            control_div += 
                                '<span>' +
                                _flag_html(row_data.aData[10], row_data.aData[8], 
                                    'is_new', 'New', 0, 'property_new.gif') +
                                ' | </span>';
                            control_div += 
                                '<span>' +
                                _flag_html(row_data.aData[10], row_data.aData[9], 
                                    'is_featured', 'Featured', 1, 
                                    'property_featured.png') +
                                '</span>';

                            control_div += '</div>';

                            excerpt_div = '';
                            if (!ListLone_is_mode_list)
                                excerpt_div = '<div>' + row_data.aData[11] + '</div>';

                            return row_data.aData[2] + excerpt_div + control_div;
                        }
                },
                {'fnRender': function(row_data) { return row_data.aData[3] }},
                {'fnRender': function(row_data) { return row_data.aData[4] }},
                {'fnRender': function(row_data) { return row_data.aData[5] }},
                {'fnRender': function(row_data) { return row_data.aData[6] }},
                {'fnRender': function(row_data) { return _featured_small_image(row_data.aData[12]) }},
                {'bVisible': false},
                {'bVisible': false},
                {'bVisible': false},
                {'bVisible': false},
                {'bVisible': false}
            ]
    });

问题是从数据源中删除项目时分页信息没有更新。

我做过测试：

console.log(ListLone_datatable.fnGetData());

一切似乎都井井有条。更新的项目列表是正确的。正确的项目显示在表格中，而不是分页信息。例如，如果 a 有 6 个项目，每页显示 5 个，则在我删除一个项目后，表格显示两页，第二页为空，并且文本显示为“显示 1 到 5 个条目，共 6 个条目”。（当然在重新加载后）。它似乎保留了表格/分页的初始状态。如果切换到另一个新的分页设置（例如每页 6 个），它似乎会将其初始状态更新为正确的状态，但仍然无法正常工作。

强制更新其信息的唯一方法是执行列排序。但是，重新加载时会丢失。这是什么原因造成的？

【问题讨论】：

标签： jquery datatables

【解决方案1】：

您可以再次调用 jQuery('#my_table').dataTable() 函数来更新表格。您可能需要传入自定义参数，以保留对表格数据进行的任何更改或动态添加/编辑。

【讨论】：

奇怪的是，即使页面刷新，问题似乎仍然存在，也就是说，当表再次使用新数据初始化时。接收到的数据修改了，修改了表格内容，但是表格的stats（分页和信息）是旧的。

【解决方案2】：

Datatables 有一个函数调用 fnDraw()，一旦你删除了它所依赖的数据，它就会为你重绘表格。

$('#my_table').fnDraw()

【讨论】：

据我了解，这只会重新加载表格。即使我刷新页面，我的问题似乎仍然存在。

【解决方案3】：

尝试强制"bStateSave": false

【讨论】：