Question

我在使用bootstrap DataTable时遇到了这个问题。有谁能告诉我合并这两个功能的正确方法，以避免重新初始化错误？

这就是我现在所拥有的。

<script type="text/javascript">
$(document).ready(function() {
    $('table.display').DataTable();

    var oTable = $('table.display').dataTable();
    oTable.fnSort( [ [8,'desc'] ] );
});

var table = $("table.display").dataTable({
    language: {
        sLengthMenu: "Show _MENU_"
    }
});
</script>

现在我要添加此功能。

$(document).ready(function() {
    $('table.display').DataTable( {
        "scrollX": true
    } );
} );

这样做会让我重新初始化错误。

<script type="text/javascript">
$(document).ready(function() {
    $('table.display').DataTable({
        "scrollX": true
    });

    var oTable = $('table.display').dataTable();
        oTable.fnSort( [ [8,'desc'] ] );
});

var table = $("table.display").dataTable({
    language: {
        sLengthMenu: "Show _MENU_"
    }
});
</script>

这样做的正确方法是什么？

Answer 1

好吧所以我非常专注于脚本，我没有注意到你需要声明nowrap到表格以使其生效的文档。添加nowrap类修复了这个问题

<table id="" class="table-striped table-bordered table-hover display nowrap" cellspacing="0">

</table>

<script type="text/javascript">
  $(document).ready(function() {
      $('table.display').DataTable();

      var oTable = $('table.display').dataTable();
            oTable.fnSort( [ [8,'desc'] ] );


});

  var table = $("table.display").dataTable({
    "scrollX": true,
    language : {
        sLengthMenu: "Show _MENU_"

    }
});
</script>

bootstrap数据表函数

1 个答案: