0

I am using datatables plugin for my html table. The datatables work fine. All the paging, sorting, and search functions are working perfectly. I want to show/hide a group of columns using the normal Jquery Show/Hide toggle. When "Show" button is clicked, the table is fine. However, when "Hide" button is pressed, the columns are hidden but the cell values of those hidden columns shift after the 10th rows.

I tried assigning a common class name and/or a common id to the td and th, but the problem persists. My Jquery code:

$(document).ready(function () {
        $("#show").click(function () {
            $(".disappear).toggle();
        });
    });
Saroj Thapa
  • 17
  • 11

1 Answers1

-2

I'd recommend referring to this post jQuery hide element while preserving its space in page layout

Basically, instead of using .hide(), you're going to want to apply the CSS css('visibility','hidden')

.hide() sets display:none so the element doesn't take up an space and other elements can acquire that space.

Community
  • 1
  • 1
Brandon
  • 3,074
  • 3
  • 27
  • 44