12 Javascript table controls (DataGrid) are sorted out

12 Javascript table controls (DataGrid) are sorted out
When the DataSource property of a DataGrid control is set at design time, the control is automatically populated with the recordset from the data source, and its column headers are automatically set. You can then edit the grid's columns; delete, rearrange, add column headers, or adjust the width of any column.

1. Flexigrid

Flexigrid

Flexigrid is a Grid similar to Ext Grid, but developed based on jQuery. It has the following features: adjustable column width, merge column headers, paging, sorting, show/hide tables, etc. The data displayed by Flexigrid can be retrieved via Ajax or converted from a regular table.

2. Yahoo! UI Library: DataTable (Demo link)

Yahoo! UI Library: DataTable

The functions provided by the DataTable control include: sorting, column width adjustment, paging, inline editing, row selection, etc.

3. jqGrid

jqGrid

jqGrid is an Ajaxed jQuery Grid plugin. Provides paging function, adding, editing, deleting and searching records in the table, supports multiple data type input: XML, JSON, Array, etc., multi-row selection, supports subtables, integrated date selection controls, etc.

4. tableFormSynch (demo address)

tableFormSynch is a jQuery plugin that updates table and form data mutually. The functions it provides include: adding new rows based on the data in the form. Deletes the selected rows and clears all data in the form. tableFormSynch supports all form controls including: checkboxes, radio, buttons, select

5. DataTables

DataTables

DataTables is a jQuery plug-in that allows HTML tables to easily implement paging, filtering, and multi-column sorting. DataTables can use its own CSS style, but you can also customize the CSS style according to your needs. It has the following features:

  • Adaptive column width
  • Can save table status
  • Hidden columns
  • Dynamically create tables
  • Ajax automatic loading of data
  • Rich paging types
  • Multi-column sorting and highlighting

6. OmniGrid

OmniGrid

OmniGrid is a table control developed using Mootools1.2 and is similar to FlexGrid jQuery and SortableTable. It has paging, sorting, Ajax data loading, add/modify/delete table data functions, etc.

7. moodgets Grid (demo address)

moodgets Grid

moodgets Grid is an easy-to-use and extensible table control developed based on the Mootools framework. Drag to adjust table column width, sort, select multiple or single rows, click table cells to edit, paging, load data via Ajax.

8. MyTableGrid (demo address)

MyTableGrid

MyTableGrid is a DataGrid control developed based on the Prototype framework, which is used to display data in an easier to browse and more flexible way. It provides Ajax-supported fast paging and data sorting functions, and can drag and adjust the width of data columns and hide columns that do not need to be displayed.

9. GT-Grid

GT-Grid

A domestic company aims to build GT-Grid into a world-class list component to support a variety of applications. It can be a pure client application, or you can choose the built-in JAVA server as its client.

10. obout v3 Grid for ASP.NET

obout v3 Grid for ASP.NET

A faster Asp.net Grid. Its excellence lies in: loading millions of data records in just 1 second

11. Table widget (demo address)

Table widget

This control can convert a normal HTML Table into a sortable Table with fixed headers.

12. jExpand (demo address)

jExpand

jExpand is a jQuery plugin that makes tables scalable. Using this feature can help you better organize the table and allow the table to carry more information such as pictures, lists, charts and other elements.

<<:  Unity connects to MySQL and reads table data implementation code

>>:  About the implementation of JavaScript carousel

Recommend

Detailed explanation of basic interaction of javascript

Table of contents 1. How to obtain elements Get i...

Canonical enables Linux desktop apps with Flutter (recommended)

Google's goal with Flutter has always been to...

Implementation of deploying Apollo configuration center using docker in CentOS7

Apollo open source address: https://github.com/ct...

Linux system repair mode (single user mode)

Table of contents Preface 1. Common bug fixes in ...

Mini Programs use Mini Program Cloud to implement WeChat payment functions

Table of contents 1. Open WeChat Pay 1.1 Affiliat...

Summary of Linux date command knowledge points

Usage: date [options]... [+format] or: date [-u|-...

Detailed example of concatenating multiple fields in mysql

The MySQL query result row field splicing can be ...

CSS3 creates 3D cube loading effects

Brief Description This is a CSS3 cool 3D cube pre...

Detailed explanation of Docker data backup and recovery process

The data backup operation is very easy. Execute t...

Ubuntu View and modify mysql login name and password, install phpmyadmin

After installing MySQL, enter mysql -u root -p in...

Detailed explanation of the four transaction isolation levels in MySQL

The test environment of this experiment: Windows ...

HTML meta viewport attribute description

What is a Viewport Mobile browsers place web page...

CentOS 7 Forgot Password Solution Process Diagram

need Whether it is a Windows system or a Linux sy...