Question

我有一个表，我使用此jquery代码

使用数据表插入页面

<script type="text/javascript">
$(document).ready(function() {

    //alert('this was loaded.');
    $.noConflict();
     $('#outbox-1').datetimepicker();
     $('#outbox-2').datetimepicker();
    $('#users-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! route('datatable.employees') !!}',
        columns: [
            { data: 'id', name: 'Id' },
            { data: 'users_full_names', name: 'Full Names' },
            { data: 'email', name: 'Email' },
            { data: 'users_telephone_number', name: 'Telephone' },
            { data: 'users_credits', name: 'Credits' },
            { data: 'updated_at', name: 'Last Seen' },
            { data: 'users_profile_picture', name: 'Profile Picture' },
        ]
    });
});
</script>

这是html

<div class="tab-content">
<div class="tab-pane fade in active" id="tab1success">
<table class="table table-bordered" id="users-table">
<thead>
<tr>

<th>id</th>
<th>Full Names</th>
<th>Email</th>
<th>Telephone</th>
<th>Credits</th>
<th>Last Seen</th>
<th>Profile Picture</th>

</tr>
</thead>
</table>
</div>
<div class="tab-pane fade" id="tab2success">
</div>
</div>

这是数据表

的屏幕截图

这个屏幕截图显示了dom是如何插入的，即使在相邻的标签上也没有数据表的目标ID

通过检查员检查后，可以在第二个选项卡中找到该表。第一次加载表时，其他选项卡的内容保持不变，其他选项卡数据表不会错误地占用空间。当我单击数据表选项卡并单击第二个时，问题就出现了。

为什么数据表出现在第二个标签中？。

其他标签html

<div class="tab-pane fade" id="tab2success">
                              <form>
                              <div class="form-group">
            <style>.mb{margin-bottom:20px;}.ml{margin-left:15px;} .btnr{margin-right:25px;}</style>
            <div class="col-xs-3 mb">
              <label class="control-label">One</label>
              <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>
            <div class="col-xs-3 mb">
              <label class="control-label ">Two</label>
              <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>
            <div class="col-xs-3 mb">
              <label class="control-label ">Three</label>
                 <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>
             <div class="col-xs-3 mb">
              <label class="control-label ">Four</label>
                 <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>
             <div class="col-xs-3 mb">
              <label class="control-label ">Five</label>
                 <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>

              <div class="col-xs-3 mb">
              <label class="control-label ">Six</label>
                 <input type="name" class="form-control" id="fname" placeholder="Enter name">
            </div>

        </div>
        <div class="row">
         <div class="col-md-12 ml ">
                <button type="submit" class="btn btn-success btnr pull-right">Register</button>
            </div>
        </div>
      </form>
                            </div>

Jquery将dom插入错误的标签

0 个答案: