javascript - DataTable 在小型设备上无法正确呈现

标签 javascript jquery html css datatable

我有一个正常工作的数据表，但我面临的问题是当我在小型设备上使用同一个表时，它无法正常工作

片段

var data = [{
    "amount": 518212,
    "billdate": "2018-08-04",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 104801,
    "billdate": "2018-08-04",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 138151,
    "billdate": "2018-08-04",
    "outlet": "KOLAR"
  },
  {
    "amount": 628358,
    "billdate": "2018-08-05",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 115223,
    "billdate": "2018-08-05",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 134107,
    "billdate": "2018-08-05",
    "outlet": "KOLAR"
  },
  {
    "amount": 177866,
    "billdate": "2018-08-06",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 66095,
    "billdate": "2018-08-06",
    "outlet": "KOLAR"
  },
  {
    "amount": 284069,
    "billdate": "2018-08-07",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58789,
    "billdate": "2018-08-07",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 67886,
    "billdate": "2018-08-07",
    "outlet": "KOLAR"
  },
  {
    "amount": 313128,
    "billdate": "2018-08-08",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 59939,
    "billdate": "2018-08-08",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 68558,
    "billdate": "2018-08-08",
    "outlet": "KOLAR"
  },
  {
    "amount": 321797,
    "billdate": "2018-08-09",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 64431,
    "billdate": "2018-08-09",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 57352,
    "billdate": "2018-08-09",
    "outlet": "KOLAR"
  },
  {
    "amount": 323556,
    "billdate": "2018-08-10",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58772,
    "billdate": "2018-08-10",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 43722,
    "billdate": "2018-08-10",
    "outlet": "KOLAR"
  },
  {
    "amount": 464127,
    "billdate": "2018-08-11",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 93110,
    "billdate": "2018-08-11",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 62213,
    "billdate": "2018-08-11",
    "outlet": "KOLAR"
  },
  {
    "amount": 626772,
    "billdate": "2018-08-12",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 126933,
    "billdate": "2018-08-12",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 63119,
    "billdate": "2018-08-12",
    "outlet": "KOLAR"
  },
  {
    "amount": 167391,
    "billdate": "2018-08-13",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 27110,
    "billdate": "2018-08-13",
    "outlet": "KOLAR"
  },
  {
    "amount": 275115,
    "billdate": "2018-08-14",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58633,
    "billdate": "2018-08-14",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 37920,
    "billdate": "2018-08-14",
    "outlet": "KOLAR"
  }
];
var columndef = [{
  title: "amount",
  data: "amount"
}, {
  title: "billdate",
  data: "billdate"
}, {
  title: "outlet",
  data: "outlet"
}];
$('#tbl').DataTable({
  columns: columndef,
  data: data,
  scrollY: '50vh',
  scrollCollapse: true,
  paging: false
});
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

<table id="tbl" class="table table-striped table-bordered "></table>

现在在大型设备上发生的情况它工作正常，但是当我在小型设备上使用它时，tbody部分正确水平滚动，但thead部分是静态的在 ui 上看起来不太好。

要重现该问题，请调整浏览器大小并水平滚动是否有替代资源可以用于此目的？

最佳答案

我建议向您的 添加 scrollX: "100%" (如果您使用 scrollY，通常需要 scrollX) >datatables 选项以及 width: 100% 到你的 CSS 中的表格，这应该可以解决你的问题。请检查下面的代码和底部链接的 fiddle 。 

var data = [{
    "amount": 518212,
    "billdate": "2018-08-04",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 104801,
    "billdate": "2018-08-04",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 138151,
    "billdate": "2018-08-04",
    "outlet": "KOLAR"
  },
  {
    "amount": 628358,
    "billdate": "2018-08-05",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 115223,
    "billdate": "2018-08-05",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 134107,
    "billdate": "2018-08-05",
    "outlet": "KOLAR"
  },
  {
    "amount": 177866,
    "billdate": "2018-08-06",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 66095,
    "billdate": "2018-08-06",
    "outlet": "KOLAR"
  },
  {
    "amount": 284069,
    "billdate": "2018-08-07",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58789,
    "billdate": "2018-08-07",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 67886,
    "billdate": "2018-08-07",
    "outlet": "KOLAR"
  },
  {
    "amount": 313128,
    "billdate": "2018-08-08",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 59939,
    "billdate": "2018-08-08",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 68558,
    "billdate": "2018-08-08",
    "outlet": "KOLAR"
  },
  {
    "amount": 321797,
    "billdate": "2018-08-09",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 64431,
    "billdate": "2018-08-09",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 57352,
    "billdate": "2018-08-09",
    "outlet": "KOLAR"
  },
  {
    "amount": 323556,
    "billdate": "2018-08-10",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58772,
    "billdate": "2018-08-10",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 43722,
    "billdate": "2018-08-10",
    "outlet": "KOLAR"
  },
  {
    "amount": 464127,
    "billdate": "2018-08-11",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 93110,
    "billdate": "2018-08-11",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 62213,
    "billdate": "2018-08-11",
    "outlet": "KOLAR"
  },
  {
    "amount": 626772,
    "billdate": "2018-08-12",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 126933,
    "billdate": "2018-08-12",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 63119,
    "billdate": "2018-08-12",
    "outlet": "KOLAR"
  },
  {
    "amount": 167391,
    "billdate": "2018-08-13",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 27110,
    "billdate": "2018-08-13",
    "outlet": "KOLAR"
  },
  {
    "amount": 275115,
    "billdate": "2018-08-14",
    "outlet": "JAYANAGAR"
  },
  {
    "amount": 58633,
    "billdate": "2018-08-14",
    "outlet": "MALLESHWARAM"
  },
  {
    "amount": 37920,
    "billdate": "2018-08-14",
    "outlet": "KOLAR"
  }
];
var columndef = [{
  title: "amount",
  data: "amount"
}, {
  title: "billdate",
  data: "billdate"
}, {
  title: "outlet",
  data: "outlet"
}];
$('#tbl').DataTable({
  columns: columndef,
  "columnDefs": [{
    "className": "dt-left",
    "targets": "_all"
  }],
  data: data,
  scrollY: "50vh",
  responsive: true,
  paging: false,
  scrollX: "100%",
  scrollCollapse: true
});
#tbl {
  width: 100%!important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">

<table id="tbl" class="table table-striped table-bordered "></table>

fiddle :https://jsfiddle.net/bucvf6ek/2/

关于javascript - DataTable 在小型设备上无法正确呈现，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54035127/

上一篇：html - 如何在 angularjs 中保持可折叠 div 的第一部分打开

下一篇：javascript - 当我 console.log 父节点时，为什么子节点在输入元素之前给我文本？

相关文章：

php - Javascript 函数接受 PHP 变量

javascript - Leaflet.draw映射: How to initiate the draw function without toolbar?

javascript - 有没有办法给每个 div 一个唯一的 id 而不必每次都输入它？

javascript - Jquery mobile在更改页面后无法加载样式

javascript - JQuery 选择插件上的单击事件

javascript - 用 mongoose 更新子字段

javascript - 访问 View 源而不是准备好的 DOM

html - 一页中的元素并设置一种字体大小但显示不同？

javascript - GSM 扩展无法在 Web 浏览器上播放

html - 如何在 <li> 中添加图像

©2024 IT工具网  联系我们