StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
primarykey
Id
13578675
data
AcceptedAnswerId
0
AnswerCount
0
ClosedDate
CommentCount
7
CommunityOwnedDate
CreationDate
2012-11-27T06:37:16.167
FavoriteCount
0
LastActivityDate
2012-11-27T06:37:16.167
LastEditDate
LastEditorUserId
0
OwnerUserId
558724
ParentId
9938694
PostTypeId
2
Score
5
ViewCount
0
LastEditorDisplayName
text
Body
<p>I didn't see anyone mentioning the DataTables.net plugin as it has some addons that work for these cases. It's totally customizable, and extendable.</p> <p>For some reason my jsfiddle was showing me errors that I could not debug, but when tried in here with xammp it worked perfectly and rendered pagination, column sorting and fixed header examples.. as you can see the initialization code is quite short, but you might want to download de codebase for the imagery. I basically took your provided code elements and arrange it to apply DataTables.net jQuery plugin. </p> <h1>HTML</h1> <pre><code> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title> TEST DataTables.net plugin - Fixed Header example </title> <script src='jquery182.js' ></script> <script src='jquery.dataTables.js' ></script> <script src='FixedHeader.js' ></script> <link rel='stylesheet' href='demo_table.css'/> <link rel='stylesheet' href='demo_page.css'/> </head> <body> <div id="demo"> <table cellpadding="0" cellspacing="0" border="0" class="display data_Table" > <thead> <tr> <th style='width:47px; height:29px' > <input name="chkSelectAll" type="checkbox" value="" id="chkSelectAll"/></th> <th style='width:159px;font-weight:bold'>Computer <span class="actdiv">&nbsp;</span></th> <th style='width:105px;font-weight:bold'>Group <span class="actdiv">&nbsp;</span></th> <th style='width:97px;font-weight:bold'>Policy <span class="actdiv">&nbsp;</span></th> <th style='width:105px;font-weight:bold'>Domain <span class="actdiv">&nbsp;</span></th> <th style='width:126px;font-weight:bold'>Address<span class="actdiv">&nbsp;</span></th> <th style='width:127px;font-weight:bold'>Type <span class="actdiv">&nbsp;</span></th> <th style='width:109px;font-weight:bold'>Status <span class="actdiv">&nbsp;</span></th> <th style='width:181px;font-weight:bold'>Test Status <span class="actdiv">&nbsp;</span></th> <th style='width:165px;font-weight:bold'>Version <span class="actdiv">&nbsp;</span></th> <th style='width:131px;font-weight:bold'>Date <span class="actdiv">&nbsp;</span></th> <th style='width:160px;font-weight:bold'>Last Date <span class="actdiv">&nbsp;</span></th> <th style='width:173px;font-weight:bold'>Count </th> </tr> </thead> <tbody> <tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr><tr style="padding-left:10px"> <td><input name="" type="checkbox" alt="classid-1" class="chkSelectAll" style="z-index:-2"/></td> <td class="name">DEVBUILD1</td> <td class="groupId">test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> <td>test</td> </tr> </tbody> </table> </div> <script> jQuery(document).ready(function($){ var oTable = $('.data_Table').dataTable( { // "sDom": 'RC<"clear">lfrtip' //options: we are using "sDom": 'Rlfrtip', "sScrollY": "200px", "bPaginate": true //Disable pagination false } ); }); </script> </body> </html> </code></pre> <h1>INCLUDE JS & CSS from JSFIDDLE LINK</h1> <ul> <li><strong>JSFiddle Link:</strong> [<a href="http://jsfiddle.net/Hx7ak/60/][1]" rel="nofollow noreferrer">http://jsfiddle.net/Hx7ak/60/][1]</a></li> </ul> <p>If you take the source code at the HTML section for that jsfiddle, and download the dependencies from that jsfiddle link (the javascript and css files, and place this html within the same directory) it should get you started in no time with it.</p> <p>Although, depending on which options you might want to look into shall you decide to go for this jQuery plugin, keep in mind that it has a very active community and support and at the forums the developers should be masters with specifics.</p> <h1>For more check on DataTables.net the example section.</h1> <p>Interesting links that can help you depending on how you would like to present your data with this plugin are:</p> <h1>FixedHeader</h1> <ul> <li><p><a href="http://www.datatables.net/release-datatables/extras/FixedHeader/two_tables.html" rel="nofollow noreferrer">http://www.datatables.net/release-datatables/extras/FixedHeader/two_tables.html</a></p></li> <li><p><a href="http://www.datatables.net/release-datatables/extras/FixedHeader/index.html" rel="nofollow noreferrer">http://www.datatables.net/release-datatables/extras/FixedHeader/index.html</a></p></li> <li><p><a href="http://www.datatables.net/release-datatables/extras/FixedHeader/html_table.html" rel="nofollow noreferrer">http://www.datatables.net/release-datatables/extras/FixedHeader/html_table.html</a></p></li> </ul> <h1>ColReorder</h1> <ul> <li><p><a href="http://www.datatables.net/release-datatables/extras/ColReorder/scrolling.html" rel="nofollow noreferrer">http://www.datatables.net/release-datatables/extras/ColReorder/scrolling.html</a></p></li> <li><p><a href="http://www.datatables.net/release-datatables/extras/ColReorder/fixedheader.html" rel="nofollow noreferrer">http://www.datatables.net/release-datatables/extras/ColReorder/fixedheader.html</a></p></li> <li><p><a href="http://www.datatables.net/release-datatables/extras/ColReorder/fixedcolumns.html" rel="nofollow noreferrer">http://www.datatables.net/release-datatables/extras/ColReorder/fixedcolumns.html</a></p></li> </ul> <h1>Colvis (Seems interesting)</h1> <ul> <li><a href="http://www.datatables.net/release-datatables/extras/ColVis/index.html" rel="nofollow noreferrer">http://www.datatables.net/release-datatables/extras/ColVis/index.html</a></li> </ul> <h1>FixedColumns</h1> <ul> <li><a href="http://www.datatables.net/release-datatables/extras/FixedColumns/index.html" rel="nofollow noreferrer">http://www.datatables.net/release-datatables/extras/FixedColumns/index.html</a></li> </ul> <p>Well as you can see at <a href="http://www.datatables.net/examples/" rel="nofollow noreferrer">http://www.datatables.net/examples/</a> the list of examples is quite long, but hope this helps! </p> <p><img src="https://i.stack.imgur.com/VMN6b.png" alt="DataTables implementation 1"> <img src="https://i.stack.imgur.com/bHR2r.png" alt="DataTables implementation 2"></p> <h1>Expected results with this jQuery Plugin</h1>
Tags
Title
singulars
PostAcceptedAnswerId
1. This table or related slice is empty.
PostParentId
1. POResize table column with fixed header in jquery
  singulars
  PostTypePostTypeId
  PTQuestion
PostTypePostTypeId
1. PTAnswer
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USJean Paul A.K.A el_vete
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. This table or related slice is empty.
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTModeratorReview
2. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
3. VO
  singulars
  PostPostId
  PO
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.