Question

我正在尝试创建4个选项卡，每个选项卡中都有一个（数据表）表-该表用于两次打开该选项卡，或者转到另一个选项卡然后返回（不刷新页面），我无法打开任何子行，这给了我这个错误：

Uncaught TypeError: Cannot read property 'name' of undefined

我正在努力找出原因！

如何获取让我每次都能看到子行的信息？

谢谢

这是我用于数据表的jQuery。

 $('.tab-link').click(function(e){  
    e.preventDefault();

var table_to_get = $(this).attr('data-tab');
            if (table_to_get == "tab-2"){
        var table_name ="#restaurants_table";
      } else if (table_to_get == "tab-3"){
        var table_name ="#pubs_table"
      } else if (table_to_get == "tab-4"){
        var table_name ="#clubs_table"
      } else {
        var table_name ="#bars_table"
      }

      var userid = '<?php echo $row["id"]; ?>';
      var table = $(table_name).DataTable( {
        "bDestroy": true,
        "bProcessing" : true,
                "bServerSide" : true,
        "ajax": {
          url : "myListsql2.php",
          dataType : "json",
          type: "POST",
          "data": function ( d ) {
              d.userid = userid;
              d.table_name = table_name;
          },
          "initComplete":function( settings, json){
            console.log(json);
              console.log("DONE");
              // call your function here
          },
        },
        "columns": [
          {
            "className":      'details-control',
            "orderable":      false,
            "defaultContent": ''
          },
          { "data": "name" },
          { "data": "locale" },
        ],
        "order": [[1, 'asc']]
      });
      var table_and_body = table_name + ' tbody';

      $(table_and_body).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
                $('div.slider', row.child()).slideUp( function () {
                    row.child.hide();
                    tr.removeClass('shown');
                } );
            }
            else {
                // Open this row
                row.child( format(row.data()), 'no-padding' ).show();
                tr.addClass('shown');

                $('div.slider', row.child()).slideDown();
            }
      });
    });

编辑-格式

function format ( d ) {

    // `d` is the original data object for the row
    return '<div class="slider">'+
    '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Address:</td>'+
            '<td>'+d.name+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Opening Times:</td>'+
            '<td>'+d.opening_times+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Phone Number:</td>'+
            '<td>'+d.phone_number+'</td>'+
        '</tr>'+
    '</table>'
    '</div>';
}

Answer 1

根据错误，您试图读取不存在的for-loop属性。脚本返回的数据不包含j属性，或者您正在尝试访问name函数中未发布的name属性。

此外，您需要将一个点击处理程序移到另一个点击处理程序之外，如下所示。

name

或使用format()方法删除点击处理程序。例如。

$('.tab-link').click(function(e){
   // skipped
});

$('table tbody').on('click', 'td.details-control', function () {
   // skipped
});

确保您的服务器端脚本为所有表返回off()。

数据表-子行在第二次单击时未打开

1 个答案: