tv7playlist/Tv7Playlist/Views/Home/Index.cshtml

@model HomeModel;
@{
    ViewData["Title"] = "TV7 Playlist";
}

<form method="post">
    <div class="row">
        <div class="col col-12">
            <table class="table table-hover table-striped" id="playlistTable">
                <thead>
                <tr>
                    <th></th>
                    <th></th>
                    <th>Number Import</th>
                    <th>Number Export</th>
                    <th>Position</th>
                    <th>Name</th>
                    <th>EPG Name</th>
                    <th>Enabled</th>
                    <th>Available</th>
                    <th>URL Proxy</th>
                    <th>URL Original</th>
                    <th>Created</th>
                    <th>Modified</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot>
                    <th></th>
                    <th></th>
                    <th>Number Import</th>
                    <th>Number Export</th>
                    <th>Position</th>
                    <th>Name</th>
                    <th>EPG Name</th>
                    <th>Enabled</th>
                    <th>Available</th>
                    <th>URL Proxy</th>
                    <th>URL Original</th>
                    <th>Created</th>
                    <th>Modified</th>
                </tfoot>
            </table>
        </div>
    </div>
    <script>
const urlGet = '@Url.Action("GetAll", "ChannelApi")';
const urlEnable = '@Url.Action("EnableChannels", "ChannelApi")';
const urlDisable = '@Url.Action("DisableChannels", "ChannelApi")';
const urlDelete = '@Url.Action("DeleteChannels", "ChannelApi")';
const urlEdit = '@Url.Action("Edit", "PlaylistEntry")';

$(document).ready(function() {
    $('#playlistTable').DataTable({
        "ajax": urlGet,
        dom: 'Bfrtip',
        pageLength: 25,
        columns: [  
            {  
                data: null,
                render: function ( data, type, row ) {return null;}  
            },  
            {  
                data: "id",  
                name: "eq",  
                visible: false,  
                searchable: false  
            },  
            {  
                data: "channelNumberImport",  
            },
            {  
                data: "channelNumberExport",  
            },
            {  
                data: "position",  
            },
            {  
                data: "name",  
            },
            {  
                data: "epgMatchName",  
            },
            {  
                data: "isEnabled",
                searchable: false,  
                render: function ( data, type, row, meta ) {
                    if (data) {
                        return '<span class="text-primary">Enabled</span>'
                    } else {
                        return '<span class="text-danger">Disabled</span>'
                    }
                }  
            },
            {  
                data: "isAvailable",  
                searchable: false,  
                render: function ( data, type, row, meta ) {
                    if (data) {
                        return '<span class="text-primary">yes</span>'
                    } else {
                        return '<span class="text-danger">no</span>'
                    }
                }  
            },
            {  
                data: "urlProxy",  
            },
            {  
                data: "urlOriginal",  
            },
            {  
                data: "created",  
                searchable: false,  
                render: function ( data, type, row, meta ) {
                    return moment(data).format('YYYY-MM-DD HH:mm');
                }  
            },
            {  
                data: "modified",  
                searchable: false,  
                render: function ( data, type, row, meta ) {
                    return moment(data).format('YYYY-MM-DD HH:mm');
                }  
            }
        ],  
        columnDefs: [
            {
                orderable: false,
                searchable: false,
                className: 'select-checkbox',
                targets:   [0]
            },
            {
                visible: false,
                targets:   [1]
            },
            {
                orderable: false,
                targets:   [0,1,9,10]
            },
            {
                searchable: false,
                targets:   [0,9,10,11,12]
            },
        ],
        select: {
            style:    'multi',
            selector: 'td:first-child'
        },
        buttons: [
            'pageLength',
            'selectAll',
            'selectNone',
            {
                extend: 'selected',
                text: 'Disable selected',
                enabled: false,
                className: 'btn btn-warning',
                action: function ( e, dt, node, config ) {
                    const ids = $.map(dt.rows({ selected: true }).data(), function (item) {
                        return item.id;
                    });
                    setEnabledForChannels(urlDisable, ids, dt);
                },
            },
            {
                extend: 'selected',
                text: 'Enable selected',
                enabled: false,
                className: 'btn btn-info',
                action: function ( e, dt, node, config ) {
                    const ids = $.map(dt.rows({ selected: true }).data(), function (item) {
                        return item.id;
                    });
                    setEnabledForChannels(urlEnable, ids, dt);
                },
            },
            {
                extend: 'selected',
                text: 'Delete selected',
                enabled: false,
                className: 'btn btn-danger',
                action: function ( e, dt, node, config ) {
                    const ids = $.map(dt.rows({ selected: true }).data(), function (item) {
                        return item.id;
                    });
                    if (confirm("Do you really want to delete the " + ids.length + " selected channel(s)?")) {
                        deleteChannels(ids, dt);
                    }
                },
            },
            {
                extend: 'selectedSingle',
                text: 'Edit entry',
                enabled: false,
                className: 'btn btn-secondary',
                action: function ( e, dt, node, config ) {
                    const id = dt.rows({ selected: true}).data()[0].id;
                    window.location.href = urlEdit + '/' +id;
                },
            }
        ]
    });
});

function setEnabledForChannels(url, ids, dataTable) {  
    const options = {};  
    options.url = url;  
    options.type = "PUT";
    options.data = JSON.stringify(ids);  
    options.contentType = "application/json";  
    options.dataType = "html";  
    options.success = function (msg) {  
        dataTable.ajax.reload();  
    };  
    options.error = function () {  
        alert("Error while calling the Web API!");  
    };  
    $.ajax(options);  
}

function deleteChannels(ids, dataTable) {  
    const options = {};  
    options.url = urlDelete;  
    options.type = "DELETE";
    options.data = JSON.stringify(ids);  
    options.contentType = "application/json";  
    options.dataType = "html";  
    options.success = function (msg) {  
        dataTable.ajax.reload();  
    };  
    options.error = function () {  
        alert("Error while calling the Web API!");  
    };  
    $.ajax(options);  
}
</script>
</form>