datatable一些使用

<link rel="stylesheet" href="/assets/css/dataTables.bootstrap.min.css" />
<script src="/assets/js/bootstrap.js"></script>
<script src="/assets/js/jquery.dataTables.js"></script>
<script src="/assets/js/jquery.dataTables.bootstrap.js"></script>

初始化

$(".table").dataTable({
   info: false,
   paging: false,
   searching: false,
});

 

固定首行（ps:不支持首行橫向滾動）

<link rel="stylesheet" href="/assets/js/datatables-fiexedheader/fixedHeader.bootstrap.min.css" />
<script src="/assets/js/datatables-fiexedheader/dataTables.fixedHeader.min.js"></script>

$("#aaa").dataTable({
   info: false,
   paging: false,
   searching: false,
   fixedHeader: true,
})

解決與bootstrap tab同時使用重複干擾的問題

var config = {
    info: false,
    paging: false,
    searching: false,
    fixedHeader : true,
};
$("a[data-toggle=tab]").on('show.bs.tab', function(e) {
      var cur = ($(e.target).attr("href"));
      preTable.fixedHeader.disable();
      preTable.destroy();
      preTable = $("#b_table").DataTable(config);
}
  }).on("shown.bs.tab", function(e){
      if(preTable != undefined){
          preTable.fixedHeader.enable();
      }
  });
  var preTable = $("#a_table").DataTable(config);

 

固定首列

<link rel="stylesheet" href="/assets/js/datatables-fixedcolumns/fixedColumns.bootstrap.min.css" />
<script src="/assets/js/datatables-fixedcolumns/dataTables.fixedColumns.min.js"></script>

$("#table").dataTable({
   info: false,
   paging: false,
   searching: false,
   fixedColumns :true,
   scrollX:true,//這個屬性必定要加
});   

解決與bootstrap tab同時使用切換後表格被隱藏的問題

$("#a,#b_table,#c_table").on( 'init.dt', function (e) {
    //解決切換tab 樣式變的很奇怪
    var table = $($(e.target).parents('div.dataTables_wrapper'));
    table.each(function(){
        var that = $(this);
       if(typeof(that.attr("id"))!="undefined"){
              that.css('height', that.parents("div.tab").height());
      }
   });

   }).dataTable({
   info: false,
   paging: false,
   searching: false,
       fixedColumns: true,
       fixedHeader: true,
       scrollX : true
})