Есть код, который скрывает и показвает элементы при нажатии на пагинацию.
#table_paginate
Так же это же скрытие и показыавание должно происходить при нажатии на еще один блок
#select, я не осилил ничего лучше чем вот:
$(document).ready(function(){
$("#table_paginate").click(function(){
if ($('#q1').is(':checked')) {
$('#table td:nth-child(1), #table th:nth-child(1)').show();
} else {
$('#table td:nth-child(1), #table th:nth-child(1)').hide();
}
if ($('#q2').is(':checked')) {
$('#table td:nth-child(2), #table th:nth-child(2)').show();
} else {
$('#table td:nth-child(2), #table th:nth-child(2)').hide();
}
if ($('#q3').is(':checked')) {
$('#table td:nth-child(3), #table th:nth-child(3)').show();
} else {
$('#table td:nth-child(3), #table th:nth-child(3)').hide();
}
if ($('#q4').is(':checked')) {
$('#table td:nth-child(4), #table th:nth-child(4)').show();
} else {
$('#table td:nth-child(4), #table th:nth-child(4)').hide();
}
if ($('#q5').is(':checked')) {
$('#table td:nth-child(5), #table th:nth-child(5)').show();
} else {
$('#table td:nth-child(5), #table th:nth-child(5)').hide();
}
if ($('#q6').is(':checked')) {
$('#table td:nth-child(6), #table th:nth-child(6)').show();
} else {
$('#table td:nth-child(6), #table th:nth-child(6)').hide();
}
});
});
$(document).ready(function(){
$("#select").click(function(){
if ($('#q1').is(':checked')) {
$('#table td:nth-child(1), #table th:nth-child(1)').show();
} else {
$('#table td:nth-child(1), #table th:nth-child(1)').hide();
}
if ($('#q2').is(':checked')) {
$('#table td:nth-child(2), #table th:nth-child(2)').show();
} else {
$('#table td:nth-child(2), #table th:nth-child(2)').hide();
}
if ($('#q3').is(':checked')) {
$('#table td:nth-child(3), #table th:nth-child(3)').show();
} else {
$('#table td:nth-child(3), #table th:nth-child(3)').hide();
}
if ($('#q4').is(':checked')) {
$('#table td:nth-child(4), #table th:nth-child(4)').show();
} else {
$('#table td:nth-child(4), #table th:nth-child(4)').hide();
}
if ($('#q5').is(':checked')) {
$('#table td:nth-child(5), #table th:nth-child(5)').show();
} else {
$('#table td:nth-child(5), #table th:nth-child(5)').hide();
}
if ($('#q6').is(':checked')) {
$('#table td:nth-child(6), #table th:nth-child(6)').show();
} else {
$('#table td:nth-child(6), #table th:nth-child(6)').hide();
}
});
});
Две функии, которые делают одно и тоже, только меняется селектор при нажатии которого они вызываются. Думаю это можно как-то более компактней сделать? Ну и сама эта конструкция с if else? Код работает.
//выше кода блок с чекбоксами, и если первый чекбокс снят, то скрываем первую колонку таблицы и наоборот:
<form action="" method="get" id="select">
<div class="app-checkbox"><label><input type="checkbox" name="column" id="q1" checked> Дата документа<span></span></label></div>
<div class="app-checkbox"><label><input type="checkbox" name="column" id="q2" checked> Номер документа<span></span></label></div>
<div class="app-checkbox"><label><input type="checkbox" name="column" id="q3" checked> Статус<span></span></label></div>
<div class="app-checkbox"><label><input type="checkbox" name="column" id="q4" checked> Наименование<span></span></label></div>
<div class="app-checkbox"><label><input type="checkbox" name="column" id="q5" checked> Категория<span></span></label></div>
<div class="app-checkbox"><label><input type="checkbox" name="column" id="q6" checked> Дата добавления<span></span></label></div>
</form>
ждите
