datatable一些使用

最新推荐文章于 2019-10-11 17:22:31 发布

weixin_33725807

最新推荐文章于 2019-10-11 17:22:31 发布

阅读量107

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/232595/blog/837437

版权

2019独角兽企业重金招聘Python工程师标准>>>

<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
})

转载于:https://my.oschina.net/u/232595/blog/837437