Javascript 输入框日期选择器在jQuery数据表的所有页面中都不工作

我有一个jsp页面，其中jQuery数据表包含超过20个页面，我在datatable

td

标记中使用textbox，它显示日期选择器，即签入/签出日期

在第一页上，它可以完美地工作，但在其他页面上，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>

输入框（签入/签出）日期选择器在datatable的第一页成功工作，但其他页面日期选择器不工作

---

我尝试了分页事件并将js代码放入函数click中，但它没有正常工作

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

可能还有其他方法，但dataTables引用的方法如下所示

---

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

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

---

我的猜测是，您需要实例化页面更改上的日期选择器（假设它们获得唯一ID），将签入/签出代码放在数据表JS代码之上……它的工作正常那么您能解决这个问题吗？想要接受一个答案，或者完全关闭这个问题吗？是的@maleki根据我的问题，你的答案在这里是完美的。我建议任何应用于数据表的代码都必须放在datatable js代码之前。谢谢。好的@maleki谢谢。这里调用了函数，但文本框上未应用datepiker。我认为函数调用中存在问题。在datatable页面出现之前向com发出警报。。。有没有在datatable页面出现后调用函数的解决方案？

on（'page.dt'）

对我不起作用，但（'draw.dt'）对我起作用，

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

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