Переключить OnClick Refre sh Form

Question

Я пытаюсь создать переключатель для использования в качестве кнопки для необязательного отображения определенных данных. Еще лучше было бы, если бы таблица обновлялась без обновления всей страницы. Это возможно?

Переключатель:

    <div sec:authorize="hasAnyRole('DEALERSHIP_SET_RATECHARTS')"
        class="tab-pane fade col-xs-12" id="ratecharts"
        style="padding-top: 10px;">
           <div class="form-group">
           <label class="control-label" for="lockedFlag">View Locked</label>
               <div id="lockedFlag" class="onoffswitch switch-square">
               <input type="checkbox" th:checked="${showLocked} ? 'checked'"
                    onclick="toggleLocked();" name="showLocked" id="myonoffswitch"
                    class="onoffswitch-checkbox" /> <label
                    class="onoffswitch-label" for="myonoffswitch"> <span
                    class="onoffswitch-inner"></span>
           </label>
    </div>
</div>

Таблица:

<div class="form-group">
    <label for="rateChartTable">Current Rate Charts</label>
        <table id="rateChartTable" class="table tablesorter">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Provider</th>
                    <th>&nbsp;</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="rateChart, iter : ${dealership.rateCharts}">
                    <td th:text="${rateChart.name}"></td>
                    <td th:text="${rateChart.type.name}"></td>
                    <td th:text="${rateChart.provider.name}"></td>
                    <td><input type="hidden" th:value="${rateChart.id}"
                    th:name="${'rateCharts[' + iter.index + '].id'}" /> <ahref="#" class="btn btn-danger glyphicon glyphicon-remove"></a>
                    </td>
                </tr>
            </tbody>
        </table>
</div>