Plugin to display a table with data. Flexigrid

The table we will do using jQuery- plugin " FlexiGrid ".
I am more than confident that experienced programmers are already familiar with this plugin, but as experience shows, some still do not know about such things.

This is actually an analogue of the well-known jqGrid plugin for jQuery .

Here are its main functions described by the creator:

• Column resizing
• Resizing table
• Sort data by title
• Beautiful theme
• Can convert regular table
• Using AJAX - data source (XML and JSON)
• Page navigation
• Show / hide columns
• Toolbar
• Search
• Available API
• Hide / show table
• Dynamic add / change GUI

At its core, the same as the popular jqGrid , only in a different interface. Here, the choice depends on which plugin more eyes pleases =) although there are still differences, you can find out about them if you use any more complex functions or need more subtle customization.
The plugin has been tested in the following browsers: IE6 / IE7, Firefox 2, Opera 9.x, Safari 3.0
')


I really liked the ability to generate a FlexGrid from a regular HTML table:
For example, we have one mogilnichok one table:

< table class ="our_tbl" >
< thead >
< tr >
< th > ID </ th >
< th > NAME </ th >
< th > CATEGORY </ th >
< th > DATE </ th >
</ tr >
</ thead >
< tbody >
< tr >
< td > This is data 1 with overflowing content </ td >
< td > This is data 2 </ td >
< td > This is data 3 </ td >
< td > This is data 4 </ td >
</ tr >
</ tbody >
</ table >

* This source code was highlighted with Source Code Highlighter .

For this, such code is enough

$( '.our_tbl' ).flexigrid();

* This source code was highlighted with Source Code Highlighter .

To use this feature you need:

• JQuery itself
• Flexigrid

Well, here's a working PHP implementation example.

The PHP code there is rather trivial and far from ideal, but the general principle is visible.

1. $ ( "# flex1" ) .flexigrid
3. (
4. {
5. url: 'post2.php' ,
6. dataType: 'json' ,
7. colModel: [
8. {display: 'ID' , name: 'id' , width: 40, sortable: true , align: 'center' },
9. {display: 'ISO' , name: 'iso' , width: 40, sortable: true , align: 'center' },
10. {display: 'Name' , name: 'name' , width: 180, sortable: true , align: 'left' },
11. {display: 'Printable Name' , name: 'printable_name' , width: 120, sortable: true , align: 'left' },
12. {display: 'ISO3' , name: 'iso3' , width: 130, sortable: true , align: 'left' , hide: true },
13. {display: 'Number Code' , name: 'numcode' , width: 80, sortable: true , align: 'right' }
14. ],
15. buttons: [
16. {name: 'Add' , bclass: 'add' , onpress: test},
17. {name: 'Delete' , bclass: 'delete' , onpress: test},
18. {separator: true },
19. {name: 'A' , onpress: sortAlpha},
20. {name: 'B' , onpress: sortAlpha},
21. {name: 'C' , onpress: sortAlpha},
22. {name: 'D' , onpress: sortAlpha},
23. {name: 'E' , onpress: sortAlpha},
24. {name: 'F' , onpress: sortAlpha},
25. {name: 'G' , onpress: sortAlpha},
26. {name: 'H' , onpress: sortAlpha},
27. {name: 'I' , onpress: sortAlpha},
28. {name: 'J' , onpress: sortAlpha},
29. {name: 'K' , onpress: sortAlpha},
30. {name: 'L' , onpress: sortAlpha},
31. {name: 'M' , onpress: sortAlpha},
32. {name: 'N' , onpress: sortAlpha},
33. {name: 'O' , onpress: sortAlpha},
34. {name: 'P' , onpress: sortAlpha},
35. {name: 'Q' , onpress: sortAlpha},
36. {name: 'R' , onpress: sortAlpha},
37. {name: 'S' , onpress: sortAlpha},
38. {name: 'T' , onpress: sortAlpha},
39. {name: 'U' , onpress: sortAlpha},
40. {name: 'V' , onpress: sortAlpha},
41. {name: 'W' , onpress: sortAlpha},
42. {name: 'X' , onpress: sortAlpha},
43. {name: 'Y' , onpress: sortAlpha},
44. {name: 'Z' , onpress: sortAlpha},
45. {name: '#' , onpress: sortAlpha}
46. ],
47. searchitems: [
48. {display: 'ISO' , name: 'iso' },
49. {display: 'Name' , name: 'name' , isdefault: true }
50. ],
51. sortname: "id" ,
52. sortorder: "asc" ,
53. usepager: true
54. title: 'Countries' ,
55. useRp: true
56. rp: 10,
57. showTableToggleBtn: true
58. width: 700,
59. height: 255
60. }
61. );
62. });
64. function sortAlpha (com)
65. {
66. jQuery ( '# flex1' ) .flexOptions ({newp: 1, params : [{name: 'letter_pressed' , value: com}, {name: 'qtype' , value: $ ( 'select [name = qtype]' ) .val ()}]});
67. jQuery ( "# flex1" ) .flexReload ();
68. }
70. function test (com, grid)
71. {
72. if (com == 'Delete' )
73. {
74. if ($ ( '.trSelected' , grid) .length> 0) {
75. if (confirm ( 'Delete' + $ ( '.trSelected' , grid) .length + 'items?' )) {
76. var items = $ ( '.trSelected' , grid);
77. var itemlist = '' ;
78. for (i = 0; i <items.length; i ++) {
79. itemlist + = items [i] .id.substr (3) + "," ;
80. }
81. $ .ajax ({
82. type: "POST" ,
83. dataType: "json" ,
84. url: "delete.php" ,
85. data: "items =" + itemlist,
86. success: function (data) {
87. alert ( "Query:" + data.query + "- Total affected rows:" + data.total);
88. $ ( "# flex1" ) .flexReload ();
89. }
90. });
91. }
92. } else {
93. return false ;
94. }
95. }
96. else if (com == 'Add' )
97. {
98. alert ( 'Add New Item Action' );
99. }
101. }

