Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>EDIT: See the latest <a href="http://jsfiddle.net/ruslans_uralovs/zDaGk/" rel="nofollow noreferrer">Fiddle</a> with "fixed header": </p> <hr> <p>The <a href="http://jsfiddle.net/hDgHs/" rel="nofollow noreferrer">Fiddle</a>.</p> <p>One of the solutions is to implement scrolling yourself instead of letting DataTables plugin do it for you.</p> <p>I've taken your example and commented out sScrollX option. When this option is not present DataTables plugin will simply put your table as is into a container div. This table will stretch out of the screen, therefore, to fix that we can put it into a div with required width and an overflow property set - this is exactly what the last jQuery statement does - it wraps existing table into a 300px wide div. You probably will not need to set the width on the wrapping div at all (300px in this example), I have it here so that clipping effect is easily visible. And be nice, don't forget to replace that inline style with a class. </p> <pre><code>$(document).ready(function() { var stdTable1 = $(".standard-grid1").dataTable({ "iDisplayLength": -1, "bPaginate": true, "iCookieDuration": 60, "bStateSave": false, "bAutoWidth": false, //true "bScrollAutoCss": true, "bProcessing": true, "bRetrieve": true, "bJQueryUI": true, //"sDom": 't', "sDom": '&lt;"H"CTrf&gt;t&lt;"F"lip&gt;', "aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]], //"sScrollY": "500px", //"sScrollX": "100%", "sScrollXInner": "110%", "fnInitComplete": function() { this.css("visibility", "visible"); } }); var tableId = 'PeopleIndexTable'; $('&lt;div style="width: 300px; overflow: auto"&gt;&lt;/div&gt;').append($('#' + tableId)).insertAfter($('#' + tableId + '_wrapper div').first())}); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. PODataTables fixed headers misaligned with columns in wide tables
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. USRuslans Uralovs
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PODataTables fixed headers misaligned with columns in wide tables
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. CORuslans - this is a great start! Thanks! Could I ask if this solution can be tweaked to allow the `sScrollY` to be set? At the moment, if that is set, the header understandably displays below the wrapped table.
      singulars
      1. PO
      1. USbPratik
    2. COSo what you really want is for table to be scrolled both horizontally and vertically. In that case keep sScrollY and sScrollX properties commented out and just constrain the wrapping div to your required vertical size, e.g. 100px in the following Fiddle: http://jsfiddle.net/WZrCx/
      singulars
      1. PO
      1. USRuslans Uralovs
    3. COWell, not quite! Using `sScrollY`, I can achieve a fixed header effect, whereas wrapping it doesn't.
      singulars
      1. PO
      1. USbPratik
 

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.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload