1

We're using jqgrid on a web application to render the results of searches because of its built in functionality for paging and sorting that executes server side. We were previously using Tablesorter, but that operated client side and so didn't work well for how we were trying to use it.

We had a web designer on the project (whom has since left the organisation) that had created styles for tables and tried to get the same look working on the jqgrid. It sort of worked, but not quite. We have trouble with the header columns being unaligned with the data columns. We've fiddled with the CSS but it just doesn't seem to work. Sometimes we get scroll bars appearing when we don't want them.

Anyway, part of the problem seems to be that jqgrid uses one table for the column headers, and then another for the data itself. These tables are each wrapped in a div tag. We've had a look at some of the alternatives such as Flexigrid and Ingrid but they also use the same approach with separate tables for the headers and data.

It would be great if someone could explain why this approach is used. We were wondering why a standard table tag with a row of th for the headers and td for the data couldn't be used instead?

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
John Mills
  • 10,020
  • 12
  • 74
  • 121
  • If you have an interest in alignment of column headers look at http://stackoverflow.com/questions/3003187/jquery-jqgrid-how-to-set-alignment-of-grid-header-cells/3006853#3006853 – Oleg Jan 25 '11 at 06:33
  • The issue isn't actually with the alignment of text in a column, but rather that the header columns and data columns line up with each other. For example, the third header might straddle the second and third data columns. – John Mills Jan 25 '11 at 23:22
  • Anyway, I have solved the issue by tweaking the CSS and wrapping each data value in a div. Our designer didn't quite _get_ the HTML and CSS emitted by jqgrid. My question still stands though, why is the multi-table approach used by the afore mentioned grid components? – John Mills Jan 25 '11 at 23:24

1 Answers1

2

The reason these plugins use separate tables for headers and data is to allow for fixed header scrolling. As far as I know you cannot have headers and data in the same table, yet fix the headers to the top during scrolling.

Also for your alignment issue, if possible, I believe these plugins all have settings where you can set how wide you want each column, and this will make the data and header columns line up properly.

Zholen
  • 1,762
  • 2
  • 24
  • 53