在我看來，我有兩個div，一個負責向我的數據庫添加一個條目，另一個負責在頁面加載時顯示我所有的數據庫錶行。負責顯示我的表格內容的div使用Datatables jQuery插件，這使得我的生活更容易，只要顯示此內容即可。使用slideDown（）向jquery-datatable添加一行？

這兩個div工作得很好，分開。但是，我想將它們集成在一起，這樣當我使用第一個div添加條目時，數據庫會更新，然後將此條目附加到我的第二個div中的Datatable中，而無需重新加載整個頁面。我知道使用Datatables API只需使用row.add（）和draw（）函數就足夠簡單了，但這可以完成，並且會被演示here。雖然這是一個潛在的解決方案，但我並不完全滿意，因爲我的頁面的其餘部分利用jQuery的slideDown（）製作整潔的動畫，並且我希望能夠應用此動畫添加另一個動畫行到我的Datatable。如果你看他們的例子，它只是插入行，但如果我可以從表中滑下該行，看起來會更好。

這樣的事情可以在不花費太多時間的情況下完成嗎？或者我應該堅持使用Datatables API並放棄嘗試對其進行設置？我已經嘗試過使用jQuery手動添加新行，但看起來很糟糕，因爲我不認爲我可以重新加載插件以將更改應用到Datatable中。

難道有人請指點我正確的方向嗎？謝謝！

來源

2014-07-01 Michael Parker

請包括您的代碼有問題，而不是包括一個鏈接。 –

@VedantTerkar我想要一種方法來修改或重寫Datatables API，我不認爲我的兩個div的代碼是相關的。另外，它很長。 –

slideDown在tr上不受支持[http://stackoverflow.com/a/920480/2359055](http://stackoverflow.com/a/920480/2359055） –

我想我解決了它！

`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按鈕時，我們只需要動畫lasttr具體height，實現slideDown效果。

該行可以是.odd或.even，具體取決於counter變量，每次添加row時該變量都會遞增。

所以這就是我在做的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更改高度。

希望它有幫助。歡呼:)！

來源

2014-07-01 17:19:39

Woah，看起來像是將相當多的工作放入這個。幹得不錯，看起來比我能做的好得多。 –

好吧差不多2個小時。 @MichaelParker，但我認爲這樣做很好，學到了新東西。我以前不知道這個表插件。我很高興能幫助你。 –

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

回答

DEMO

相關問題

`DEMO`