asked on

Fix table heading

Hi I'm building a html table from some imported JSON data

How do I fix the header row and scroll the data body similar to freeze panes in excel

This is a mockup of what I'm trying to do The MOCK_DATA.json may not be enough to triger the overlow hence setting it 100px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Table</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    	
<script type='text/javascript'>
	$(function() {
      // jQuery
       $('button').on('click', function (){
                    var link = "MOCK_DATA.json";
               $.ajax({
                url: link,
                   dataType: "json",
                   type: "GET",
//                   contentType: "application/json; charset=utf-8",
                   success: function (data) {
                   
                       console.dir(data);
                     var table = $('<table></table>').addClass('MyClass');
                  var RowCount=0;
                  var row;

                  $.each(data, function(i, val) {
                  row =$('<tr></tr>');
                   // console.log(i);  //this gives the object index/key
                   // console.log(val);  //this gives the object
                    $.each(val, function(i2, val2) {
                       if(RowCount===0){
                         var thead =$('<thead></thead>');
                          var th = $('<th></th>').text(i2);
                          
                             thead.append(th);
                             row.append(th);
                              Nrow =$('<tr></tr>');
                             var td = $('<td></td>').text(val2);
                             Nrow.append(td);
                           }
                          else{
                          var td = $('<td></td>').text(val2);
                             row.append(td);
                           }

                           console.log(i2);  //this gives the key
                           console.log(val2); //this gives the value
                         });// end 2nd each
                         RowCount++;
                         table.append(row);

                       }); // end first each
                     $('#MainDiv').html(table);

                         },
                  error: function(e) {
                      console.log(e.message);
                  }



               });
             });
           
      });
  
 
</script>
  
<style>
  table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
    padding: 5px;
}
tbody{
  height: 100px;
  overflow-y: auto;
  
}
</style>  
</head>
  <body>

  <div id=wrap>
      <button id="dummy" >Build Table</button>
   <div id=MainDiv>

    </div>
    <div id=footer>
    </div>
   </div>
  </body>
</html>

Open in new window

MOCK_DATA.json

[{"id":1,"name":"Irosin","Long":124.036411,"Lat":12.712478,"url":"http://dummyimage.com/135x216.bmp/dddddd/000000"},
{"id":2,"name":"Menongue","Long":17.6984879,"Lat":-14.6594083,"url":"http://dummyimage.com/149x135.png/cc0000/ffffff"},
{"id":3,"name":"Donglai","Long":126.154678,"Lat":41.654661,"url":"http://dummyimage.com/100x109.png/5fa2dd/ffffff"},
{"id":4,"name":"San Sebastian","Long":121.0519495,"Lat":14.7044701,"url":"http://dummyimage.com/114x212.bmp/dddddd/000000"},
{"id":5,"name":"Teutônia","Long":-51.7994632,"Lat":-29.4799379,"url":"http://dummyimage.com/247x178.bmp/dddddd/000000"},
{"id":6,"name":"Staroutkinsk","Long":59.3184961,"Lat":57.2287633,"url":"http://dummyimage.com/169x222.jpg/cc0000/ffffff"},
{"id":7,"name":"Molo","Long":35.7323709,"Lat":-0.2488358,"url":"http://dummyimage.com/242x164.bmp/cc0000/ffffff"},
{"id":8,"name":"Amnat Charoen","Long":99.855247,"Lat":12.0554892,"url":"http://dummyimage.com/115x148.png/dddddd/000000"},
{"id":9,"name":"Jinjiang","Long":118.552365,"Lat":24.781681,"url":"http://dummyimage.com/122x185.jpg/cc0000/ffffff"},
{"id":10,"name":"Sairam","Long":85.3117065,"Lat":27.6985161,"url":"http://dummyimage.com/117x156.jpg/cc0000/ffffff"}]

Open in new window

SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

trevor1940

ASKER

Nearly

I've either got the thead row out of sync with tbody eg not 100% wide (Each column is only as wide as longest content) or body height applying to every table

trying this to isolate just this table but isn't working don't know if this will solve the sync problem

