In this task, we will display data in a tabular format using Ajax. As a data source, we will use a predefined JSON object.
First of all, we will need to prepare a dummy JSON data source with all the items that will be displayed in our table:
json/requests.json:
[{
"id": "1",
"name": "Milan Sedliak Group",
"workflow": "Front End Q Evaluation",
"user": "Milan Sedliak",
"requestor": "Milan Sedliak",
"status": "submitted",
"email": "[email protected]",
"date": "Today 15:30"
},
{...}]As base HTML, we can use this source with a container for the table and toolbar. This toolbar will include selecting functionality for our items.
<div class="tableContainer"> <div class="tableToolbar"> Select <a href="#" class="selectAll">All</a>, <a href="#" class="selectNone">None</a>, <a href="#" class="selectInverse">Inverse</a> </div> ...