這是我的JavaScript代碼和我的頁腳參考和頁眉參考。問題是我的設計在第一個地方顯示的是錯誤的設計，但當我點擊表頭時，它顯示的是正確的設計。
< link rel="styleheet" href="~/css/bootstrap. min.css" >
<link href="https://fonts.googleapis. com/css2?family=Montserrat:wght@700;800;900&display=swap" rel="styleheet">
<! --fontawesome->
<link rel="styleheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384- fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://cdn.datatables. net/1.11.1/css/jquery.dataTables.min.css" rel="styleheet" />
<link rel="styleheet" href="~/font/flaticon. css">
<link rel="styleheet" href="~/css/StyleSheet. css">
$(document).ready(function () {
$('#draft-data-table').DataTable({
processing: true, // 用于顯示進度條
serverSide: false, //用于處理服務器端
filter: true, // 用于禁用過濾器（搜索框）。
orderMulti: false, // 用于一次禁用多列。
"pagingType": "full_numbers",
pageLength: 5,
lengthMenu: [1, 3, 5, 20, 50, 100, 200, 500],
deferRender: true,
paging: true,
scrollY: 200,
scrollCollapse: true,
scroller: true,
});
});```
``<script src="~/js/jquery-3. 5.1.js"></script>/span>
<script src="~js/popper. min.js" ></script>
<script src="~/js/bootstrap. min.js" ></script>
<script src="https://cdn. datatables.net/1.11.1/js/jquery.dataTables.min.js"></script>/span>
<script src="~/js/site. js" asp-append-version="true">< /script>
<script src="~/libt/signalr/dist/browser/signalr。 js"></script>```。
uj5u.com熱心網友回復：
從對該問題的研究來看，發生這種情況是因為你啟用了scrollY，但沒有啟用scrollX.
。如果你使用的是垂直滾動（scrollY）而不是水平滾動 (scrollX)，請啟用水平滾動選項，以便表格有空間可以滾動。
在你啟用scrollX選項后，在你的CSS樣式表中添加以下內容：
table.dataTable tbody th,
table.dataTable tbody td {
white-space: nowrap;
$(document)。 ready(function () {
var table = $('#draft-data-table').DataTable({
processing: true, //用于顯示進度條。
serverSide: false, //用于處理服務器端。
過濾器。true, //this is for disable filter (search box)
orderMulti: false, //用于禁用一次多列。
"pagingType"。"full_numbers",
pageLength: 5,
lengthMenu: [1, 3, 5, 20, 50, 100, 200, 500】。]
deferRender: true,
paging: true,
scrollY: 200,
scrollX: true,
scrollCollapse: true,
scroller: true,
});
});<head>/span>
<!--風格-->
<link rel="styleheet" href="~/css/bootstrap。 min.css" >
<link href="https://fonts.googleapis. com/css2?family=Montserrat:wght@700;800;900&display=swap" rel="styleheet">
<!-fontawesome->
<link rel="styleheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
integrity="sha384- fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link href="https://cdn.datatables. net/1.11.1/css/jquery.dataTables.min.css" rel="styleheet" />
<link rel="styleheet" href="~/font/flaticon. css">
<link rel="styleheet" href="~/css/StyleSheet. css">
<!-Scripts-->
<script src="~/js/jquery-3. 5.1.js"></script>/span>
<script src="~js/popper. min.js" ></script>
<script src="~/js/bootstrap. min.js" ></script>
<script src="https://cdn. datatables.net/1.11.1/js/jquery.dataTables.min.js"></script>/span>
</head>另一個解決方法是使用DataTables網站上記錄的columns.adjust()參考這里。
這就是重新計算表格的列寬。請確保你在表格初始化后呼叫table.columns.adjust().draw();
$(document).ready(function () {
var table = $('#draft-data-table').DataTable({
processing: true, //用于顯示進度條。
serverSide: false, //用于處理服務器端。
過濾器。true, //this is for disable filter (search box)
orderMulti: false, //用于禁用一次多列。
"pagingType"。"full_numbers",
pageLength: 5,
lengthMenu: [1, 3, 5, 20, 50, 100, 200, 500】。]
deferRender: true,
paging: true,
scrollY: 200,
scrollX: true,
scrollCollapse: true,
scroller: true,
});
table.columns.adjust().draw() 。
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/332802.html
標籤：