HomeОбразованиеRelated VideosMore From: kudvenkat

jQuery datatable show hide columns

88 ratings | 32693 views
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/08/jquery-datatable-show-hide-columns.html 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 () { var tableColumn = datatableInstance.column($(this).attr('data-columnindex')); tableColumn.visible(!tableColumn.visible()); });
Html code for embedding videos on your blog
Text Comments (16)
Phuong Dinh (5 months ago)
Subscribed. Thanks for all helpful tutorials.
Richard B (5 months ago)
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 = dataTableInstance.column($(this).attr('data-columnindex')); tableColumn.visible(!tableColumn.visible()); }); Thank you for the lesson.
Ari Hadi (11 months ago)
really helpful for my case, thank u so much!
Phục Trương Quang (3 years ago)
i get the error "Uncaught TypeError: oTable.column is not a function" . How can I fix it?
Luke Schollmeyer (2 years ago)
+Phục Trương Quang You probably have something like this: tableColumn.visible(!tableColumn().visible()); it should be like this: tableColumn.visible(!tableColumn.visible());
Ederson Chioli (2 years ago)
+Phục Trương Quang me too
Spurthi Pandith (3 years ago)
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.
Kris Maly (3 years ago)
I enjoyed watching this video and recommend others. Feature explained very well. Thanks for educating the community and appreciate your volunteership.
Richard Rhyck (3 years ago)
I've seen a datatable with the options export to csv, excel, pdf, or print. How to achieve that? Thanks
dano200 (3 years ago)
Please, Please, Please do videos about TDD
Lokopi (3 years ago)
Upload images with progress bar in jquery and mvc
Sharath Mitte (3 years ago)
Could you please update the videos for server side paging and editable list item in jquery datatable. thanks
Kostas Greek (3 years ago)
+sharath mitte im waiting for this too :)
Lokopi (3 years ago)
Sir can you please upload WPF mvvm mvvmp videos
Therapyx (3 years ago)
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
Kostas Greek (3 years ago)
You are great!!!! Thahk you!!!

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.