Databases
StackOverflow2013
Postsdbo
POjQuery DataTables issue: columns and rows not in one line
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery DataTables issue: columns and rows not in one line
    primarykey
    data
    text
    <p>I'm having a x- and y-axis scroll and fixed columns on the left side. My problem is the position of the thead to the tbody and the position of the rows. The columns and rows are not displayed exactly in one line, they are a little bit displaced. </p> <p>I tried this: </p> <p><a href="https://stackoverflow.com/questions/13265606/table-header-and-body-are-not-getting-aligned-properly-when-table-header-freezed">Table header and body are not getting aligned properly when table header freezed using CSS</a></p> <p><a href="https://stackoverflow.com/questions/8607290/jquery-datatables-header-misaligned-with-vertical-scrolling">jQuery Datatables Header Misaligned With Vertical Scrolling</a></p> <p><a href="https://stackoverflow.com/questions/16054584/fixed-column-header-width-does-not-match-body-column-widths">Fixed column header width does not match body column widths</a></p> <p>but it didn't work for me.</p> <p>This is my javascript:</p> <pre><code>$(document).ready(function(){ var height = ($(window).innerHeight() - 180); var oTable = $('#tableOverview').dataTable({ "oLanguage": { "sProcessing": "Bitte warten...", "sLengthMenu": "_MENU_ Einträge anzeigen", "sZeroRecords": "Keine Einträge vorhanden.", "sInfo": "_START_ bis _END_ von _TOTAL_ Einträgen", "sInfoEmpty": "0 bis 0 von 0 Einträgen", "sInfoFiltered": "(gefiltert von _MAX_ Einträgen)", "sInfoPostFix": "", "sSearch": "Suchen", "sUrl": "", "oPaginate": { "sFirst": "Erster", "sPrevious": "Zurück", "sNext": "Nächster", "sLast": "Letzter" } }, "sScrollY": height, "sScrollX": "99%", "bPaginate": false }); new FixedColumns( oTable, { "iLeftColumns": 3 } ); }); </code></pre> <p>See full example here: </p> <p><a href="http://jsfiddle.net/n74XN/2/" rel="nofollow noreferrer">http://jsfiddle.net/n74XN/2/</a> </p> <p>(fixed columns are working sometimes and sometimes not in the jsfiddle example, i think it's because of the result window). The data for the table is loaded dynamically by php (not in the test case). Here you can see a picture of the real application: </p> <p><a href="http://www.picamatic.com/view/9721451_DataTable/" rel="nofollow noreferrer">http://www.picamatic.com/view/9721451_DataTable/</a></p> <p>I use this plugin for visualisation with bootstrap: </p> <p><a href="https://github.com/DataTables/Plugins/tree/master/integration/bootstrap/3" rel="nofollow noreferrer">https://github.com/DataTables/Plugins/tree/master/integration/bootstrap/3</a></p> <p>and the FixedColumns Plugin.</p> <p>How do i get them displayed right? </p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USCommunity
    1. USkinske
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    3. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

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