Converting HTML Tables to jqGrid

jqGrid is an excellent jQuery plugin for displaying data in a grid format. One of its useful features is the ability to convert HTML tables into jqGrid, which allows for enhanced user experience and additional functionality.

Calling Convention

To use the tableToGrid function, ensure that you mark the "Table to Grid" option when you download the grid. The calling convention for the function is:

tableToGrid(selector, options)

Note: This is a function, not a method.

The parameters are:

• selector (string): Can be either the table's class or id.
• options (array): An array with grid options.

HTML Table Structure

The HTML table should have the following structure:

<table class="mytable"> (or <table id="mytable">)
  <tr>
    <th>header 1</th>
    <th>header 2</th>
    ...
  </tr>
  <tbody>
    <tr>
      <td>data 1</td>
      <td>data 2</td>
      ...
    </tr>
    ...
  </tbody>
</table>

Example

Here is an example of how to convert an HTML table to jqGrid:

<!-- HTML Table -->
<table id="mytable">
  <tr>
    <th>header 1</th>
    <th>header 2</th>
    <th>header 3</th>
  </tr>
  <tbody>
    <tr>
      <td>data 1</td>
      <td>data 2</td>
      <td>data 3</td>
    </tr>
    <tr>
      <td>data 4</td>
      <td>data 5</td>
      <td>data 6</td>
    </tr>
  </tbody>
</table>

<!-- jQuery Script -->
<script>
  $(document).ready(function() {
    tableToGrid("#mytable", {
      height: 'auto',
      pager: '#pager',
      rowNum: 10,
      rowList: [10, 20, 30],
      sortname: 'id',
      sortorder: 'desc',
      viewrecords: true,
      gridview: true,
      autoencode: true,
      caption: "My First Grid"
    });
  });
</script>