Javascript Metronic管理面板数据表列可见性
我正在使用Metronic Datatable,我想隐藏一些ID列。我怎么做 这是我的数据表初始化脚本,我想隐藏“site\u id”、“kazan\u id”、“boyler\u id”列。我尝试了columnDefs选项,但没有成功Javascript Metronic管理面板数据表列可见性,javascript,metronic,Javascript,Metronic,我正在使用Metronic Datatable,我想隐藏一些ID列。我怎么做 这是我的数据表初始化脚本,我想隐藏“site\u id”、“kazan\u id”、“boyler\u id”列。我尝试了columnDefs选项,但没有成功 $('#tbl-boiler').mDatatable({ data: { type: 'remote', source: { read: { url: '/Comp
$('#tbl-boiler').mDatatable({
data: {
type: 'remote',
source: {
read: {
url: '/Company/GetBoilers/' + siteId,
}
},
},
sortable: false,
pagination: false,
rows: { autoHide: true },
columnDefs:[
{
targets: 0,
visible: false
}
],
columns: [
{
field: 'site_id',
title: 'site_id',
width: 100
},
{
field: 'kazan_id',
title: 'kazan_id',
width: 100
},
{
field: 'boyler_id',
title: 'boyler_id',
width: 100
},
{
field: 'okuma_ucreti',
title: 'Okuma Ücreti',
width: 100
},
{
field: 'kazan_no',
title: 'Kazan Numarası',
width: 120
},
{
field: 'kazan_sayac_no',
title: 'Kazan Sayaç Numarası',
width: 165
},
{
field: 'boyler_no',
title: 'Boyler Numarası',
width: 120
},
{
field: 'boyler_sayac_no',
title: 'Boyler Sayaç Numarası',
width: 170
},
{
field: 'blok_sayisi',
title: 'Bloklar',
width: 250
},
{
field: 'daire_sayisi',
title: 'Daireler',
width: 250
},
{
field: 'sayac_sayisi',
title: 'Sayaclar',
width: 250
},
{
field: 'actions',
title: 'İşlemler',
sortable: !1,
overflow: 'visible',
template: function (t) {
return '<a data-toggle="modal" data-target="#siteform" onclick="getBoiler(' + t.kazan_id + ');" class="edit-site m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" title="Kazan Bilgilerini Düzenle">' +
'<i class="la la-edit"></i>' +
'</a>' +
'<a onclick="deleteBoiler(' + t.kazan_id + ')" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" title="Kazanı Sil">' +
'<i class="la la-trash"></i>' +
'</a>';
},
width: 250
}
]
});
Metronic使用可以找到的jquery datatables插件 只需将要隐藏的列更改为以下代码即可。 我刚刚在列中添加了visible:false。进行此更改后,可以删除ColumnDef
$('#tbl-boiler').mDatatable({
data: {
type: 'remote',
source: {
read: {
url: '/Company/GetBoilers/' + siteId,
}
},
},
sortable: false,
pagination: false,
rows: { autoHide: true },
columns: [
{
field: 'site_id',
title: 'site_id',
visible: false
},
{
field: 'kazan_id',
title: 'kazan_id',
visible: false
},
{
field: 'boyler_id',
title: 'boyler_id',
visible: false
},
{
field: 'okuma_ucreti',
title: 'Okuma Ücreti',
width: 100
},
{
field: 'kazan_no',
title: 'Kazan Numarası',
width: 120
},
{
field: 'kazan_sayac_no',
title: 'Kazan Sayaç Numarası',
width: 165
},
{
field: 'boyler_no',
title: 'Boyler Numarası',
width: 120
},
{
field: 'boyler_sayac_no',
title: 'Boyler Sayaç Numarası',
width: 170
},
{
field: 'blok_sayisi',
title: 'Bloklar',
width: 250
},
{
field: 'daire_sayisi',
title: 'Daireler',
width: 250
},
{
field: 'sayac_sayisi',
title: 'Sayaclar',
width: 250
},
{
field: 'actions',
title: 'İşlemler',
sortable: !1,
overflow: 'visible',
template: function (t) {
return '<a data-toggle="modal" data-target="#siteform" onclick="getBoiler(' + t.kazan_id + ');" class="edit-site m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" title="Kazan Bilgilerini Düzenle">' +
'<i class="la la-edit"></i>' +
'</a>' +
'<a onclick="deleteBoiler(' + t.kazan_id + ')" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" title="Kazanı Sil">' +
'<i class="la la-trash"></i>' +
'</a>';
},
width: 250
}
]
});