Question

我只想问一下如何在数据表的下一页触发datetimepicker？它在第一页中正常工作，如此屏幕截图所示。

但是当我现在进入下一页时，日历不再被触发：

有人建议重新初始化我添加的内容如下：

var table = $('#ot_dataTables').DataTable();

$('#ot_dataTables').on( 'page.dt', function () {    
    $('#ot_dataTables').dataTable({
            order: [[ 0, "desc" ],[ 2, "desc" ]]
        });
} );

但日历仍未显示。任何帮助表示赞赏。

提前多多感谢。

Answer 1

所以这与Senjuti的答案类似，但我想发布我的，因为我能够在不需要重新创建表格实例的情况下完成它。但是，她是正确的page.dt上的听众在这种情况下不起作用，但draw.dt上的听众会这样做。

在我的回答中，我将使用您的表作为示例，并假设表中的input标记具有类名date-field。对我有用的是在输入标签上回忆datepicker()，如此，

var table = $('#ot_dataTables').DataTable();
$('#ot_dataTables').on('draw.dt', function () { 
    $(".date-field").datepicker();
}

Answer 2

我知道它已经很晚了但是对于其他人可能会面临这个问题，请使用draw.dt代替page.dt。无论何时绘制数据表，事件都会触发。

var table = $('#ot_dataTables').DataTable();

$('#ot_dataTables').on( 'draw.dt', function () {    
    $('#ot_dataTables').dataTable({
        order: [[ 0, "desc" ],[ 2, "desc" ]]
    });
});

page.dt - 页面更改事件 - 在更新表的分页时触发。

draw.dt - 绘制事件 - 在表格完成抽奖后触发。

Answer 3

我在数据表中的datetimepicker遇到了同样的问题。我添加了一个代码段来解决此问题。在这里，我在下面添加了详细信息：

HTML代码：

<table id="list" class="table table-hover  table-bordered">
.......    
    <div class='input-group date' id='input_date'>
<input  onkeydown="return false" type='text' class="form-control" />
      <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
      </span>
    </div>
..........
</table>

在添加数据表之前，我已经有如下所示的datetimpicker代码：

       //This is the code for bootstrap datetimepicker
       $("div#input_date").datetimepicker({
            format: 'YYYY-MM-DD HH:mm',
        }).on('dp.show', function () {
            return $(this).data('DateTimePicker').minDate(new Date());
        });

我添加了另一个代码段，以便在下一页的分页上也可以使用。

以下我添加的用于修复日期时间选择器的代码未出现在分页的下一页

       //code for datatable
       $('#list').DataTable({
            "bSort" : false //this is for disabling datable sorting
        });
//to fix the issue: datetimepicker not appearing in datatable when moved to next page(for pagination) 
      $('#list').on( 'draw.dt', function () {
            $("div#input_date").datetimepicker({
                format: 'YYYY-MM-DD HH:mm',
                minDate:new Date()
            })
        });

Datepicker未在下一页数据表上触发

3 个答案: