How to do show/hide columns with checkbox on Editable Tables

[Naresh Designs]

Hi Team ,

Could you please help me for show/hide columns with checkbox on Editable Tables , find below my code

HTML:
<label>
<input type=”checkbox” class=”hide_show” value=””>
Show Users Column
</label>

JS(examples.datatables.editable):
dom: ‘<“row”<“col-lg-6″l><“col-lg-6″f>><“table-responsive”t>p’,
aoColumns: [null, null, null, null, { bSortable: false }],
buttons: [{
extend: ‘colvis’,
columns: ‘:not(:first-child)’
}
]

I tried the below links
https://datatables.net/release-datatables/extensions/ColVis/examples/simple.html

https://datatables.net/examples/api/show_hide.html

---

[Support]

Hello,

First use this HTML for the checkbox:

<input type="checkbox" class="hide_show" value="0">
    Show Users Column
</label>

* The value attribute represents the column index. For example if you want the second column, the value should be value="1".

Then, add the code below at (js/custom.js):

$('.hide_show').on('change', function(){
	// Get the column API object
    var column = $('#datatable-editable').DataTable().column( $(this).val() );

    // Toggle the visibility
    column.visible( ! column.visible() );
});

Please try that and let us know if you need further assistance.

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Naresh Designs]

Thank you for your reply..

As you suggested I have added code on the respective HTML and custom js page, When the check box checked column hiding fine after that when I trying to download PDF .that not working getting below error

here is image:

HTML: <label><input type=”checkbox” class=”hide_show” value=”3″>Show Users Column</label>

Custom JS: $(“.hide_show”).on(“change”, function () {
// Get the column API object
var column = $(“#datatable-editable”).DataTable().column($(this).val());

// Toggle the visibility
column.visible(!column.visible());
});

---

[Naresh Designs]

I am looking at data tables that show hide columns using the checkbox with PDF download

---

[Support]

Hello,

This issue seems to be a limitation of DataTables + PDF Button and the Toggle Column custom code. Unfortunately we don’t have a solution for that. Please note that DataTables is a third party plugin we include with Porto Admin, this mean it’s not a code created from zero by us.

We did a try redrawing the table when toggle the columns, but without success. This seems to be a limitation as mentioned above.

We hope you understand!

Let us know if you need any further help.

Kind Regards,

Rodrigo.

---

[Author]

Posts