jquery - dataTables columnDefs 重新加载时更改
问题描述
我在一个函数中调用dataTables()
了一个函数,因为我将它用于多个事件,并且最初是从$(document).ready()
. 它在初始调用时按预期工作。有一个事件侦听器在两个选择框 ( #jobtype
, #jobstatus
) 中的任何一个.filter
更改时触发。此事件侦听loadtable()
器再次调用该函数。根据选择框返回正确的数据,但列宽全部关闭。我的整个<script>
标签在下面。
在第二次调用中数据更广泛也不是问题。
我在哪里错过了为什么列宽属性会发生变化?
<script>
var table;
function loadtable() {
var jobtype = $('#jobtype').val();
var status = $('#jobstatus').val();
if (table) {
table.destroy();
};
table = $('#events').DataTable({
'processing': true,
'serverSide': true,
'pageLength': 25,
'lengthMenu': [[10, 15, 20, 25, 50], [10, 15, 20, 25, 50]],
'ajax': {
'url': 'LoadEvents/' + jobtype + '/' + status,
'type': 'POST',
'dataType': 'json'
},
'columns': [
{ 'data': 'Id', 'name': 'Id' }, // 0
{ 'data': 'JobNumber', 'name': 'JobNumber' }, // 1
{ 'data': 'JobType', 'name': 'JobType' }, // 2
{ 'data': 'Status', 'name': 'Status' }, // 3
{ 'data': 'JobDateTime', 'name': 'JobDateTime' }, // 4
{ 'data': 'LogText', 'name': 'LogText' }, // 5
{ 'data': 'FullLog', 'name': 'FullLog' }, // 6
{ 'data': 'XML', 'name': 'XML' }, // 7
{ 'data': 'FullXML', 'name': 'FullXML' } // 8
],
'columnDefs': [
{ 'visible': false, 'targets': [0, 6, 8] },
{ 'sortable': false, 'targets': [0] },
{ 'width': '25px', 'targets': [1] },
{ 'width': '150px', 'targets': [2] },
{ 'width': '125px', 'targets': [4] },
{ 'width': '50px', 'targets': [3] },
{
'render': function(data, type, row) {
return '<span class="expand" data-type="log" id="' + row.Id + '">' + data + '<span style="display: none">' + row.FullLog + '</span></span>';
},
'targets': 5
},
{
'render': function(data, type, row) {
return '<span class="expand" data-type="xml" id="' + row.Id + '">' + data + '<span style="display: none">' + row.FullXML + '</span></span>';
},
'targets': 7
}
],
'order': [
[4, 'desc']
]
});
}
$(document).ready(function () {
loadtable();
});
$(document).on('change',
'.filter',
function() {
loadtable();
});
</script>
解决方案
推荐阅读
- c++ - C++20 线程可能永远在 std::atomic 上等待
- swift - 如何修复无法转换“字符串”类型的值?到预期的参数类型'URL'
- node.js - 使用 Gradle 管理 NodeJS + TS/Flutter 项目
- javascript - Draft-Js 没有使用图像 URL 显示我的图像
- python - Python追加多个元素
- jquery - 如何在 Asp.NET MVC 中使用复选框创建多选下拉菜单
- docker - Docker 日志记录 Efk 7.10.1 撰写 ECONNREFUSED
- php - 目标类 [UserController] 不存在 Laravel 8
- python - 具有线性约束的非凸优化
- tailwind-css - Tailwind - 为什么与 Bootstrap 不同,移动设备的无前缀类?