使用slideDown(）向jquery数据表添加一行

Adding a row to jquery-datatable using slideDown()?

本文关键字：一行 添加 jquery slideDown 使用 数据表      更新时间：2023-09-26

在我的视图中，我有两个div，一个负责向数据库添加条目，另一个负责在页面加载时显示所有数据库表行。负责显示我的表内容的div使用DatatablesjQuery插件，这使我在显示这些内容方面的生活更轻松。

这两个div单独运行都很好。但是，我想将它们集成在一起，这样当我使用第一个div添加一个条目时，数据库就会更新，然后这个条目会被附加到第二个div中的Datatable中，而无需重新加载整个页面。

我知道，使用Datatables API，只需使用row.add((和draw((函数，这个过程就足够容易了，这里演示了这一点。

虽然这是一个潜在的解决方案，但我并不完全满意，因为我页面的其余部分使用jQuery的slideDown((来制作外观整洁的动画，我希望我可以将此动画应用于向数据表中添加另一行。如果你看一下他们的例子，它只是插入一行，但如果我能让这行从表中滑下来，看起来会更好。

这是不是可以在不花太多时间的情况下完成的事情？还是应该坚持使用Datatables API并放弃尝试动画化它？我已经尝试过使用jQuery手动追加新行，但这看起来很糟糕，因为我认为我无法重新加载插件来将更改应用到Datatable中。

有人能告诉我正确的方向吗？谢谢

我想我已经解决了！

DEMO

我观察到当点击#addRow按钮时，它会添加一个类为.odd或.even的<tr>根据row的个数，即1,3,5...是奇数，2,4,6...是偶数。

所以我添加了CSS来平滑转换tr的高度，设置td的高度最终会影响tr的高度。这是我的CSS：

.odd td{
    height:0px;
    transition:all ease 1s;
    padding:5px;
}
.even td{
    height:0px;
    transition:all ease 1s;
    padding:5px;
}

现在，当#addRow按钮上的click事件发生时，我们只需要将last tr动画化为特定的height，即可实现slideDown效果。

该行可以是.odd或.even，这取决于每次添加row时递增的counter变量。

这就是我在JQuery中所做的。

这是我的JQuery:

$(document).ready(function() {
    var t = $('#example').DataTable();
    var counter = 1;
    $('#addRow').on( 'click', function () {
        var tr=t.row;
        tr.add( [
            counter +'.1',
            counter +'.2',
            counter +'.3',
            counter +'.4',
            counter +'.5'
        ] ).draw();
        var cls= counter%2!=0 ? ".odd" : ".even"; //class of latest row added (odd or even) %2 will do it.
        $(cls).last().animate({
            "height":"50px"
        },1000); // Acheive slideDown();
        counter++; //Increment Counter Now.
    } );
    // Automatically add a first row of data
    $('#addRow').click();
});

这将为您提供一个起点。

另外请注意：<tr>不支持slideDown()。使用css至0px手动设置高度也失败。因此，我请求您使用fadeIn()，而不是使用animate更改高度。

希望能有所帮助。干杯：(！

相关文章：