我有一个响应的数据表,如下所示:
<table class="table table-hover responsive datatable" data-scroll=".oc- scroll" id="example">
<thead>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<th>Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<th></th>
</tr>
</tfoot>
<tbody>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<th>Edit</th>
</tr>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<th>Edit</th>
</tr>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<th>Edit</th>
</tr>
<tr>
<th>col1</th>
<th>col2</th>
<th>col3</th>
<th>col4</th>
<th>col5</th>
<th>Edit</th>
</tr>
</tbody>
</table>
我已使用以下js
对数据表应用了列过滤器var tableID = "example";
var colIdxIgnore = "6";
if(tableID != '') {
// Setup - add a text input to each footer cell
$('#' + tableID + ' tfoot th').each( function () {
var title = $('#' + tableID + ' thead th').eq( $(this).index() ).text();
if ($(this).index() != colIdxIgnore) {
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
}
} );
// DataTable
var table = $('#' + tableID).DataTable();
// Apply the search
if(table.columns().eq(0) != null){
table.columns().eq( 0 ).each( function ( colIdx ) {
$( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
table
.column( colIdx )
.search( this.value )
.draw();
} );
} );
}
table.destroy();
}
还有另一个js文件,它也会再次初始化数据表。这是该js文件的链接 - [js file] http://208.68.38.122/themes/emerald/dev/javascripts/application.js
现在,如果我有一个超过12-15列的数据表并在浏览器中打开数据表页面,则会隐藏一些列,这是预期的。如果我单击一行,将显示隐藏的列。但由于数据表的双重初始化,隐藏列显示两次,如下面的屏幕截图所示。
提前致谢。