数据表初始化发生了两次

时间:2015-03-05 06:47:17

标签: jquery twitter-bootstrap datatable jquery-datatables

我有一个响应的数据表,如下所示:

<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列的数据表并在浏览器中打开数据表页面,则会隐藏一些列,这是预期的。如果我单击一行,将显示隐藏的列。但由于数据表的双重初始化,隐藏列显示两次,如下面的屏幕截图所示。

Datatable hidden columns issue

提前致谢。

0 个答案:

没有答案