The problem is that datatables to calculate the scrollX need to know the width of the table and then calculate the width that will set the class div "dataTables_scrollHeadInner" that creates dynamically, and as the "tab 2" is with display: none, can not calculate it and gives it a value that is not correct.
Therefore a solution would be to readjust the width of the columns of the table when you position yourself on each of the tabs.
I made some small changes to your code as an example:
1: Add a return to the function that creates the datatables, so you can access each of the tables:
function iniciarDataTable(id){
var table = $('#'+id).DataTable({
//todo el codigo
});
table.buttons().container().appendTo( '#example_wrapper .col-md-6:eq(0)');
return table;
}
2: I update the columns according to which I'm positioned:
$(document).ready(function(){
var tabla1 = iniciarDataTable('example1');
var tabla2 = iniciarDataTable('example2');
$('.nav-tabs a').on('shown.bs.tab', function(event){
var referencia = $(event.target).attr("href");
if(referencia == "#seccion1")
tabla1.columns.adjust();
if(referencia == "#seccion2")
tabla2.columns.adjust();
});
});
This way when you access each tab, you are adjusting the columns of the corresponding table
Here is an example with minimal code repeating your problem:
$(document).ready(function(){
iniciarDataTable('example1');
iniciarDataTable('example2');
});
function iniciarDataTable(id){
var table = $('#'+id).DataTable({
scrollX: true
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<div class="container-fluid">
<br>
<div class="row">
<div class="col-xs-12">
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#seccion1" aria-controls="" data-toggle="tab" role="tab">Sección #1</a>
</li>
<li role="presentation">
<a href="#seccion2" aria-controls="" data-toggle="tab" role="tab">Sección #2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="seccion1">
<br><br>
<table id="example1" class="table table-striped" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane" role="tabpanel" id="seccion2">
<br><br>
<table id="example2" class="table table-striped" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon2</td>
<td>System Architect2</td>
<td>Edinburg2h</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3202,800</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Here I leave an example with the solution that I propose:
$(document).ready(function(){
var tabla1 = iniciarDataTable('example1');
var tabla2 = iniciarDataTable('example2');
$('.nav-tabs a').on('shown.bs.tab', function(event){
var referencia = $(event.target).attr("href");
if(referencia == "#seccion1")
tabla1.columns.adjust();
if(referencia == "#seccion2")
tabla2.columns.adjust();
});
});
function iniciarDataTable(id){
var table = $('#'+id).DataTable({
scrollX: true
});
return table;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<div class="container-fluid">
<br>
<div class="row">
<div class="col-xs-12">
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#seccion1" aria-controls="" data-toggle="tab" role="tab">Sección #1</a>
</li>
<li role="presentation">
<a href="#seccion2" aria-controls="" data-toggle="tab" role="tab">Sección #2</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="seccion1">
<br><br>
<table id="example1" class="table table-striped" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane" role="tabpanel" id="seccion2">
<br><br>
<table id="example2" class="table table-striped" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon2</td>
<td>System Architect2</td>
<td>Edinburg2h</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3202,800</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Greetings!