### 回答1：
以下是一个示例代码，实现了Data
tables
表格的固定高度和
拖动列宽的功能：
HTML：
```
html
<
table id="example"
class="display" style="width:100%">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>Row 1 Data 3</td>
<td>Row 1 Data 4</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>Row 2 Data 3</td>
<td>Row 2 Data 4</td>
</tr>
<tr>
<td>Row 3 Data 1</td>
<td>Row 3 Data 2</td>
<td>Row 3 Data 3</td>
<td>Row 3 Data 4</td>
</tr>
</tbody>
</
table>
```
JavaScript：
```
javascript
$(document).ready(
function() {
var
table = $('#example').Data
Table({
scrollY: 'calc(100vh - 200px)', //设置
表格高度
scrollCollapse: true,
paging: false,
columnDefs: [
{ width: "20%", targets: 0 }, //设置每
列的初始
宽度
{ width: "20%", targets: 1 },
{ width: "30%", targets: 2 },
{ width: "30%", targets: 3 },
{ resizable: false, targets: [0,1] } //禁用第一
列和第二
列的
拖动列宽功能
],
//启用
拖动列宽功能
initComplete:
function() {
this.api().columns().every(
function() {
var column = this;
var colHeader = $(column.header());
colHeader.append('<div
class="resizer"></div>');
colHeader.on('mousedown', '.resizer',
function(event) {
event.preventDefault();
var startX = event.pageX;
var
tableWidth = $('#example').width();
$(document).on('mousemove',
function(event) {
var change = event.pageX - startX;
var newWidth = column.width() + change;
if (newWidth > 50 && newWidth < (
tableWidth-100)) {
column.width(newWidth);
}
});
});
});
$(document).on('mouseup',
function(event) {
$(document).unbind('mousemove');
});
}
});
});
```
CSS：
```css
table.data
Table thead .resizer {
width: 5px;
height: 100%;
position: absolute;
top: 0;
right: 0;
cursor: col-resize;
z-index: 100;
}
table.data
Table thead .resizer:hover {
background-color: lightgray;
}
```
注意，为了实现
拖动列宽的功能，我们给表头的每一
列添加了一个可
拖动的元素。在CSS中，我们定义了这个元素的样式和行为。在
JavaScript中，我们使用了jQuery的事件处理机制来绑定
拖动列宽的逻辑。具体来说，我们在initComplete回调函数中，使用this.api().columns().every()方法来遍历每一
列，并给每一
列的表头添加了一个可
拖动的元素。在这个元素上，我们绑定了mousedown事件，用来开始
拖动操作。在这个事件回调函数中，我们记录下了当前
鼠标的位置，并在document上绑定mousemove事件，来实时更新
列宽。在mousemove事件回调函数中，我们计算
鼠标在x轴方向上的位移，然后将这个位移加到当前
列宽上，以实时更新
列宽。注意，我们还加了一些限制条件，来避免
列宽过小或过大的情况。最后，在mouseup事件回调函数中，我们解除了document上的mousemove事件的绑定，以结束
拖动操作。
### 回答2：
以下是设置data
tables
表格固定高度和
拖动列宽的完整代码：
HTML部分：
```
html
<!DOCTYPE
html>
<
html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.data
tables.net/1.10.25/css/jquery.data
Tables.css">
<style>
#
table-container {
height: 300px; /* 设置
表格的固定高度 */
overflow-y: scroll; /* 设置垂直滚动条 */
}
</style>
</head>
<body>
<div id="
table-container">
<
table id="my
Table"
class="display">
<thead>
<tr>
<th>
列1</th>
<th>
列2</th>
<th>
列3</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
</tr>
<tr>
<td>数据4</td>
<td>数据5</td>
<td>数据6</td>
</tr>
<!-- 其他数据行 -->
</tbody>
</
table>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.
js" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"></script>
<script src="https://cdn.data
tables.net/1.10.25/
js/jquery.data
Tables.
js"></script>
<script>
$(document).ready(
function() {
$('#my
Table').Data
Table({
// 添加其他解决方案选项
});
});
</script>
</body>
</
html>
```
上述代码中，我们添加了一个外部的CSS样式部分，通过设置`#
table-container`的高度为300像素，并设置`overflow-y: scroll;`来创建垂直滚动条。这样，
表格将在该容器内固定高度显示，并提供垂直滚动条以滚动查看更多内容。
在
JavaScript部分，我们使用了`data
table()`函数来初始化data
tables
表格，并通过为其增加其他解决方案选项来实现其他功能，如
列拖动等。
### 回答3：
下面是一个使用data
tables来实现
表格固定高度和
拖动列宽的完整代码示例：
在
HTML文件中，需要引入data
tables库和相关的CSS文件和
JavaScript文件：
```
html
<!DOCTYPE
html>
<
html>
<head>
<title>Data
tables固定高度和
拖动列宽示例</title>
<link rel="stylesheet" type="text/css" href="https://cdn.data
tables.net/1.10.25/css/jquery.data
Tables.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.
js"></script>
<script src="https://cdn.data
tables.net/1.10.25/
js/jquery.data
Tables.min.
js"></script>
</head>
<body>
<
table id="my
Table"
class="display" style="width:100%"></
table>
</body>
</
html>
```
在
JavaScript文件中，初始化和配置data
tables
表格，并设置固定高度和
拖动列宽：
```
javascript
$(document).ready(
function() {
// 初始化
表格
$('#my
Table').Data
Table({
scrollY: '300px', // 设置固定高度
scrollCollapse: true, // 当
表格内容不足高度时，是否自动收缩高度
columnDefs: [
{ resizable: true,
className: 'dt-center' } // 设置所有
列可
拖动调整
宽度，并居中显示
],
ajax: {
url: 'your_api_endpoint', // 填写获取
表格数据的API地址
dataSrc: 'data' // 数据源字段名，例如{ "data": [...] }
},
columns: [
{ data: 'column1', title: '
列1' }, //
列1数据来源和标题
{ data: 'column2', title: '
列2' }, //
列2数据来源和标题
// 可以添加更多
列...
]
});
});
```
上述代码通过`scrollY`属性实现了固定高度，`scrollCollapse`属性用于根据
表格内容自动收缩高度。通过`columnDefs`配置设置所有
列可
拖动调整
宽度，并使用`
className`来添加样式，居中显示
列内容。通过`ajax`属性配置获取
表格数据的API地址，并通过`dataSrc`指定数据源字段名。通过`columns`属性配置
表格的各
列，包括数据来源和标题。
以上是一个简单的使用data
tables实现
表格固定高度和
拖动列宽的完整代码示例，你可以根据自己的实际需求进行进一步的配置和定制。
最低0.47元/天 解锁文章
1078
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
