jquery Table Plug-in Paramquery Simple use Method Example _jquery

Implementation steps:
First, add a reference to the jquery and jquery UI in the head of the HTML:

Copy Code code as follows:

<link rel= "stylesheet" href= "Http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css"/ >
<script src= "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script> <!-- With CDN Link (adaptive http, https switch), so SRC beginning directly with the "//"-->
<script src= "//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" ></script> <!--ditto-- >

Add a reference to Param Query grid:

Copy Code code as follows:

<link rel= "stylesheet" href= "/content/pqgrid/pqgrid.min.css"/> <!--This CSS file must be quoted, whether you use the skin, or you do not use the skin, you have to refer to- ->
<script type= "Text/javascript" src= "/scripts/pqgrid.min.js" ></script> <!--This JS file must be referenced by-->

Add scripting code:

Copy Code code as follows:

$ (function () {
var data = [[1, ' Exxon Mobil ', ' 339,938.0 ', ' 36,130.0 '],
[2, ' 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,024.0 '],
[Ten, ' ConocoPhillips ', ' 166,683.0 ', ' 13,529.0 '],
[One, ' General Electric ', ' 157,153.0 ', ' 16,353.0 '],
[, ' Total ', ' 152,360.7 ', ' 15,250.0 '],
[' ING Group ', ' 138,235.3 ', ' 8,958.9 '],
[The ' 131,045.0 ', ' the ' 24,589.0 '],
[, ' 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 Agricole ', ' 110,764.6 ', ' 7,434.3 '],
[, ' American Intl. Group ', ' 108,905.0 ', ' 10,477.0 ']
];

var obj = {};
Obj.width = 700;
Obj.height = 400;
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};
$ ("#grid_array"). Pqgrid (obj);

});

Finally, add the div element where you want to display the table:

Copy Code code as follows:

<div id= "Grid_array" ></div>

Run and you can see the effect.

Add Theme Skin Demo

Implementation steps:
JS code Logic section without any changes, haha.
The head portion of the HTML adds a style reference, which is done as follows:

Copy Code code as follows:

<link rel= "stylesheet" href= "/content/pqgrid/pqgrid.min.css"/> <!-This sentence is added, the other without any changes ... Haha->
<link rel= "stylesheet" href= "/content/pqgrid/themes/peach/pq-grid.css"/>
<script type= "Text/javascript" src= "/scripts/pqgrid.min.js" ></script>