Basic usage

jgauffin edited this page Jan 26, 2012 · 3 revisions

The plugin has zero configuration. Create a form which identifies the data source:

<form action="/Themed/Items" id="mytable-form" method="post">
</form>

Create a table (the rel attribute is used to identify the column in your db/model)

<table id="mytable">
	<thead>
		<tr>
			<th rel="Id">
				Id
			</th>
			<th rel="FirstName">
				First Name
			</th>
			<th rel="LastName">
				Last Name
			</th>
		</tr>
	</thead>
	<tbody>
	</tbody>
</table>

Tell jqeury to load the plugin for your table:

<script type="text/javascript">
 $(function () {
		$('#mytable').griffinTable();
	});
</script>

Requirements

  • The form must have the same id as the table, but with -form as suffix.
  • Each table header must have a "rel" attribute with the column name in your model. (To allow reordering in future versions)
  • The <tbody> tag must exist, all elements are inserted in it.

Search box

Easy, just add one to the form:

<form action="/Themed/Items" id="mytable-form" method="post">
        Search: <input type="text" name="term" /> <input type="submit" value="Search" />
</form>

The form enables you to customize the searching entirely without hassle. Just add more items to the form and handle them in your web site.