Панель администратора Metronic Datatable Видимость столбца

Я использую Metronic Datatable и хочу скрыть некоторые столбцы ID. Как мне это сделать?

Вот мой скрипт инициализации с данными, и я хочу скрыть столбцы «site_id», «kazan_id», «boyler_id». Я попробовал вариант columnDefs, но он не сработал.

$('#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
        }
    ]
});

person Aykut Demirci    schedule 08.02.2019    source источник


Ответы (1)


Metronic использует плагин jquery datatables, который можно найти здесь.

Просто изменение столбцов, которые вы хотите скрыть, на следующий код должно работать. Я только что добавил visible: false в столбцы. Вы можете удалить columnDefs после внесения этого изменения.

$('#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
        }
    ]
});
person Priyank Panchal    schedule 13.06.2019