<style type="text/css">
.static_headers {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}
.static_headers + thead tr {
	  display: block;
	  position: relative;
}
.static_headers  + tbody {
	display: block;
	overflow: auto;
	width: 100%;
	height: 200px;
}
</style>

Open in new window

Julian Hansen

Can you post more of your code.

If you are giving your table a class of static_headers

<table class="static_headers">

Open in new window

Only that table should be affected.

Start by taking the '+' signs out of your css - '+' means next element you want the child element.

trevor1940

ASKER

Can you post more of your code.

Not easily as on closed system
THis is as close I can give you it has been typed across so might contain typos

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Table</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    	
<script type='text/javascript'>
	$(function() {
      // jQuery
       $('button').on('click', function (){
                    var link = "MOCK_DATA.json";
               $.ajax({
                url: link,
                   dataType: "json",
                   type: "GET",
//                   contentType: "application/json; charset=utf-8",
                   success: function (data) {
                   
                       console.dir(data);
                     var table = $('<table></table>').addClass('bordered static_headers');
                  var RowCount=0;


                  $.each(data, function(i, val) {
                  THrow =$('<tr></tr>');
                  TDrow =$('<tr></tr>').addClass('NoClass').attr('id', 'row_' + data[i].id);
                   // console.log(i);  //this gives the object index/key
                   // console.log(val);  //this gives the object
                    $.each(val, function(i2, val2) {
                       if(RowCount===0){
                          var th = $('<th></th>').text(i2);
                          THrow.append(th);                          
                             var td = $('<td></td>').text(val2);
                             TDrow.append(td);
                           }
                          else{
                          var td = $('<td></td>').text(val2);
                             TDrow.append(td);
                           }

                           console.log(i2);  //this gives the key
                           console.log(val2); //this gives the value
                         });// end 2nd each
                       if(RowCount===0){

                         var thead =$('<thead></thead>');
                             thead.append(throw);
                        table.append(thead);
                         }
                         table.append(TDrow);
                         RowCount++;

                       }); // end first each
                     $('#MainDiv').html(table);

                         },
                  error: function(e) {
                      console.log(e.message);
                  }



               });
             });
           
      });
  
 
</script>
  
<style>
  table.bordered {
  margin: 1em;
  border-collapse: collapse;
  border: 1px solid grey;
 width: 100%;
}

table.bordered td {
    border: 1px solid grey;
    text-align: center;
    font-size: 0.9em;
}
table.bordered th {
    border: 1px solid grey;
   background: lightgrey
    text-align: center;
    font-size: 0.9em;
}

.static_headers {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}
.static_headers  thead tr {
	  display: block;
	  position: relative;
	width: 100%;
}
.static_headers   tbody {
	display: block;
	overflow: auto;
	height: 500px;
	width: 100%;
}

</style>  
</head>
  <body>

  <div id=wrap>
      <button id="dummy" >Build Table</button>
   <div id=MainDiv>

    </div>
    <div id=footer>
    </div>
   </div>
  </body>
</html>

Open in new window

trevor1940

ASKER

Hi I've knocked this up at home to show you
as you can see from screen shot the table header and body columns don't align

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Table</title>
    
    <style>
  table.bordered {
  margin: 1em;
  border-collapse: collapse;
  border: 1px solid grey;
 width: 100%;
}

table.bordered td {
    border: 1px solid grey;
    text-align: center;
    font-size: 0.9em;
}
table.bordered th {
    border: 1px solid grey;
   background-color: lightgrey;
    text-align: center;
    font-size: 0.9em;
}

.static_headers {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}
.static_headers  thead tr {
	  display: block;
	  position: relative;
	width: 100%;
}
.static_headers   tbody {
	display: block;
	overflow: auto;
	height: 500px;
	width: 100%;
}

</style>  
</head>
  <body>

  <div id=wrap>
   <div id=MainDiv>




