jQuery table plug-in ParamQuery simple usage example_jquery

Implementation steps:
First add references to jQuery and jQuery UI in the head of the html:

Copy code The code is as follows:

< !--Same as above-->

Add a reference to Param Query Grid:

Copy the code The code is as follows:

   

Add script code:

Copy code The code is as follows:

$(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,024.0'],
                                [10, 'ConocoPhillips', '166,683.0', '13,529.0'],
                                [11, 'General Electric', '157,153.0', '16,353.0'],
                                [12, 'Total', '152,360.7', '15,250.0'],
                                [13, 'ING Group', '138,235.3', '8,958.9'],
                                [14, 'Citigroup', '131,045.0', '24,589.0'],
                                [15, 'AXA', '129,839.2', '5,186.5'],
                                [16, 'Allianz', '121,406.0', '5,442.4'],
                                [17, 'Volkswagen', '118,376.6', '1,391.7'],
                                [18, 'Fortis', '112,351.4', '4,896.3'],
                                [19, 'Crédit Agricole', '110,764.6', '7,434.3'],
                                [20, '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, dattype:" string "},
{title:" revenues ($ miss) ", 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 a div element where you want it to be displayed to display the table:

Copy code The code is as follows:

< /div>

Run it and you will see the effect

Demo added with Theme skin

Implementation steps:

There is no change in the logic part of the js code, haha.
Add a style reference to the head part of the html and you’re done, as follows:

Copy code The code is as follows:

/pqgrid/themes/peach/pq-grid.css" />

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn