Question

我正在创建一个dataTable，其中一行包含五列。第三列和第四列将具有一个文本框，该文本框是使用唯一ID动态创建的。第四行是提供日期。我想将datetimepicker与第四列中的每个文本框绑定。这就是我所做的：

table = jQuery("#table_billing").dataTable({
                "sAjaxSource": "includes/inc-billing2-db.php?mode=billing_dataTable",
                "bDestroy": true,
                "bPaginate": false,
                "bInfo": false,
                "bFilter": false,
                "bSort": false,
                "aoColumnDefs": [
                    {
                        "aTargets": [2],
                        "mRender": function(data, type, row) {
                            return '<input type="text" class="form-control invoice_number" name="invoice_number" id="invoice_number_'+ a +'" placeholder="Invoice Number" required="required" onblur="getvalue(this)">';


                        }
                    },
                    {
                        "aTargets": [3],
                        "mRender": function(data, type, row) {
                            return '<input type="text" class="form-control date" name="invoice_date" id="invoice_date_'+ b +'" placeholder="Invoice Date" required="required" onblur="getdate(this)">';

                        }
                    },
                    {
                        "aTargets": [4],
                        "mRender": function(data, type, row) {
                            return '<input type="button" class="btn-group btn-default btn-sm save" value="Save" name="save_bill" id="save_bill" onclick="jQuery(this).save(' + row[3] + ', ' + row[4] + ');">';
                        }
                    }
                ],
                "fnCreatedRow": function(nRow, aData, iDisplayIndex, iDisplayIndexFull){
                    jQuery("#invoice_date_'+b+'").datetimepicker({ format: "<?php echo $jquery_date_format; ?>" });
                    a = a + 1;
                    b = b + 1;
                    //c = c + 1;

                }
            });

我试图将datetimepicker tp绑定到动态生成的文本框中，但我无法做到。我该怎么做？我应该怎么做才能显示出来？

Answer 1

应该是这样的：

"fnCreatedRow": function(nRow, aData, iDisplayIndex, iDisplayIndexFull){
   jQuery("#invoice_date_"+b).datetimepicker({ format: "<?php echo $jquery_date_format; ?>" });
   a = a + 1;
   b = b + 1;
}

Answer 2

这里的问题是，我在渲染完成之前定义了datetimepicker。因此，代码不会被执行。渲染完成后，我们必须定义它。因此，答案是：

jQuery("#table_billing").dataTable({
    "sAjaxSource": "billing-db.php?mode=billing_dataTable",
    "bDestroy": true,
    "bPaginate": false,
    "bInfo": false,
    "bFilter": false,
    "bSort": false,
    "aoColumnDefs": [
        {
            "aTargets": [0],
            "mRender": function(data, type, row) {
                return '<a href="contract-form.php?contract_id=' + row[2] + '" target="_blank" title="' + row[0] + '">' + row[0] + '</a>';
            }
        },
        {
            "aTargets": [2],
            "mRender": function(data, type, row) {
                return '<input type="text" class="form-control invoice_number" name="invoice_number" id="invoice_number_'+ row[3] +'" placeholder="Invoice Number" required="required" onblur="getvalue(this)">';
            }
        },
        {
            "aTargets": [3],
            "mRender": function(data, type, row) {
                return '<input type="text" class="form-control date" name="invoice_date" id="invoice_date_'+ row[3] +'" placeholder="Invoice Date" required="required" onblur="getdate(this)" >';
            }
        },
        {
            "aTargets": [4],
            "mRender": function(data, type, row) {
                return '<input type="button" class="btn btn-default btn-sm save" value="Save" name="save_bill" id="save_bill" onclick="jQuery(this).save(' + row[2] + ', ' + row[3] + ');">';
            }
        }
    ],
    "initComplete": function(settings, json) {
        $('.date').on('focus', function() {
            $(this).datetimepicker({ format: "<?php echo $jquery_date_format; ?>" });
        });
      }  
});

将datetimepicker绑定到动态创建的文本框 - jQuery

2 个答案: