Time for action — creating a basic data grid

Let's take a look at how to turn a basic HTML table into an interactive data grid:

  1. We'll get started as usual with our basic HTML file and associated files and folders, just like we did in Chapter 1, Designer, Meet jQuery. We'll fill the<body> of our HTML document with the HTML markup for a large table of data. The DataTables plugin does require that we are careful and correct with our table markup. We'll need to be sure to use a<thead> element for the table's header, and a<tbody> element for the table's body. A<tfoot> element for the table footer is optional. Here's an abbreviated sample of the HTML markup for a table of the all-time best-selling books:
    <table id="book-grid"> <thead> <tr> <th>Title</th> ...

Get jQuery for Designers Beginner's Guide now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.