Jquery DataTable 中的 DateTimePicker答案

【问题标题】：DateTimePicker in Jquery DataTableJquery DataTable 中的 DateTimePicker
【发布时间】：2014-11-14 07:16:55
【问题描述】：

我有一个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);

};

【问题讨论】：

标签： jquery datepicker datatables jquery-ui-datepicker jquery-datatables

【解决方案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 获得更改的效果。

【讨论】：