Question

我有Jquery DataTable，每行都有一个Calender。当我在任何行中更改Date时，值会在第一行中更改。

这是我的代码。

showCalender = function () {
        var now = new Date();
            $("#TimeTable tr input.Date").val(now.format('dd/mm/yyyy'))
                .datepicker({
                    dateFormat: 'dd/mm/yy',
                    changeYear: true,
                    changeMonth: true,
                    showButtonPanel: true,
                    yearRange: "-100:+0",
                    autoSize: true
                });
    };

DataTable代码

    $('#TimeTable').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bServerSide": true,
        "sAjaxSource": '/forms/exam/ExamTimeTable.aspx/subjectgetallbyclass?ClassId=' + ClassId,
        "fnServerData": function (sSource, aoData, fnCallback) {

            $.ajax({

                "type": "GET",
                "dataType": 'json',
                "contentType": "application/json; charset=utf-8",
                "url": sSource,
                "data": aoData,
                "success": function (data) {
                    fnCallback(data.d);
                }
            });
        },
        "aoColumns": [
            {
                "mDataProp": "SubjectName",
                "bSearchable": false,
                "bSortable": false,

            },
            {
                "mDataProp": "Date",
                "bSearchable": false,
                "bSortable": false,
                "fnRender": function (oObj) {
                    return '<input type ="text" id="Date" style="width:100px;" class="Date" value=' + commonStartup.convertDate4Reports(oObj.aData["Date"]) + '></input>' +
                        '<input type ="hidden" id="SubjectId" value= ' + oObj.aData["SubjectId"] + ' class="subjectId"></input>';
                }
            }
        ]
    });
        setTimeout('showCalender()', 1000);

};

Answer 1

由于单个页面上多个元素的相同ID被称为无效标记写入，因此从输入中删除id属性或通过附加一些数字来更改每个输入的ID：

id="Date" // needs to be removed.

来自fnRender方法：

    return '<input type ="text" style="width:100px;" class="Date" value=' + 
             commonStartup.convertDate4Reports(oObj.aData["Date"]) + '></input>' +
           '<input type ="hidden" id="SubjectId" value= ' + oObj.aData["SubjectId"] + 
           'class="subjectId"></input>';

如果发生这种情况（多个元素的相同ID）只有第一个id才会发生变化。

Jquery DataTable中的DateTimePicker

1 个答案: