使用 DataTable - 未捕获的 ReferenceError：未定义表答案

【问题标题】：with DataTable - Uncaught ReferenceError: table is not defined使用 DataTable - 未捕获的 ReferenceError：未定义表
【发布时间】：2017-08-30 17:35:52
【问题描述】：

我有以下脚本，已经完美运行，然后需要在表的每个记录中放置第二个级别。在第一列中，我有一个按钮，单击该按钮将打开该记录的详细信息，就像下图中的那个

<script type="text/javascript" language="javascript">
    $(document).ready(function() {
        console.log("Entrou na função");
        console.log("Versão DataTable=" + $.fn.dataTable.version);


        //init the table
        var dataTable = $('#employee-grid').DataTable({
            "language": {
                "url": "https://cdn.datatables.net/plug-ins/1.10.12/i18n/Portuguese-Brasil.json"
            },
            "columnDefs": [{
                className: "details-control",
                "targets": [0]
            }],


            //********************      
            //"destroy": true,                  
            "processing": true,
            "serverSide": true,
            "ajax": {
                url: "phpmysql_serverside.php", // json datasource
                type: "post", // method  , by default get
                error: function() { // error handling
                    $(".employee-grid-error").html("");
                    $("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">Sem registros</th></tr></tbody>');
                    $("#employee-grid_processing").css("display", "none");

                }
            }


        });

        var oTable;
        oTable = $('#employee-grid').DataTable();
        $('#aplicativos').change(function() {
            if ($(this).find("option:selected").text() === "Escolha um APP")
                oTable.fnFilter('');
            else
                oTable.fnFilter($(this).find("option:selected").text());
        });


        // Add event listener for opening and closing details
        $('#employee-grid tbody').on('click', 'td.details-control', function() {
            console.log("Click");
            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(d) {
        // `d` 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>' + d.name + '</td>' +
            '</tr>' +
            '<tr>' +
            '<td>Extension number:</td>' +
            '<td>' + d.extn + '</td>' +
            '</tr>' +
            '<tr>' +
            '<td>Extra info:</td>' +
            '<td>And any further details here (images etc)...</td>' +
            '</tr>' +
            '</table>';
    }
</script>

单击选项卡的第一列时，我添加了以下代码。打开辅助记录。但是你给这个错误我已经尝试了一切，我认为没有问题

// Add event listener for opening and closing details
$('#employee-grid tbody').on('click', 'td.details-control', function() {
    console.log("Click");
    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');
    }
});

单击该按钮会显示以下消息：

Uncaught ReferenceError: table is not defined

编辑错误发生在这里

Var row = table.row (tr);

【问题讨论】：

听起来好像没有加载数据表脚本。
在运行此脚本时检查您的浏览器控制台是否有错误，并告知我们。似乎 jquery+data-table 库没有添加/或添加错误的优先级

标签： php jquery ajax datatables-1.10

【解决方案1】：

我只能添加

var oTable = $('#employee-grid').DataTable();

【讨论】：

太酷了！它也对我有用。 var oTable =$('#all_list').DataTable({}) 在点击事件中，我设置了 var row = oTable.row( tr );它正在工作。从我这边投票

【解决方案2】：

既然你声明了名为oTable的变量，你应该坚持这个变量名，而不是table。

因此，请使用oTable.row 而不是table.row。

【讨论】：

【解决方案3】：

由于您的 dataTable 在变量 oTable 中，请尝试使用 oTable.row 而不是 table.row；例如，

var table= $("#example").DataTable();

$("tr#info td").click(function(e){     //function_td
        var tr = $(this).closest('tr');
        console.log(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');
        }
});

【讨论】：

【解决方案4】：

不要在下面的行中使用 'var' 解决了我的问题

$( document ).ready(function() {   
      $.ajax({
        'url': "getjson_data",
        'method': "GET",
        'contentType': 'application/json',
    success:function(data) {
      var obj=JSON.stringify(data)

/*below */
/* dont use ''var'' myTabler=$('newTable').DataTable({...}*/

 myTabler=$('#newTable').DataTable( {



            //'paging': true, 
            'data':data,

            "processing": true,
            //"serverSide": true,
            "columns": [
                { "data": "name" },
                { "data": "usn" },
                { "data": "id" },
                { "data": "email" },
                //'targets': 4,'searchable': false,'orderable': false,
                {'data': null,'defaultContent': '<button>Edit</button >'},

            ],


        });



      }

    });
});

【讨论】：