Проверка Checkbox в HTML и вывод данных

Есть checkbox

<input class="btn btn-default" type="button" id="hideshow" value="{{'button_titles.filter_views' | translate}}">
                        <div id="configuration" class="options clearfix" style="display:none">
                        <div class="ck-button">
                            <label><input type="checkbox" style="opacity: 0;" value="1" name="id" checked><span>ID</span></label>
                        </div>
                        <div class="ck-button">
                            <label><input type="checkbox" style="opacity: 0;" value="1" name="name" checked><span>Nazwa</span></label>
                        </div>
                        <div class="ck-button">
                            <label><input type="checkbox" style="opacity: 0;" value="1" name="company_name" checked><span>Klient</span></label>
                        </div>
                        <div class="ck-button">
                            <label><input type="checkbox" style="opacity: 0;" value="1" name="city" checked><span>Miasto</span></label>
                        </div>
                        <div class="ck-button">
                            <label><input type="checkbox" style="opacity: 0;" value="1" name="country" checked><span>Kraj</span></label>
                        </div>

Вывод таблицы:

<div class="table-responsive project-list-view" id="projects-list">
<table class="table table-hover" style="table-layout: fixed">
    <thead>
    <tr style="width: 100%">
        <th class="id" style="width: 4%" sortable-heading sort="sort" by="id">ID</th>
        <th class="name" sortable-heading sort="sort" by="name">
            {{'projects.labels.name' | translate }}
        </th>
        <th ng-if="!showView" class="company_name" sortable-heading sort="sort"
            by="company_name">
            {{'projects.labels.company_name' | translate }}
        </th>
        <th class="city" sortable-heading sort="sort" by="city" ng-if="'Y'" >
            {{'projects.labels.city' | translate }}
        </th>
        <th class="country" sortable-heading sort="sort" by="country">
            {{'projects.labels.country' | translate }}
        </th>
</thead>
    <tbody>
    <tr ng-repeat="project in projects">
        <td class="id">
            <i ng-if="::project.invalid" class="fa fa-exclamation-circle" aria-hidden="true"></i>
            {{ ::project.id }}
        </td>
        <td class="name">
            <a ui-sref='projects.show({id: project.id})' href="#">{{::project.name }}</a>
        </td>
        <td ng-if="!showView" class="company_name">
            <a ui-sref='clients.show({id: project.client_id})' href="#">
                {{ ::project.client_name}}
            </a>
        </td>

        <td style="word-break: break-all;" class="city">{{ ::project.address.city }}</td>
        <td class="country">{{ 'countries.' + project.address.country | translate }}</td>
</tbody>
</table>
 </div>

Script который скрывает колонки в таблице

<script>
$('input:checkbox:not(:checked)').each(function() {

    let column = 'table .' + $(this).attr('name');
    $(column).hide();
});

$('input:checkbox').click(function(){
    let column = 'table .' + $(this).attr('name');
    $(column).toggle();

});


$('#hideshow').click(function() {
    $('#configuration').toggle();
});

Проблема, что при переходе на след страницу (с помощью пагинации) слетают колонки, я думаю это потому что данные выводятся в любом случае, есть ли thead или нет. Вопрос, как выводить данные только при условии что checkbox = true?