DataTables.net 宽度不适用于排序
DataTables.net Width not working with Sort
我正在使用 DataTables.net 来填充 table,但是,我无法使用“宽度”选项。我已经尝试了几个 DataTables 选项来做到这一点,但都没有成功,所以我创建了一个 CSS 函数来手动控制宽度并且有效。
然而,为了应用我的 CSS 函数,我需要在那个 <td>
上添加一个 class 和一个 <div>
,这需要我做一个 render: function()
.
一旦我这样做了,现在我的排序就不起作用了。所以我需要找到一种方法让 DataTable 正确设置我的宽度,或者让它与 <div>
中的数据一起排序
这是我的 table:
mobileTable = $('#MobileTable #mobileTransaction').DataTable({
data: mobileData,
cache: false,
retrieve: true,
order: [0, "desc"],
lengthMenu: [25, 50, 75, 100],
columnDefs: [
{ type: 'date', targets: 0 },
//{ width: "1%", targets: 0 }
],
columns: [
{
data: null,
title: 'Date',
render: function (data, type, full, meta) {
return '<div class="text-wrap width-date">' + full.settledate + '</div>'
}
},
{
data: null,
title: "Description",
render: function (data, type, full, meta) {
return '<div class="text-wrap width-narr">' + full.narratives + '</div>'
}
},
{
data: null,
orderable: false,
render: function (data, type, full, meta) {
return '<td><div id="ExpandTransaction" data-id="' + full.id + '" class="btn btn-warning btn-anim btn-square width-exp"><i></i><span class="btn-text fa fa-search-plus pt-10"></span></div></td>'
}
}
]
});
和CSS
.text-wrap {
white-space: normal;
}
.width-narr {
width: 150px;
}
.width-date {
width: 50px;
}
此外,如果有一种方法可以设置整体 table 宽度以适合您的屏幕尺寸,那将是理想的选择,因为这基本上就是我通过手动设置列宽所做的事情。
TL;DR 如何在允许排序的情况下设置列宽。
将样式添加为 columnDef 而不是单独的 CSS 函数就成功了:
mobileTable = $('#MobileTable #mobileTransaction').DataTable({
data: mobileData,
cache: false,
retrieve: true,
order: [0, "desc"],
lengthMenu: [25, 50, 75, 100],
columnDefs: [
{
"targets": 0,
"createdCell": function (td, cellData, rowData, row, col) {
$(td).css('max-width', '50px')
}
},
{
"targets": 1,
"createdCell": function (td, cellData, rowData, row, col) {
$(td).css('max-width', '150px')
$(td).css('white-space', 'normal')
}
},
{ type: 'date', targets: 0 }
],
columns: [
{
data: 'settleDate',
title: 'Date'
},
{
data: 'narratives',
title: "Description"
},
{
data: null,
orderable: false,
render: function (data, type, full, meta) {
return '<div id="ExpandTransaction" data-id="' + full.id + '" class="btn btn-warning btn-anim btn-square width-exp"><i></i><span class="btn-text fa fa-search-plus pt-10"></span></div>'
}
}
]
});
我正在使用 DataTables.net 来填充 table,但是,我无法使用“宽度”选项。我已经尝试了几个 DataTables 选项来做到这一点,但都没有成功,所以我创建了一个 CSS 函数来手动控制宽度并且有效。
然而,为了应用我的 CSS 函数,我需要在那个 <td>
上添加一个 class 和一个 <div>
,这需要我做一个 render: function()
.
一旦我这样做了,现在我的排序就不起作用了。所以我需要找到一种方法让 DataTable 正确设置我的宽度,或者让它与 <div>
这是我的 table:
mobileTable = $('#MobileTable #mobileTransaction').DataTable({
data: mobileData,
cache: false,
retrieve: true,
order: [0, "desc"],
lengthMenu: [25, 50, 75, 100],
columnDefs: [
{ type: 'date', targets: 0 },
//{ width: "1%", targets: 0 }
],
columns: [
{
data: null,
title: 'Date',
render: function (data, type, full, meta) {
return '<div class="text-wrap width-date">' + full.settledate + '</div>'
}
},
{
data: null,
title: "Description",
render: function (data, type, full, meta) {
return '<div class="text-wrap width-narr">' + full.narratives + '</div>'
}
},
{
data: null,
orderable: false,
render: function (data, type, full, meta) {
return '<td><div id="ExpandTransaction" data-id="' + full.id + '" class="btn btn-warning btn-anim btn-square width-exp"><i></i><span class="btn-text fa fa-search-plus pt-10"></span></div></td>'
}
}
]
});
和CSS
.text-wrap {
white-space: normal;
}
.width-narr {
width: 150px;
}
.width-date {
width: 50px;
}
此外,如果有一种方法可以设置整体 table 宽度以适合您的屏幕尺寸,那将是理想的选择,因为这基本上就是我通过手动设置列宽所做的事情。
TL;DR 如何在允许排序的情况下设置列宽。
将样式添加为 columnDef 而不是单独的 CSS 函数就成功了:
mobileTable = $('#MobileTable #mobileTransaction').DataTable({
data: mobileData,
cache: false,
retrieve: true,
order: [0, "desc"],
lengthMenu: [25, 50, 75, 100],
columnDefs: [
{
"targets": 0,
"createdCell": function (td, cellData, rowData, row, col) {
$(td).css('max-width', '50px')
}
},
{
"targets": 1,
"createdCell": function (td, cellData, rowData, row, col) {
$(td).css('max-width', '150px')
$(td).css('white-space', 'normal')
}
},
{ type: 'date', targets: 0 }
],
columns: [
{
data: 'settleDate',
title: 'Date'
},
{
data: 'narratives',
title: "Description"
},
{
data: null,
orderable: false,
render: function (data, type, full, meta) {
return '<div id="ExpandTransaction" data-id="' + full.id + '" class="btn btn-warning btn-anim btn-square width-exp"><i></i><span class="btn-text fa fa-search-plus pt-10"></span></div>'
}
}
]
});