Javascript – Scrolling a table with multiple fixed table headers

html-tablejavascriptjqueryscroll

Before I attempt to reinvent the wheel (via jQuery plugin or similar), I'm trying to see if there is an easier way to do this or an existing plugin that users may know of. What I'm looking to do is scroll the body of a table that contains multiple table headers. For example, imagine something of this structure:

<table>
    <thead>
        <tr>
            <td colspan="2"></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <thead>
        <tr>
            <td colspan="2"></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
           <td></td>
           <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Honestly, I haven't tried out the above syntax to even see if its valid. The actual markup I have does not currently use thead/tbody and instead scrolls the whole parent div (seen below).

example table with multiple headers

What I want to achieve is scrolling of the whole table such that the header of the most relevant section is viewed on top. Currently the header scrolls out of view is there are enough rows.

I know the various techniques used to scroll a table with one header, but what about multiple? Are there any existing ways to achieve this? I'm open to different ideas, but right now I'm thinking of simply displaying the most relevant table header for the content on top.

Best Answer

A few months ago, I wrote some code that did exactly that where I wanted the headers to perform similar to section headers on iOS. Utilising a Jquery, the solution I ended up with involved creating an onScroll (and onResize for window resizing) event listener that ran a check through all $('table thead') and checked their $(this).position() on the page.

The check was whether the thead had a position which was above the top of the current viewport.

Once I had found the most relevant header (the bottommost thead that was above the viewport), I created a new table, with position: fixed at (0, 0) and copied into it a new column for each column of the headers rows and manually set its width properties to match the original table.

I have put together a Proof of Concept which shows how this all works.

Here is some pseudo-code of how it works:

Check the table is visible
Get a list of all thead sections in the table
Reverse the list
Find the first thead in the array with a top position less than scrollTop of the body element
If we found one:
1. Create deep copy of the thead
2. Make a container table
3. Copy attributes from the original table so the styles get copied
4. Position the container at [0, originalTable.left]
5. Set the width equal to the outerWidth of the original table
6. Set the width of every td found to the width of the matching td from the original table
7. Add it to the DOM
If none found, remove the existing container from the DOM if there was one

There are some other edge case details that made this even nicer too:

Instead of (0, 0), the origin point for the fixed row was altered based upon whether the "real" header row for the tbody below the one with the fixed header should be pushing it away.
Ensure that previous header rows are deleted before making a new one
Don't recreate the header row if the header you'd be making is the same as what is already there

This approach worked a lot better others I tried such as trying to position:absolute an object due to the fact that Firefox and IE aren't incredibly fast at running the onScroll handler so you tend to see 'juddering'. I also tried mucking with the position attribute of the theads, this just ended in the table column widths jumping about and not matching the data.

thead nodes aren't strictly required for this solution as you can use some other selector to determine which rows are headers etc.

Update: Added example code and pseudo-code Update: Dropbox changed their system, replaced example with jsfiddle URL

Related Solutions

Javascript – How to upload files asynchronously with jQuery

With HTML5 you can make file uploads with Ajax and jQuery. Not only that, you can do file validations (name, size, and MIME type) or handle the progress event with the HTML5 progress tag (or a div). Recently I had to make a file uploader, but I didn't want to use Flash nor Iframes or plugins and after some research I came up with the solution.

The HTML:

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

First, you can do some validation if you want. For example, in the .on('change') event of the file:

$(':file').on('change', function () {
  var file = this.files[0];

  if (file.size > 1024) {
    alert('max upload size is 1k');
  }

  // Also see .name, .type
});

Now the $.ajax() submit with the button's click:

$(':button').on('click', function () {
  $.ajax({
    // Your server script to process the upload
    url: 'upload.php',
    type: 'POST',

    // Form data
    data: new FormData($('form')[0]),

    // Tell jQuery not to process data or worry about content-type
    // You *must* include these options!
    cache: false,
    contentType: false,
    processData: false,

    // Custom XMLHttpRequest
    xhr: function () {
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        // For handling the progress of the upload
        myXhr.upload.addEventListener('progress', function (e) {
          if (e.lengthComputable) {
            $('progress').attr({
              value: e.loaded,
              max: e.total,
            });
          }
        }, false);
      }
      return myXhr;
    }
  });
});

As you can see, with HTML5 (and some research) file uploading not only becomes possible but super easy. Try it with Google Chrome as some of the HTML5 components of the examples aren't available in every browser.

Javascript – Add table row in jQuery

The approach you suggest is not guaranteed to give you the result you're looking for - what if you had a tbody for example:

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

You would end up with the following:

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

I would therefore recommend this approach instead:

$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

You can include anything within the after() method as long as it's valid HTML, including multiple rows as per the example above.

Update: Revisiting this answer following recent activity with this question. eyelidlessness makes a good comment that there will always be a tbody in the DOM; this is true, but only if there is at least one row. If you have no rows, there will be no tbody unless you have specified one yourself.

DaRKoN_ suggests appending to the tbody rather than adding content after the last tr. This gets around the issue of having no rows, but still isn't bulletproof as you could theoretically have multiple tbody elements and the row would get added to each of them.

Weighing everything up, I'm not sure there is a single one-line solution that accounts for every single possible scenario. You will need to make sure the jQuery code tallies with your markup.

I think the safest solution is probably to ensure your table always includes at least one tbody in your markup, even if it has no rows. On this basis, you can use the following which will work however many rows you have (and also account for multiple tbody elements):

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');

Best Answer

Related Solutions

Javascript – How to upload files asynchronously with jQuery

Javascript – Add table row in jQuery

Related Topic