Question

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

<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');
    }
});

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

未捕获的ReferenceError：未定义表格

EDIT 错误发生在这里

Var row = table.row (tr);

Answer 1

我只能添加

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

Answer 2

由于您声明了名为std::iterator_traits<For>::value_type的变量，因此您应该坚持使用此变量名，而不是oTable。

因此，请使用table代替oTable.row。

Answer 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');
        }
});

Answer 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 >'},

            ],


        });



      }

    });
});

with DataTable - 未捕获的ReferenceError：未定义表

4 个答案: