Jquery Data Table Error: TypeError: settings is null

Question

大家好我正在开发网站并尝试使用 Jquery DataTable 我在 FF console:TypeError 上收到此错误：设置为空

$(settings.nTable).trigger( e+'.dt', args ); 服务器代码工作正常，我以 json 格式返回数据，如下所示：

{"data":[ {"id": 11,
"Name": "Matthieu  Bailly",
"unitsBet": 650.46700023859739,
"UnitsWon": -4.8294003307819366  }
,{"id": 18,"Name": "Niki  Dosev",
"unitsBet": 675.54000033438206,
"UnitsWon": -22.710001260042191  }]}

这是我的 HTML/JS 代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Members Stats</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css" />
<link href="../CSS/PunteamCSS.css" rel="stylesheet" />
<link href="http://31.168.155.52/ASP/css/main.css" rel="stylesheet" />
<!-- JQUERY DataTable CSS-->
<link href="../DataTable/media/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="../DataTable/resources/syntax/shCore.css" rel="stylesheet" />
<link href="../DataTable/resources/demo.css" rel="stylesheet" />
<style type="text/css" class="init">
    td.details-control {
        background: url('../resources/details_open.png') no-repeat center center;
        cursor: pointer;
    }

    tr.shown td.details-control {
        background: url('../resources/details_close.png') no-repeat center center;
    }
</style>
<!-- END JQUERY DataTable CSS-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- DataTable JS-->
<script src="../DataTable/js/jquery.dataTables.js"></script>
<script src="../DataTable/js/jquery.dataTables.min.js"></script>
<script src="../DataTable/resources/syntax/shCore.js"></script>
<script src="../DataTable/resources/demo.js"></script>

<script src="../PunteamScripts/AddAffiliate.js"></script>
<script src="../PunteamScripts/PunteamGlobals.js"></script>
<script src="../PunteamScripts/general.js"></script>
<script type="text/javascript" language="javascript" class="init">

    var ID = ''; //Global parameter for Loged in user

    //**************************************************************************
    //** Jquery Ready function hooks the buttons click events                  *
    //**************************************************************************
    $()
    $(document).ready(function () {
        //Load the top and bottum HTML
        $("#top").load("../HTML-Includes/top.html");
        $("#bottum").load("../HTML-Includes/bottum.html");
        // Ajax params Setup
        $.ajaxSetup({
            url: serverAddress,
            type: "POST"
        });
        // get parameters from ASP page
        var queries = {};
        $.each(document.location.search.substr(1).split('?'), function (c, q) {
            var i = q.split('=');
            ID = i[1].toString();
            AffiliateMembersStats.pType = "GetAffiliateMembersStats"
            AffiliateMembersStats.data[0].affilateId = ID
        });
        // Call to server to get Recommender detailes (Loged in user)
        $.ajax({
            type: "POST",
            processData: false,
            data: JSON.stringify({ json: AffiliateMembersStats }),
            //    dataType: "json",
            success: function (data) {

                var table = $('#membersStats').DataTable({
                    "data": data,
                    "columns": [
                        {
                            "className": 'details-control',
                            "orderable": false,
                            "data": null,
                            "defaultContent": ''
                        },
                        { "data": "Name" },
                        { "data": "unitsBet" },
                        { "data": "UnitsWon" },
                    ],
                    "order": [[1, 'asc']]
                });
            },
            failure: function (errMsg) {
                alert("Error in Get Members Stats");
            }
        });
        //End get parameter


        // Add event listener for opening and closing details
        $('#membersStats tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = table.row(tr);

            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child(format(row.data())).show();
                tr.addClass('shown');
            }
        });
    });
    //*************************************************************
    //* Formatting function for row details - modify as you need **
    //*************************************************************
    function format(data) {
        // `data` is the original data object for the row
        return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
            '<tr>' +
                '<td>Full name:</td>' +
                '<td>' + data.Name + '</td>' +
            '</tr>' +

            '<tr>' +
                '<td>Extra info:</td>' +
                '<td>And any further details here (images etc)...</td>' +
            '</tr>' +
        '</table>';
    }
</script>
<!--//******************* End Of Script Blosk *******************-->
</head>
<body>
<div id="top" class="col-md-12"></div>
<div class="container body-content" align="center" style="width:1200px; padding: 0 0 0 0;">
    <div id="top" class="col-md-12">
        <table id="membersStats" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th></th>
                    <th>Name</th>
                    <th>Units Bets</th>
                    <th>Units Won</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
<div id="bottum" class="col-md-12">></div>

Answer 1

我遇到了同样的问题，似乎是在第 5070 行（我使用的是 v.1.10.7）上进行了违规调用：

_fnCallbackFire( settings, null, 'error', [ settings, tn, msg ] );

反过来由第 6111 行的完整性检查引起：

/* Sanity check */
if ( this.nodeName.toLowerCase() != 'table' )
{
    _fnLog( null, 0, 'Non-table node initialisation ('+this.nodeName+')', 2 );
    return;
}

在我的例子中 nodeName 是 "DIV"，因为我错误地将 DataTable id 分配给 table 周围的 DIV。

Answer 2

确保您没有将 table 的 id 放在另一个 tag 中。在我的例子中，我有 <div id='myDataTable'><table></table></div> 而不是 <div><table id='myDataTable'></table></div>

Jquery Data Table Error: TypeError: settings is null

Jquery Data Table Error: TypeError: settings is null

jquery

jquery-datatables