jQuery JSON-to-HTML Table Plugin Columns

Add-ons

2026-07-26 01:20 4 次浏览 • 0 次下载 53.1KB

jQuery JSON-to-HTML Table Plugin Columns

Plugin Description: Columns provides a simple way to convert JSON data into HTML tables and implement sorting, searching, categorization, pagination, filtering, and other features. All you need to do is provide the data, and Columns handles the rest.

Columns: Convert JSON Data into HTML Tables

Include the jQuery library (version 1.7 or later) and the Columns plugin files:

1 2	`<script` `src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>` `<script` `src="js/jquery.columns-2.0.min.js"></script>`

Include a prebuilt column or create your own theme

1	`<link` `rel="stylesheet"` `href="css/classic.css">`

Since dynamic column creation generates all the required HTML, the only HTML needed is an empty HTML element, such as a <div> tag, with a corresponding id for initialization.

1	`<div` `id="columns"></div>`

Finally, initialize Columns.

<script>
  $(document).ready(function() {
    var json = [{"col1":"row1", "col2":"row1", "col3":"row1"}, {"col1":"row2", "col2":"row2", "col3":"row2"}]; 
    $('#columns').columns({data:json});
  });
</script>

For detailed Columns parameters, see the demo.