Datatables - дочерние строки не открываются при втором щелчке

Question

Я пытаюсь создать 4 вкладки с таблицей (datatables) на каждой вкладке - таблица использует, чтобы открыть вкладку дважды, или перейти на другую вкладку и затем вернуться (без обновления страницы). Я не могу открыть ни одну издочерние строки, и это дает мне эту ошибку:

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

EDIT - Формат

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

В соответствии с ошибкой вы пытаетесь прочитать name свойство, которое не существует.Либо данные, возвращаемые вашим скриптом, не содержат свойство name, либо вы пытаетесь получить доступ к свойству name в функции format(), которую вы не опубликовали.

Также вам нужно переместить один щелчокобработчик вне другого обработчика щелчка, как показано ниже.

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

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

Или удалите обработчик кликов методом off().Например.

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

Убедитесь, что ваш серверный скрипт возвращает name для всех таблиц.