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

时间：2019-01-04 08:04:13

标签： 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部分是静态的，在{{ 1}}。

要复制该问题，请调整浏览器的大小并水平滚动，是否可以使用其他资源？

1 个答案:

答案 0 :(得分：2)

我建议在scrollX: "100%"选项中添加scrollX（通常，如果使用scrollY，则需要datatables），在width: 100%中添加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 }); CSS中的表格，这应该可以解决您的问题。请检查下面的代码，并在底部链接小提琴。 

#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>
PublicKeyCredential

提琴：https://jsfiddle.net/bucvf6ek/2/

相关问题
最新问题