Question

我正在使用datatables.js插件来帮助分页等。

部分功能是他们可以添加评论＆＃39;到桌子。我成功地做到了这一点。但是，如果评论转到下一页，我需要分页才能转到新评论，而不是停留在第一页或转到第一页。

我试图找到一些不同的选项来帮助做到这一点，但没有成功。

我的Jquery看起来像这样。

$('.addComment').on('click', function () {

        var newCom = $('.newCommentArea').find('input').val();

        var rowNode = commentTable
            .row.add(['Date', 'User', newCom])
            .draw()
            .node();

        $(rowNode)
            .css('background-color', 'lightyellow')
            .animate({
                color: 'black'
            });
    });

html只是一个标准表。

<table class='commentTable'>
  <thead>
    <th>Comment</th>
  </thead>
  <tbody>

 </tbody>
</table>

Answer 1

var commentTable = $('.commentTable').DataTable();
$('.addComment').on('click', function () {
    var newCom = $('.newCommentArea').val();
    var rowNode = commentTable.row.add(['Date', 'User', newCom]).draw(false).node(); 
    //table.row.add([newCom]).draw(false);
    commentTable.page('last').draw(false);
    $(rowNode)
         .css('background-color', 'lightyellow')
         .animate({
             color: 'black'
         });
});

<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

<input class="newCommentArea" />
<button class="addComment">
 ADD
</button>
<table class='commentTable'>
  <thead>
   <th>Date</th>
    <th>User</th>
    <th>Comment</th>
  </thead>
  <tbody>
 </tbody>
</table>

您的代码已进行了以下更改：

var rowNode = commentTable.row.add(['Date', 'User', newCom]).draw(false).node(); 
commentTable.page('last').draw(false);

添加行后，数据表分页将移至页面

1 个答案: