下一页数据表上未触发日期选择器答案

【问题标题】：Datepicker not triggered on next page Datatable下一页数据表上未触发日期选择器
【发布时间】：2015-08-21 06:36:00
【问题描述】：

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

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

有些人建议重新初始化，我这样添加：

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

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

但是日历仍然没有显示。任何帮助表示赞赏。

非常感谢。

【问题讨论】：

第二个pop-uptriggerdatetimepicker 时，您是否检查了console 中的errors。可能是jQuery 或其他方面有问题。
嗨@vivekkupadhyay，谢谢，但当我单击第二个弹出窗口时，控制台中没有错误。 :(
click 到trigger 时检查控制台datetimepicker。看来您正在使用bootstrap datetimepicker 而您触发的弹出窗口是modal-box 或iframe？
嗨@vivekkupadhyay，是的，我正在使用引导日期时间选择器。它是模态对话框。
你有没有demo URL 或者JSFiddle 因为它很难给出解决方案，而且猜测不是正确的方法：P

标签： jquery datatable bootstrap-modal

【解决方案1】：

所以这类似于 Senjuti 的答案，但我想发布我的答案，因为我能够做到这一点而无需重新创建表实例。然而，她是对的，page.dt 上的侦听器在这种情况下不起作用，但draw.dt 上的侦听器会。

在我的回答中，我将以您的表格为例，并假设表格中的input 标记具有类名date-field。对我有用的是像这样在输入标签上回忆datepicker()，

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

【讨论】：

谢谢。它对我有用。我把我的代码放在下面，因为 datetimepicker 还有一些其他要求。希望这也可以帮助其他人。

【解决方案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 - 抽奖事件 - 表完成抽签后触发。

【讨论】：

【解决方案3】：

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

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());
        });

我添加了另一个代码 sn-p 以便它在下一页分页上的工作方式相同。

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

       //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()
            })
        });

【讨论】：