Datepicker not triggered on next page Datatable

Question

I just want to ask how can datetimepicker be triggered on the next page of a data table? It is working correctly in the first page as seen in this screenshot.

But when I go now to the next page, the calendar is not triggered anymore:

Some suggested to re-initialize which I added like this:

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

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

But still the calendar is not showing. Any help is appreciated.

Thanks a lot in advance.

Answer 1

So this is similar to Senjuti's answer, but I wanted to post mine because I was able to do it without the need of recreating the table instance. However, she is right that a listener on page.dt won't work in this case but a listener on draw.dt will.

In my answer, I'll use your table as an example and assume that input tags in the table have the class name date-field. What worked for me was recalling datepicker() on the input tags like so,

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

Answer 2

I know its late but for others might facing this issue, use draw.dt instead of page.dt. Whenever the datatable is drawn, the event fires.

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

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

page.dt - Page change event - fired when the table's paging is updated.

draw.dt - Draw event - fired once the table has completed a draw.

Answer 3

I faced the same problem for the datetimepicker in the datatable. I added one code snippet to fix the issue. Here I have added details below:

HTML code:

<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>

I already had the code for the datetimpicker like the following(before adding datatable):

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

I added another code snippet so that it works same on the next page of pagination.

Following code I added for fixing the datetime picker not appearing on the next pages of Pagination

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