jQuery datatable show hide columns

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

In this video we will discuss how to show or hide columns of a jQuery datatable. This is continuation to Part 107. Please watch Part 107 from jQuery tutorial before proceeding.

When we click on a column name, the respective column visibility should be toggled. The following are the changes required for the example we worked with in Part 107.

Include the following HTML just above the datatable markup
<div style="padding: 5px; padding-left: 0px">
<b>Show/Hide Column : </b>
<a class="showHideColumn" data-columnindex="0">Id</a> -
<a class="showHideColumn" data-columnindex="1">First Name</a> -
<a class="showHideColumn" data-columnindex="2">Last Name</a> -
<a class="showHideColumn" data-columnindex="3">Gender</a> -
<a class="showHideColumn" data-columnindex="4">Job Title</a> -
<a class="showHideColumn" data-columnindex="5">Web Site</a> -
<a class="showHideColumn" data-columnindex="6">Salary</a> -
<a class="showHideColumn" data-columnindex="7">Hire Date</a>
</div>

Include the following style section, in the head section of the page
<style>
.showHideColumn {
cursor: pointer;
color: blue;
}
</style>

Finally, include the following code block in the success callback function
$('.showHideColumn').on('click', function () {
});

[krismaly]

I enjoyed watching this video and recommend others.
Feature explained very well.
Thanks for educating the community and appreciate your volunteership.

[spurthipandith]

sir... first of alll thanks a lottt. i have been learning dotnet c# and sql from your videos only and its been soooo helpful for me. i understand very clearly abt the concepts and their usage from your videos. It would be great if u upload SSIS tutorials. Thank u.

[arihadi]

really helpful for my case, thank u so much!

[Therapyxx]

Great tutorial, thanks. Maybe i ll tell you a good idea, it would be cool if you make almost similar tutorial, but for responsive design, for example if @media 500px... hide or show gridview column

[CodingSquid]

If you're having trouble with the column not defined make sure you're using the DataTable constructor vs the old dataTable constructor.

// New version DataTable - Old version dataTable
var dataTableInstance = $('#datatable').DataTable({
data: data,
'paging': true,
...

$('.showHideColumn').on('click', function () {
// Setup click event for each element with class above
var tableColumn =

});

Thank you for the lesson.

[Rhyckthegreat]

I've seen a datatable with the options export to csv, excel, pdf, or print. How to achieve that? Thanks

[arun]

Sir can you please upload WPF mvvm mvvmp videos

[freulerGuenter]

how do you get selected columns from local storage in this table

[dano]

Please, Please, Please do videos about TDD

[GuptaTreePoint]

Hey sir,


I want to hide columns but not remove them from DOM. This function removes column from DOM also.

[arun]

Upload images with progress bar in jquery and mvc

[sharathmitte]

Could you please update the videos for server side paging and editable list item in jquery datatable. thanks

[truongquangphuc]

i get the error "Uncaught TypeError: oTable.column is not a function" . How can I fix it?