1
Answer

How to implement fixed header with vertical scroller MVC 3

Ritendra Mall

Ritendra Mall
5y
547
1
Hello Everyone,
 
Please help me to implement the Fixed table header with MVC 3 application.
 
I am already using one jQuery script for this, it' working but I am facing table header and body alignment issue.
 
Does anyone know the best way to implement this without adding any extra CSS.
 
NOTE:- Currently I am using jQuery 1.5.1 version for this.
 
Thank you
 
What I have tried
 
below is the code
  1. function scrolify(tblAsJQueryObject, height) {  
  2. var oTbl = tblAsJQueryObject;  
  3. // for very large tables you can remove the four lines below  
  4. // and wrap the table with in the mark-up and assign  
  5. // height and overflow property  
  6. var oTblDiv = $("");  
  7. oTblDiv.css('height', height);  
  8. oTblDiv.css('overflow', 'auto');  
  9. oTblDiv.css('overflow-x', 'hidden');  
  10. oTblDiv.css('margin-right', "2px");  
  11. oTbl.wrap(oTblDiv);  
  12. // save original width  
  13. oTbl.attr("data-item-original-width", oTbl.width());  
  14. oTbl.find('thead tr td').each(function () {  
  15. $(this).attr("data-item-original-width", $(this).width());  
  16. });  
  17. oTbl.find('tbody tr td').each(function () {  
  18. $(this).attr("data-item-original-width", $(this).width());  
  19. });  
  20.   
  21. // clone the original table  
  22. var newTbl = oTbl.clone();  
  23. // remove table header from original table  
  24. oTbl.find('thead tr').remove();  
  25. // remove table body from new table  
  26. newTbl.find('tbody tr').remove();  
  27. oTbl.parent().parent().prepend(newTbl);  
  28. newTbl.wrap("");  
  29. // replace ORIGINAL COLUMN width  
  30. newTbl.width(newTbl.attr('data-item-original-width'));  
  31. newTbl.find('thead tr td').each(function () {  
  32. $(this).width($(this).attr("data-item-original-width"));  
  33. });  
  34. oTbl.width(newTbl.attr('data-item-original-width'));  
  35. oTbl.find('thead tr td').each(function () {  
  36. $(this).width($(this).attr("data-item-original-width"));  
  37. });  
  38. newTbl.width(newTbl.attr('data-item-original-width'));  
  39. newTbl.find('tbody tr td').each(function () {  
  40. $(this).width($(this).attr("data-item-original-width"));  
  41. });  
  42. oTbl.width(oTbl.attr('data-item-original-width'));  
  43. oTbl.find('tbody tr td').each(function () {  
  44. $(this).width($(this).attr("data-item-original-width"));  
  45. });  
  46. }  
  47. $(document).ready(function () {  
  48. scrolify($('#invitedTable'), 200);// 160 is height  
  49. scrolify($('#pdartTable'), 200);  
  50. });  
Answers (1)
Next Recommended Forum