在Ajax成功函数中绘制DataTables

Question

这是我的代码：

 var $j = jQuery.noConflict();
var oTable;
oTable = $j('#jqueryDataTable').dataTable();

$j(document).ready(function () {

    $j("#goButton").click(function (e) {


        $j.ajax({
            "type": "GET",
                "url": "navigate.do?submitbutton=true",
                "error": function (jqXHR, textStatus, errorThrown) {
                alert('Please try again');
            },
                "success": function (jqXHR, textStatus, errorThrown) {

                var totalRecords = jqXHR["iTotalRecords"];
                if (totalRecords == -1) {
                    $j("#tableGrid").hide();
                    $j("#noResults").show();
                } else {
                    $j("#tableGrid").show();
                    $j("#noResults").hide();

                    oTable = $j('#jqueryDataTable').dataTable({
                        "bDestroy": true,
                            "bProcessing": true,
                            "bRetrieve": true,
                            "bServerSide": false,
                            "bAutoWidth": false,
                            "lengthMenu": [25, 50, 100],
                            "sPaginationType": "full_numbers",
                            "bJQueryUI": false,
                            "sDom": 'C<"clear">lfrtip',
                            "oLanguage": {
                            "sEmptyTable": "Yahooo and Hotmail .."
                        },
                            "aoColumns": [{
                            "aTargets": [0],
                                "mData": "pri",
                                "sDefaultContent": "",
                                "type": "string",
                                "sWidth": "2em;",
                                "sClass": "pri",
                                "mRender": function (data, type, full) {
                                if (data == '0') {
                                    return '<img src="images/blank.gif" style="border:0px;">';
                                } else {
                                    return data;
                                }
                            }
                        }, {
                            "mData": "dateToday",
                            "sDefaultContent": "",
                            "sWidth": "5em;",
                            "sClass": "pri"
                        }, {
                            "aTargets": [2],
                                "mData": "time",
                                "sDefaultContent": "",
                                "type": 'alt-string',
                                "sWidth": "3em;",
                                "sClass": "pri",
                                "mRender": function (data, type, full) {
                                if (data == ' ') {
                                    return '<img src="images/img_rag_grey.gif" alt="grey" style="border:0px;">';
                                } else if (data == 'L') {
                                    return '<img src="images/img_rag_red.gif" alt="red" style="border:0px;">';
                                } else if (data == 'D') {
                                    return '<img src="images/img_rag_amber.gif" alt="amber" style="border:0px;">';
                                } else if (data == 'O') {
                                    return '<img src="images/img_rag_green.gif" alt="green" style="border:0px;">';
                                } else if (data == 'S') {
                                    return '<img src="images/img_s.gif" alt="s" style="border:0px;">';
                                }
                            }
                        }, {
                            "mData": "First Name",
                            "sDefaultContent": "",
                            "sWidth": "8em;",
                            "sClass": "pri"
                        }

                        ]

                    });

                    oTable.fnDraw();

                }
            }
        });


    });

});

正如您所看到的，在通过单击一个按钮在ajax调用中检索数据之后，我正在尝试绘制datatable。我能够在浏览器控制台中看到正在检索的数据，并且可以在网络浏览器控制台中看到数据的json数组。但是，DataTable不会呈现或绘制数据。我试过fnDraw，但它也不起作用。但是，它确实显示了消息"Yahooo and Hotmail ..“找不到数据或记录为0时。此外，当我发回-1时，它也会在成功方法中执行if条件。

我不确定为什么它不渲染列。任何帮助都将不胜感激。我使用的是Datatables 1.10.0

Answer 1

让我们试一试

oTable = $j('#jqueryDataTable').DataTable(...)

而不是

oTable = $j('#jqueryDataTable').dataTable(...)

和

oTable.draw()；

请参阅this和this