how to display mysql database contents with slickgrid?

Question

newbie to stack overflow, doing my best to ask this question correctly.

aim:

1. to display the contents of a mysql database via slickgrid in an html page.
2. to be able to style this grid with a theme from the jquery ui theme roller.
3. to be able to edit and add records to the database via this interface.

research:

i have looked for all the major 'grid' apps and came across:

• phpgrid
• jqgrid
• datatables
• flexigrid

and also browsed through a list of grids here:

• 20 JQuery Table Datagrid Plugins

and read that the jquery ui team were actually going to release their own grid but it is on pause at the moment.

so with that research i decided on slickgrid because people have said it is fast and i like the clean layout and the fact that it can be skinned with jquery ui (and it is free).

most of the syntax and methods i have found for getting data from a database using slickgrid i can not understand (newbie in these areas to) but the closest i found to a set of 'instructions' was here:

SlickGrid AJAX data

however i get stuck at step 5.

so i guess this post is asking, can anyone please provide step-by-step instructions for a newbie on how to:

1. display the contents of a mysql database via slickgrid in an html page.
2. be able to edit and add records to the database via this interface.

i have downloaded the zip file from slickgrid github page which contains the existing examples.

thank you!

ps i had links to all apps and sources mentioned but as a new user was not able to post more than two links.

Answer 1

In the end it all boils down to displaying data in a table. All the grid pick up a table from the DOM , and 'enhance' them.

As a newbie, before setting up a page with a JQuery/Javascript grid, I would suggest first make a it work as a 'normal' table. When that is all working, its easier to understand what the grids do.

This should get you going:

 <table>
    <?
    $entries = $this->model->FindAll();
    if ( $entries )
      foreach ( $entries as $entry ) {
        ?>
        <tr>
          <td><?= $entry['admid'] ?></td>
          <td><?= $entry['admname'] ?></td>
          <td><?= $entry['admemail'] ?></td>
        </tr>
        <?
      }
    ?>
  </table>

I had some good results with ' Datatables.net ', but most grids only differ in ease of configuration and feature set.