输入框日期选择器不适用于 jQuery DataTables 的所有页面

Question

我有 jsp 页面有 jQuery 数据表，其中包含超过 20 页我在数据表 td 标签中使用文本框显示日期选择器，即签入/签出日期。

在第 1 页上它完美运行，但在其他页面上 datepicker class 不适用。这是我使用的以下代码。

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）日期选择器在数据表的第一页成功工作，但其他页面日期选择器不工作。

我尝试了分页事件，并在点击函数中放入了js代码，但是没有正常工作

Answer 1

正如 Ted 指出的那样，最好的办法是在 "page change" 上注册一个事件。问题是使用 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();
});

Answer 2

是的，函数调用成功，但应用的代码 checkIn/checkOut 日期选择器不工作我已经为每个 checkInDate 和 checkOut 日期元素指定了唯一的名称。我在这里应用了以下代码...

// Check-in UI DatePicker code.
    var checkInInit = function () {
        alert('call');
        $('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,
            });
        });

    }
    // Check-out UI DatePicker code.
    var checkOutInit = function () {
        alert('call');
        $('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,
        });
    });
    }
    $('#tableBookingByBooker').on('page.dt', function () {
        checkInInit();
        checkOutInit();
    });

输入框日期选择器不适用于 jQuery DataTables 的所有页面

input box datepicker not working in all pages of jQuery DataTables

javascript

jquery

jsp

datepicker

datatables