<table class="bordered static_headers">
  <thead>
    <tr>
    <th>id</th><th>city</th><th>long</th><th>lat</th><th>country_code</th><th>url</th><th>description</th>
    </tr>
    <tbody>
      <tr id='row_1'><td>1</td><td>Tanjung Pandan</td><td>107.6529988</td><td>-2.7416678</td><td>ID</td><td><a href="#">Dummy Link</a></td><td>"Repair Left Lung, Via Natural or Artificial Opening Endoscopic"</td></tr>
      <tr id='row_2'><td>2</td><td>Alegria</td><td>121.0309165</td><td>14.5020933</td><td>PH</td><td><a href="#">Dummy Link</a></td><td>Fluoroscopy of Right Subclavian Vein</td></tr>
<tr id='row_3'><td>3</td><td>Dordrecht</td><td>4.6999899</td><td>51.792865</td><td>NL</td><td><a href="#">Dummy Link</a></td><td>"Revision of Internal Fixation Device in Left Scapula,External Approach"</td></tr>
<tr id='row_4'><td>4</td><td>Trinaterra</td><td>-8.5728738</td><td>41.2610181</td><td>PT</td><td><a href="#">Dummy Link</a></td><td>"Measurement of Cardiac Electrical Activity,External Approach"</td></tr>
<tr id='row_5'><td>5</td><td>Dakhla</td><td>-15.9347384</td><td>23.7221111</td><td>EH</td><td><a href="#">Dummy Link</a></td><td>"Bypass Coronary Artery,Four or More Arteries from Left Internal Mammary witd Zooplastic Tissue,Percutaneous Endoscopic Approach"</td></tr>
<tr id='row_6'><td>6</td><td>Huangzhai</td><td>119.996847</td><td>29.454189</td><td>CN</td><td><a href="#">Dummy Link</a></td><td>"Lower Joints,Fusion"</td></tr>
<tr id='row_7'><td>7</td><td>Zhufo</td><td>120.047429</td><td>30.379545</td><td>CN</td><td><a href="#">Dummy Link</a></td><td>"Revision of Infusion Device in Left Metatarsal-Tarsal Joint,Open Approach"</td></tr>
<tr id='row_8'><td>8</td><td>Rengo</td><td>-70.8674411</td><td>-34.4023791</td><td>CL</td><td><a href="#">Dummy Link</a></td><td>Beam Radiation of Lung using Neutron Capture</td></tr>
<tr id='row_9'><td>9</td><td>Ejido</td><td>-71.2428737</td><td>8.5493413</td><td>VE</td><td><a href="#">Dummy Link</a></td><td>"Removal of Infusion Device from Left Metacarpophalangeal Joint,Percutaneous Endoscopic Approach"</td></tr>
<tr id='row_10'><td>10</td><td>Xiaozhen</td><td>115.264971</td><td>24.690585</td><td>CN</td><td><a href="#">Dummy Link</a></td><td>"Restriction of Right Brachial Vein,Percutaneous Endoscopic Approach"</td></tr>
<tr id='row_11'><td>11</td><td>S�o Paio de Seide</td><td>-8.4737713</td><td>41.399671</td><td>PT</td><td><a href="#">Dummy Link</a></td><td>"Bypass Coronary Artery,tdree Arteries from Coronary Artery witd Syntdetic Substitute,Open Approach"</td></tr>
<tr id='row_12'><td>12</td><td>Huangshi</td><td>115.038835</td><td>30.20003</td><td>CN</td><td><a href="#">Dummy Link</a></td><td>"Restriction of Cecum,Percutaneous Endoscopic Approach"</td></tr>
<tr id='row_13'><td>13</td><td>Xilinji</td><td>122.539307</td><td>52.969667</td><td>CN</td><td><a href="#">Dummy Link</a></td><td>"Dilation of Left Renal Artery witd Two Drug-eluting Intraluminal Devices,Percutaneous Approach"</td></tr>
<tr id='row_14'><td>14</td><td>Wanghu</td><td>116.244678</td><td>30.661419</td><td>CN</td><td><a href="#">Dummy Link</a></td><td>"Removal of Syntdetic Substitute from Right Tibia, Percutaneous Approach"</td></tr>
<tr id='row_15'><td>15</td><td>Xufeng</td><td>113.8146974</td><td>23.0594685</td><td>CN</td><td><a href="#">Dummy Link</a></td><td>"Bypass Pancreatic Duct to Small Intestine witd Intraluminal Device,Open Approach"</td></tr>
<tr id='row_16'><td>16</td><td>La Asunci�n</td><td>-63.8581485</td><td>11.028458</td><td>VE</td><td><a href="#">Dummy Link</a></td><td>"Beam Radiation of Bladder using Heavy Particles (ProtonsIons)"</td></tr>
<tr id='row_17'><td>17</td><td>Mar del Plata</td><td>-57.5823273</td><td>-38.0667198</td><td>AR</td><td><a href="#">Dummy Link</a></td><td>Computerized Tomography (CT Scan) of Left Patella</td></tr>
<tr id='row_18'><td>18</td><td>Hongxingqiao</td><td>119.839212</td><td>34.007974</td><td>CN</td><td><a href="#">Dummy Link</a></td><td>"Release Splenic Artery, Percutaneous Approach"</td></tr>
<tr id='row_19'><td>19</td><td>Xinxing</td><td>112.225334</td><td>22.69569</td><td>CN</td><td><a href="#">Dummy Link</a></td><td>"Drainage of Right Inguinal Region,Percutaneous Approach"</td></tr>
<tr id='row_20'><td>20</td><td>Binawara</td><td>115.7782286</td><td>-3.4795532</td><td>ID</td><td><a href="#">Dummy Link</a></td><td>"Bypass Abdominal Aorta to Right Common Iliac Artery witd Autologous Venous Tissue,Open Approach"</td></tr>
</tbody>
</table>
</div>
    <div id=footer>
    </div>
   </div>
  </body>
