`DEMO`

Question

在我看来，我有两个div，一个负责向我的数据库添加一个条目，另一个负责在页面加载时显示我的所有数据库表行。负责显示我的表内容的div使用Datatables jQuery插件，这使得我的生活变得更容易，只显示这些内容。

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

我知道使用Datatables API，只需使用row.add（）和draw（）函数就可以轻松完成此过程，这可以完成，并且已经演示here。

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

这可以在不花太多时间的情况下完成吗？或者我应该坚持使用Datatables API并放弃尝试动画它？我已经尝试过使用jQuery手动附加一个新行，但它看起来很糟糕，因为我不认为我可以重新加载插件以将更改引入Datatable。

有人可以指出我正确的方向吗？谢谢！

Answer 1

我想我已经解决了它！

`DEMO`

我观察到当点击#addRow按钮时，它会添加<tr>，其中包含课程.odd或.even 取决于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;
}

现在当click按钮上的#addRow事件发生时，我们只需要将last tr设置为特定height，即可实现{{1}效果。

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

这就是我在JQuery中做的事情。

这是我的JQuery：

row

这将为您提供一个起步阶段。

另请注意：$(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(); });不支持slideDown()。使用<tr>到css手动设置高度也会失败。因此，我要求您使用0px而不是使用fadeIn()更改身高。

希望它有所帮助。干杯:)！

使用slideDown（）向jquery-datatable添加一行？

1 个答案:

`DEMO`