JQuery table plugin Introduction: Flexigrid and DataTables

JQuery has many table plug-ins. Flexigrid and DataTables are recently used and have powerful functions. Here we will introduce them. If you are looking for plug-ins to draw tables at the front end, consider them. Flexigrid features: you can drag and drop the column width to adjust the height and width. You can drag and drop to adjust the column header. You can sort the topic. You can support Ajax data sources in XML/JSON format. You can display/hide the column. Table search is supported by JavaScript API. this rich and beautiful table: you only need this code: $ ("# flex1 "). flexigrid ({url: 'post2. php ', dataType: 'json', colModel: [{display: 'iso', name: 'iso ', width: 40, sortable: true, align: 'center '}, {display: 'name', Name: 'name', width: 180, sortable: true, align: 'left'}, {display: 'printable name', name: 'prin Table_name ', width: 120, sortable: true, align: 'left'}, {display: 'iso3', name: 'iso3', width: 130, sortable: true, align: 'left', hide: true}, {display: 'Number Code', name: 'numcode', width: 80, sortable: true, align: 'right'}], buttons: [{name: 'add', bclass: 'add', onpress: test}, {name: 'delete', bclass: 'delete ', onpress: test}, {separator: true}], sew. EMS: [{display: 'iso ', name: 'Iso '}, {display: 'name', Name: 'name', isdefault: true}], sortname: "iso", sortorder: "asc", usepager: true, title: 'countries', useRp: true, rp: 15, showTableToggleBtn: true, width: 700, height: 200}); pay attention to the colModel attribute, it defines the column and displays each column. Unfortunately, it only provides this row-based row table (that is, the header is in the first row), and does not support column-based lists (that is, the header is in the first column) column definition and Data Set representation. So I wrote a piece of logic to convert the form of the latter into the forms it supports. Data Representation in JSON format supported by Flexigrid is still a little tedious, for example: {"page": "1", "total": 239, "rows ": [{"id": "AD", "cell": {"name": "Andorra", "iso": "AD", "printable_name": "Andorra 3 ", "iso3": "AND 1", "numcode": "20" }}, {"id": "AE", "cell": {"name ": "United Arab Emirates", "iso": "AE", "printable_name": "United Arab Emirates 3", "iso3": "ARE 1", "numcode ": "784"}]} the main reason for the tedious design is that the data format is too deep. In addition, it also contains too many items, not only data content, but also many optional fields that control paging and display. If you want to use JSON data of JavaScript only for a table, the original method "flexigrid" of the table itself cannot be supported. You need to call the API after the page is loaded, this is also a poor part of plug-in design: $ (document ). ready (function () {grid. addData (totalNumber, dataRows) ;}); finally, I want to say that when the data volume is large, I find that the performance of this plug-in is not good enough, when dragging the scroll bar of the table, you obviously feel stuck. Compared with DataTables, DataTables has much more functions. The official feature shows: Customizable paging real-time data filtering, multiple column sorting, automatic adjustment of column width, support for internationalization of various data sources, support for plug-ins, support for current table status keeping ...... The documentation is also rich, but what makes me uncomfortable is that the API definition is very vague (and the method name and parameter key both contain a seemingly awkward prefix of 1-2 characters, indicates the type). Although there are detailed API documentation, it is obviously not as good as self-commenting code. I like FixColumns, a plug-in that can be used to scroll the X axis, but lock the list header. The Code is also simple: $ (document ). ready (function () {var oTable = $ ('# example '). dataTable ({"sScrollY": "300px", "sScrollX": "100%", "sScrollXInner": "150%", "bScrollCollapse": true, "bPaginate ": false}); new FixedColumns (oTable); // from plugin}); you can see the prefix "very awkward" mentioned above. The oTable o indicates the object, s of sScrollX represents string, and B of bPaginate represents boolean. Compared with Flexigrid, the column Definition Format is similar, but the format designed based on the row data set is simpler. For example, the following simple object array is supported: [{"engine ": "Trident", "browser": "Internet Explorer 4.0", "platform": "Win 95 +", "version": 4, "grade": "X "}, {"engine": "Trident", "browser": "Internet Explorer 5.0", "platform": "Win 95 +", "version": 5, "grade ": "C"}] Such array elements are ordered, and each object is identified as a row, the key-value combination in each row matches different columns (engine, browser, platform, version, and grade ). It also supports nested array representation: [["Trident", "Internet Explorer 4.0", "Win 95 +", 4, "X"], ["Trident", "Internet Explorer 5.0", "Win 95 +", 5, "C"]