Jquery Plugin-fixed table Header

Fixed table headers are a common topic. Many people have read their implementations from the Internet, but they are not satisfied. For many reasons, for example, the results are not implemented at all, or the ease of use is poor, so I tried to write a jquery Fixed Header plug-in and shared it with you. This plug-in is still in the test phase. If you want to use it directly, please fine-tune it according to your project.

Implementation principle:

 

Schematic description:

All rows (TR) can be divided into two parts: the table header and the table body. The table is split into two tables. The first table is the table header, and the second table is the table body, we need to drag the table body, so we will wrap the second table with a div for scroll, and then wrap it with a large Div, it looks like a complete table. In fact, the result is that two divs and two tables are assembled, and the original table is useless, if you delete it directly, it will be OK.

Jquery plug-in code:

// + Functions // | jquery Plugin: Fixed Header (test required) // | Author: Amin/+ ----------------------------------------------------- (function ($) {$. FN. extend ({scrolltable: function (options) {var defaults = {maxheight: 120, maxdataitemindex: 1 // pre-fixed maxdataitemindex as a Fixed Header}; Options = $. extend (defaults, options); return this. each (function () {var $ this = $ (this); // generate the header and body parts var $ clonetableheader = $ this. clone (); var $ clonetablebody = $ this. clone (); $ clonetableheader. find ("TR "). filter (function (INDEX) {return index> = options. maxdataitemindex }). remove (); $ clonetablebody. find ("TR "). filter (function (INDEX) {return index <options. maxdataitemindex }). remove (); // put the generated header and body part into the iner and make some fine-tuning $ this. after ("<Div class = 'scrolltableiner iner 'style = 'border: 1px solid;'> </div>"); $ this. next (). append ($ clonetableheader); $ this. next (). append ("<Div class = 'rolldiv 'style = 'overflow-Y: Scroll;'> </div>"); Define this.next().css ("width", $ this. width () + 20); $ this. next (). find ("Div. scrolldiv "mirror.css ({" Max-height ": options. maxheight, "width": $ this. width () + 20, "margin-top":-2}); $ this. next (). find ("Div. scrolldiv "). append ($ clonetablebody); $ this. remove () ;};}}) ;}( jquery );