输入框datepicker在jQuery DataTables的所有页面中都不起作用

Question

我有jsp页面有jQuery DataTables,其中包含超过20个页面,我在数据表td标签中使用文本框,显示datepicker即签入/签出日期.

在第一页上它完美地工作,但在其他页面上,datepicker类不适用.这是我使用的以下代码.

HTML代码

<table id="tableBookingByBooker">
    <thead class="btn-default">
        <tr>
            <th>checkInDate</th>
            <th>checkInDate</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <input id="checkInDate${data[0]}" />
            </td>
            <td>
                <input id="Text1" />
            </td>
        </tr>
    </tbody>
</table>

JS代码:

$('input[id^=checkInDate]').each(function (index, element) {
    var checkOutDate = (new Date($('#checkOutDate' + $(this).attr('id').substring(11)).val()));
    checkOutDate.setDate(checkOutDate.getDate() - 1);
    $(this).datepicker({
        dateFormat: 'mm/dd/yy',
        maxDate: checkOutDate,
    });
});

$('input[id^=checkOutDate]').each(function (index, element) {
    var checkInDate = (new Date($('#checkInDate' + $(this).attr('id').substring(12)).val()));
    checkInDate.setDate(checkInDate.getDate() + 1);
    $(this).datepicker({
        dateFormat: 'mm/dd/yy',
        minDate: checkInDate,
    });
});

输入框(checkIn/checkout)Datepicker在数据表的第一页成功运行,但其他页面的日期选择器不起作用.

我尝试了分页事件并将js代码放入函数单击但它无法正常工作

Answer 1

正如 Ted 指出的，最好的选择是注册一个“页面更改”事件。问题是使用 jquery select 的一次性初始化不会影响动态加载的内容。

可能还有其他方法，但 dataTables 引用的方法看起来像这样。

https://datatables.net/reference/event/page

//Your Check-in UI DatePicker code.
var checkInInit = function () {}
//Your Check-out UI DatePicker code.
var checkOutInit = function () {}

var table = $('#dataTable').DataTable();
$('#dataTable').on('page.dt', function () {
    checkInInit();
    checkOutInit();
});