* This source code was highlighted with Source Code Highlighter .

and PHP code:

1. <? php
2. function countRec ($ fname , $ tname , $ where ) {
4. $ sql = "SELECT count ($ fname) FROM $ tname $ where" ;
6. $ result = runSQL ($ sql );
8. while ($ row = mysql_fetch_array ($ result )) {
10. return $ row [ 0 ];
12. }
14. }
17. $ page = $ _POST [ 'page' ];
19. $ rp = $ _POST [ 'rp' ];
21. $ sortname = $ _POST [ 'sortname' ];
23. $ sortorder = $ _POST [ 'sortorder' ];
27. if (! $ sortname ) $ sortname = 'name' ;
29. if (! $ sortorder ) $ sortorder = 'desc' ;
31. if ($ _POST [ 'query' ]! = '' ) {
33. $ where = " WHERE` " . $ _POST [ 'qtype' ]. "` LIKE '% " . $ _POST [ ' query ' ]. "% '" ;
35. } else {
37. $ where = '' ;
39. }
41. if ($ _POST [ 'letter_pressed' ]! = '' ) {
43. $ where = " WHERE` " . $ _POST [ 'qtype' ]. "` LIKE '" . $ _POST [ ' letter_pressed ' ]. "% '" ;
45. }
47. if ($ _POST [ 'letter_pressed' ] = = '#' ) {
49. $ where = " WHERE` " . $ _POST [ 'qtype' ]. "REGEXP '[[:::]]'" ;
51. }
53. $ sort = "ORDER BY $ sortname $ sortorder" ;
57. if (! $ page ) $ page = 1 ;
59. if (! $ rp ) $ rp = 10 ;
63. $ start = (($ page-1 ) * $ rp );
67. $ limit = "LIMIT $ start, $ rp" ;
71. $ sql = "SELECT id, iso, name, printable_name, iso3, numcode FROM country $ where $ sort $ limit" ;
73. $ result = runSQL ($ sql );
77. $ total = countRec ( 'iso' , 'country' , $ where );
81. header ( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" );
83. header ( "Last-Modified:" . gmdate ( "D, d MYH: i: s" ). "GMT" );
85. header ( "Cache-Control: no-cache, must-revalidate" );
87. header ( "Pragma: no-cache" );
89. header ( "Content-type: text / x-json" );
92. $ json = "" ;
94. $ json . = "{\ n" ;
96. $ json . = "page: $ page, \ n" ;
98. $ json . = "total: $ total, \ n" ;
100. $ json . = "rows: [" ;
102. $ rc = false ;
104. while ($ row = mysql_fetch_array ($ result )) {
106. if ($ rc ) $ json . = "," ;
108. $ json . = "\ n {" ;
110. $ json . = "id: '" . $ row [ ' id ' ]. "'," ;
112. $ json . = "cell: ['" . $ row [ ' id ' ]. "','" . $ row [ 'iso' ]. "'" ;
114. $ json . = ", '" . addslashes ($ row [ 'name' ]). "'" ;
116. $ json . = ", '" . addslashes ($ row [ 'printable_name' ]). "'" ;
118. $ json . = ", '" . addslashes ($ row [ 'iso3' ]). "'" ;
120. $ json . = ", '" . addslashes ($ row [ 'numcode' ]). "']" ;
122. $ json . = "}" ;
124. $ rc = true ;
126. }
128. $ json . = "] \ n" ;
130. $ json . = "}" ;
132. echo $ json ;
134. ? >

* This source code was highlighted with Source Code Highlighter .

I took the code from the example, did not alter it myself, a lot of things can be redone, especially the inconvenient assembly of the json string. It is much more convenient to use the json_encode () function.

This kind of tables are usually not very extensible, but for example, admin panel pages are very convenient to do, and most importantly quickly;)

PS: Crosspost from my blog