使用jQuery Datatable使用嵌套表时获取警告消息

时间:2019-04-26 10:15:43

标签: jquery datatable

在jQuery中使用Datatable时出现以下错误。

  

DataTables警告:表id = step1_datatable2-第1行请求的未知参数'1'。有关此错误的更多信息,请参见https://github.com/timothycrosley/isort/wiki/isort-Plugins

我在下面提供我的代码。

 <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>

问题是在加载表时出现了上述错误,该错误与数据表有关。在这种情况下,表格可以按预期工作,但是我需要删除此警告消息。

0 个答案:

没有答案