Question

我有一个使用Jquery和datatables插件从后端返回的数据表。我需要在数据表中选择订单号并提醒它。警报和控制台在数据表的第一页中运行良好，但不再从第二页触发。我用谷歌搜索了它，但.live()已被弃用，建议的答案.on()似乎不起作用。

Jquery：

$(document).ready(function () {
$.ajax({
    type: "POST",
    //url: "OrderDetail.asmx/HelloWorld",
    url: "Order.aspx/GetOrder",
    data: "{'id':'273440'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
        $('#order').append(msg.d);
        //alert(msg.d);
        console.log(msg);
        $('#orderTable').dataTable({
            // "sScrollY": "100px",

            "bAutoWidth": false,
            "bDeferRender": true
            //"bPaginate": false

        });
        // Click order number to get the details
        // Problem is here 
        $('.orderNumber').on('click', function () {
            var orderNum = $(this).text();
            console.log(orderNum);
        });

    },
    error: function (xhr, status, error) {
        // Display a generic error for now.
        alert("Ajax Error!");
    }
});

}）;

Answer 1

您设置的onclick事件仅适用于页面上的元素。这就是它只适用于第一页的原因。每当数据表显示新结果时，您应设置onclick事件。这可以通过将onclick侦听器移动到datatables的fnDrawCallback函数来实现。

$('#orderTable').dataTable({
    // "sScrollY": "100px",

    "autoWidth": false,
    "deferRender": true,
    //"bPaginate": false,

    "drawCallback": function() {
        $('.orderNumber').on('click', function () {
            var orderNum = $(this).text();
            console.log(orderNum);
        });
    }
});

请参阅https://datatables.net/reference/option/drawCallback

Alert（）不会从数据表的第二页触发

1 个答案: