Using the Flexigrid plugin for jQuery on an HTML table, not on XML file
I trying to use the Flexigrid plugin for jQuery which seems perfect for what I am being asked to do to do.
Now what I'm working with is an HTML table, and I don't have the ability to change it. The above site has three examples. The first two seem to apply the Flexgrid to existing tables, which is what I need, but they do not have the sorting option.
This is the code given for the first:
$('.flexme').flexigrid();
with the HTML table being:
<table class="flexme">
<thead>
<tr>
<th width="100">Col 1</th>
<th width="100">Col 2</th>
<th width="100">Col 3 is a long header name</th>
<th width="300">Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is data 1 with overflowing content</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
</tbody>
</table>
And I thought I could simply add the following:
{sortable : true}
, ending up with:
$('.flexme').flexigrid( {sortable : true});
But this does not work.
How can I do this?
Answer
After digging, I found and use an extra JS library named : jquery.tablesorter that you can find here : http://tablesorter.com/
It work then with flexigrid on a transparent way. I didn't test all possibilities, But it seems to work for the basic sorting.
Here my sample code follow. You will need to change some path to the different libraries
<html>
<head>
<title>Channels List</title>
<link rel="stylesheet" type="text/css" href="flexigrid/css/flexigrid.pack.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="flexigrid/js/flexigrid.pack.js"></script>
<script type="text/javascript" src="tablesorter/jquery.tablesorter.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#MyTable1").tablesorter();
}
);
</script>
</head>
<body>
<br><b><u>Channels List</b></u><br>
<table id='MyTable1' class="flexme">
<thead>
<tr>
<th width="100">Col1</th>
<th width="100">Col2</th>
<th width="100">Col3</th>
<th width="300">Col4</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is data 1a</td>
<td>This is data 2a</td>
<td>This is data 3a</td>
<td>This is data 4a</td>
</tr>
<tr>
<td>This is data 1b</td>
<td>This is data 2b</td>
<td>This is data 3b</td>
<td>This is data 4b</td>
</tr>
<tr>
<td>This is data 1c</td>
<td>This is data 2c</td>
<td>This is data 3c</td>
<td>This is data 4c</td>
</tr>
<tr>
<td>This is data 1d</td>
<td>This is data 2d</td>
<td>This is data 3d</td>
<td>This is data 4d</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$('.flexme').flexigrid({
title: 'This is a my test',
height:150,striped:false,
}
);
</script>
</body>
</html>