jQuery Plugin To Render Tables From JSON or JS Objects - Table Renderer

Table Renderer is a jQuery plugin which enables you to generate a table from a JSON dataset or JavaScript objects, with support for table pagination and custom table row template.

How to use it:

1. Load jQuery table renderer plugin after jQuery library in the document.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/table-renderer.js"></script>

2. Define your table data in the JavaScript objects.

var friendsData = [
  {
    "name": "Zhorik",
    "secondName": "Joshnson",
    "phone": "380963336667"
  },
  ...
];

3. Create an empty table to render the table data.

<div id="table-wrapper">
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Name</th>
        <th>Second Name</th>
        <th>Phone</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
</div>

4. You need to define template for table row.

var rowTemplate = '<tr>' +
    '<td><%this.name%> </td>' +
    '<td><%this.secondName%> </td>' +
    '<td><%this.phone%> </td>' +
    '</tr>';

5. Initialize the plugin.

$('#table-wrapper').renderTable({
  template: rowTemplate,
  data: friendsData
});

6. Default options.

template: "", // custom table row template
data: {}, // table data
pagination: {
  rowPageCount: 3 // maximum rows per one page
},
defaultSortField: '',
defaultSortOrder: 1

---

This awesome jQuery plugin is developed by shullp. For more Advanced Usages, please check the demo page or visit the official website.