</html>

Open in new window

I've cleaned to table up a bit this still has the same issue but now A bit more readable

Hooping someone can help with this as I have a follow on question

ASKER CERTIFIED SOLUTION

HainKurt

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

trevor1940

ASKER

@HainKurt

Your datatables demo 2 looks good and could be the way forward it works well on a static page but when I tried to add your datatable code after building the table dynamically from an ajax call as in the opening question I get an error in the datatables.js my guess it is to with the ajax call or how i'm building the table or the data itself

Any example of how to do this? Or do I need a new question?

...
                       }); // end first each
                     $('#MainDiv').html(table);
$('#MyTable').DataTable({
  scrollY: '400px',  // this line causes the error comment it out and the table and other functions work 
  scrollCollapse: true,
  paging: false,
  searching: false,
  info:false
});

Open in new window

HainKurt

try using

scrollY: '60vh',

Open in new window

means %60 of window width

what error does it give? maybe your table structure is not good...
post the whole code that shows how you construct the table...

HainKurt

have a look at this

https://jsfiddle.net/drq2Lgm3/

html

<div id=wrap>
  <div id=MainDiv>

    <table id=MainTable>
      <thead>
        <tr>
          <th>id</th>
          <th>C</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>

  </div>
  <div id=footer>
  </div>
</div>

Open in new window

var table = "<tr><td>1</td><td>A</td></tr><tr><td>2</td><td>B</td></tr><tr><td>3</td><td>C</td></tr><tr><td>4</td><td>V</td></tr><tr><td>5</td><td>B</td></tr><tr><td>6</td><td>N</td></tr><tr><td>7</td><td>M</td></tr><tr><td>8</td><td>L</td></tr><tr><td>9</td><td>K</td></tr><tr><td>10</td><td>H</td></tr><tr><td>11</td><td>G</td></tr><tr><td>12</td><td>F</td></tr>";

$('#MainTable tbody').html(table);
$('#MainTable').DataTable({
  scrollY: '200px', // this line causes the error comment it out and the table and other functions work 
  scrollCollapse: true,
  paging: false,
  searching: false,
  info: false
});

Open in new window

I put headers and table on page initially then added tbody part with js and called datatable
works fine...

trevor1940

ASKER

I think using Datatables has gone beyond the scope of opening question

I've opened a new question https://www.experts-exchange.com/questions/29055580/jQuery-Datatables-ajax-with-callback.html