$ (function () {var data = [[1, ' Exxon Mobil ', ' 339,938.0 ', ' 36,130.0 '], [2, ' Wal-mart Stores ', ' 315,654.0 ', ' 11 , 231.0 '], [3, ' Royal Dutch Shell ', ' 306,731.0 ', ' 25,311.0 '], [4, ' BP ', ' 267,600.0 ', ' 22,341.0 '], [5, ' General Motors ', ' 192,604.0 ', ' -10,567.0 '], [6, ' Chevron ', ' 189,481.0 ', ' 14,099.0 '], [7, ' DaimlerChrysler ', ' 186,106.3 ', ' 3,536.3 '], [8, ' Toyota motor ', ' 185,805.0 ', ' 12,119.6 '], [9, ' Ford motor ', ' 177,210.0 ', ' 2,02 4.0 '], [ten, ' ConocoPhillips ', ' 166,683.0 ', ' 13,529.0 '], [one, ' General Electric ', ' 157,153.0 ', ' 16,353.0 '], [A ' total ', ' 152,360.7 ', ' 15,250.0 '], [, ' ING Group ', ' 138,235.3 ', ' 8,958.9 '], [+], ' 131,045.0 ', ' 24,589.0 '], [All, ' AXA ', ' 129,839.2 ', ' 5,186.5 '], [+, ' Allianz ', ' 121,406.0 ', ' 5,442.4 '], [Volkswagen ', ' 118,376.6 ', ' 1,391.7 '], [+, ' Fortis ', ' 112,351.4 ', ' 4,896.3 '], [Crédit] , ' 110,764.6 ', ' 7,434.3 '], [American Intl Group ', ' 108,905.0 ', ' 10,477.0 ']; var obj = {width:700, height:400, title: "Grid from Array"}; Obj.colmodel = [{title: "Rank", width:100, DataType: "Integer"}, {title: "Company", width:200, DataType: "String" }, {title: "Revenues ($ millions)", width:150, DataType: "Float", align: "right"}, {title: "Profits ($ millions) ", width:150, DataType:" Float ", align:" right "}]; Obj.datamodel = {Data:data}; var $grid = $ ("#grid_parts"). Pqgrid (obj); $ ("#grid_parts_topVisible"). Change (function (evt) {//alert (""); $grid. Pqgrid ("option", "Topvisible", $ (this). Is (": checked")); }). attr ("Checked", $grid. Pqgrid ("option", "topvisible")); $ ("#grid_parts_bottomVisible"). Change (function (evt) {//alert (""); $grid. Pqgrid ("option", "Bottomvisible", $ (this). Is (": checked")); }). attr ("Checked", $grid. Pqgrid ("option", "bottomvisible")); $ ("#grid_parts_columnBorders"). Change (function (evt) {//alert (""); $grid. Pqgrid ("option", "Columnborders", $ (this). Is (": checked")); }). attr ("Checked", $grid. Pqgrid ("option", "columnborders")); $ ("#grid_parts_rowBorders"). Change (function (evt) {//alert (""); $grid. Pqgrid ("option", "Rowborders", $ (this). Is (": checked")); }). attr ("Checked", $grid. Pqgrid ("option", "rowborders")); $ ("#grid_parts_oddRowsHighlight"). Change (function (evt) {//alert (""); $grid. Pqgrid ("option", "Oddrowshighlight", $ (this). Is (": checked")); }). attr ("Checked", $grid. Pqgrid ("option", "Oddrowshighlight")); $ ("#grid_parts_numberCell"). Change (function (evt) {//alert (""); $grid. Pqgrid ("option", "Numbercell", $ (this). Is (": checked")); }). attr ("Checked", $grid. Pqgrid ("option", "Numbercell")); $ ("#grid_parts_autoHeight"). Change (function (evt) {//alert (""); $grid. Pqgrid ("option", "Flexheight", $ (this). Is (": checked")); }). attr ("Checked", $grid. Pqgrid ("option", "Flexheight")); $ ("#grid_Parts_autowidth "). Change (function (evt) {//alert (" "); $grid. Pqgrid ("option", "Flexwidth", $ (this). Is (": checked")); }). attr ("Checked", $grid. Pqgrid ("option", "Flexwidth")); $ ("#grid_parts_horizontal"). Change (function (evt) {//alert (""); $grid. Pqgrid ("option", "Scrollmodel", {horizontal: $ (this). Is (": Checked")}); }). attr ("Checked", $grid. Pqgrid ("option", "scrollmodel.horizontal")); $ ("#grid_parts_resizable"). Change (function (evt) {//alert (""); $grid. Pqgrid ("option", "resizable", $ (this). Is (": checked")); }). attr ("Checked", $grid. Pqgrid ("option", "resizable")); $ ("#grid_parts_paging"). Change (function (evt) {var paging= ""; if ($ (this). Is (": Checked")) {paging = "local"; } $grid. Pqgrid ("option", "datamodel.paging", paging); }). attr ("Checked", ($grid. Pqgrid ("option", "datamodel.paging") = = "local")? true:false); $ ("#grid_parts_roundCorners"). Change (function (evt) {$grid. pqgrID ("option", "Roundcorners", $ (this). Is (": checked")); }). attr ("Checked", $grid. Pqgrid ("option", "Roundcorners");});
because it can be commercially available for free, it doesn't require you to open source, and fully supports jquery's very good front-end table control.