Получение предупреждающего сообщения при использовании вложенных таблиц с использованием jQuery Datatable

Question

Я получаю следующую ошибку при использовании Datatable в jQuery.

Предупреждение DataTables: идентификатор таблицы = step1_datatable2 - запрошенный неизвестный параметр '1' для строки 1. Для получения дополнительной информации об этой ошибке см. http://datatables.net/tn/4

Я предоставляю свой код ниже.

 <table id="main_datatable" class="maintable display nowrap displayflex" cellspacing="0" width="100%">
        <thead>
            <tr> 
                <th class="actionth col1"></th>
                <th class="col2">Item 1</th>
                <th class="col3">Item 2</th>
                <th class="col4">Item 3</th>
                <th class="col5">Item 4</th>
            </tr>
        </thead>
        <tbody class="tbody-panel">
            <tr>
                <td colspan="5">
                    <table class="stepPanelBody display nowrap displayflex">
                        <tr>
                            <td id="clickabletd" class="clicabletd plusicon col1" target="step1-1"></td>
                            <td class="col2">data 3a</td>
                            <td class="col3">data 1b</td>
                            <td class="col4">data 1c</td>
                            <td class="col5">data 1d</td>
                        </tr>
                        <tr id="trPanelstepstep1-1" class="targetDiv" style="display:none;">
                            <td colspan="5" style="padding:10px 30px;">
                             <table id="step1_datatable1" class="tablestep1 display nowrap">
                             <thead>
                              <tr>
                               <th class="actionth"></th>
                               <th>Month</th>
                               <th>Savings</th>
                              </tr>
                             </thead>
                               <tbody class="tbody-panel3">
                                    <tr>
                                        <td id="" class="clicabletd plusicon" target="step2-1"></td>
                                        <td>data 1a</td>
                                        <td>data 1b</td>
                                    </tr>
                                    <tr id="trPanelstepstep2-1" class="targetDiv" style="display:none;">
                                    <td colspan="3" style="padding:10px 30px;">
                                     <table id="step2_datatable1" class="tablestep2 display nowrap">
                                     <thead>
                                      <tr>
                                       <th>Year</th>
                                       <th>Month</th>
                                       <th>Savings</th>
                                      </tr>
                                     </thead>
                                       <tbody>
                                           <tr>
                                            <td>2012</td>
                                            <td>January</td>
                                            <td>$100</td>
                                           </tr>
                                           <tr>
                                            <td>2012</td>
                                            <td>February</td>
                                            <td>$80</td>
                                           </tr>
                                        </tbody>
                                     </table>
                                   </td>
                                 </tr>
                                </tbody>
                             </table>
                           </td>
                         </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td colspan="5">
                    <table class="stepPanelBody display nowrap">
                        <tr> <!--data-child-value="hidden 1"-->
                            <td id="clickabletd" class="clicabletd plusicon" target="step1-2"></td>
                            <td>data 1a</td>
                            <td>data 1b</td>
                            <td>data 1c</td>
                            <td>data 1d</td>
                        </tr>
                        <tr id="trPanelstepstep1-2" class="targetDiv" style="display:none;">
                            <td colspan="5" style="padding:10px 30px;">
                             <table id="step1_datatable2" class="tablestep1 display nowrap">
                             <thead>
                              <tr>
                               <th class="actionth"></th>
                               <th>Month</th>
                               <th>Savings</th>
                              </tr>
                             </thead>
                               <tbody class="tbody-panel3">
                                    <tr> <!--data-child-value="hidden 1"-->
                                        <td id="" class="clicabletd plusicon" target="step2-2"></td>
                                        <td>data 1a</td>
                                        <td>data 1b</td>
                                    </tr>
                                    <tr id="trPanelstepstep2-2" class="targetDiv" style="display:none;">
                                    <td colspan="3" style="padding:10px 30px;">
                                     <table id="step2_datatable2" class="tablestep2 display nowrap">
                                     <thead>
                                      <tr>
                                       <th>Year</th>
                                       <th>Month</th>
                                       <th>Savings</th>
                                      </tr>
                                     </thead>
                                       <tbody>
                                           <tr>
                                            <td>2012</td>
                                            <td>January</td>
                                            <td>$100</td>
                                           </tr>
                                           <tr>
                                            <td>2012</td>
                                            <td>February</td>
                                            <td>$80</td>
                                           </tr>
                                        </tbody>
                                     </table>
                                   </td>
                                 </tr>
                                </tbody>
                             </table>
                           </td>
                         </tr>
                    </table>
                </td>
            </tr>

         </tbody>
</table>

Я даю свой сценарий ниже.

<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
    //var table0 = $('#tablesteps').DataTable({});
    //var table1 = $('#exampleTable2').DataTable();
    //var table2 = $('#exampleTable3').DataTable();
    $('#main_datatable').DataTable();
    $('#step1_datatable1').DataTable();
    $('#step1_datatable2').DataTable();
    $('#step2_datatable1').DataTable();
    $('#step2_datatable2').DataTable();
});
$(document).ready(function() {
   /* var table = $('#steptbl').DataTable({
        "paging":   true,
        "ordering": true,
        "info":     false,
        "searching": true,
        });*/
});


jQuery(function() {
  jQuery('.clicabletd').click(function() {
    //jQuery('.targetDiv').hide();
    jQuery('#trPanelstep' + $(this).attr('target')).toggleClass('trPanel-active');
    //jQuery('.clicabletd').classToggle('minusicon');
    //$(this).parent().parent().find('.trPanel-active').slideToggle();
    //jquery(this).parent
    //var clicks = $(this).parents('tr').next('tr').hasClass('trPanel-active');
    //alert('Correct! You guessed it in ' + clicks + ' clicks.');
     if ($(this).parents().next('tr').hasClass('trPanel-active')) {
            jQuery(this).removeClass('plusicon');
            jQuery(this).addClass('minusicon');
         } else {
            jQuery(this).removeClass('minusicon');
            jQuery(this).addClass('plusicon');
         }
      });

});


    </script>

Проблема при загрузке таблицы: вышеупомянутая ошибка, связанная с данными. В этом случае таблица работает должным образом, но мне нужно удалить это предупреждающее сообщение.