I've tried a few jQuery libraries and so far I like Flexigrid the best. However, it appears I'll need to rewrite my web service that is providing the table data. I'd like to avoid this if possible. My code is below. The result looks great, but the sort does not work.
Can I fix it without rewriting my web service?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pending Server Requests</title>
<script src="scripts/jquery-1.7.1.min.js"></script>
<link href="css/site.css" rel="stylesheet" />
<link href="css/flexigrid.css" rel="stylesheet" />
<link href="css/flexigrid.pack.css" rel="stylesheet" />
<script src="Scripts/flexigrid.pack.js"></script>
<script src="Scripts/flexigrid.js"></script>
<script src="scripts/functions.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#status').html("Loading Report...");
$.ajax({
url: 'reportdata.asmx/rptPendingServerRequests',
type: 'POST',
dataType: 'xml',
success: function (data) {
$('#status').html("");
$(data).find("Table").each(function () {
request_id = $(this).find("request_id").text().toString();
status = $(this).find("status").text().toString();
req_by_user_id = $(this).find("req_by_user_id").text().toString();
$('#report tr:last').after('<tr id="' + request_id + '"><td class="id cell">' + request_id + '</td><td class="status cell">' + getStatus(status) + '</td><td class="user cell">' + req_by_user_id + '</td><td class="link cell"><a href="urlredacted' + request_id + '" target="_blank">View Request</a></span></td></tr>');
});
$('#report').flexigrid({
colModel: [
{ display: 'ID', name: 'id', width: 40, sortable: true, align: 'center' },
{ display: 'Status', name: 'status', width: 180, sortable: true, align: 'left' },
{ display: 'Requested By', name: 'requested_by', width: 120, sortable: true, align: 'left' },
{ display: 'Link', name: 'link', width: 120, sortable: false, align: 'left' }
],
sortname: "id",
sortorder: "asc",
usepager: false,
title: 'Server Requests',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 700,
height: 200
});
},
error: function (a, b, c) {
$('#status').html("Error: " + a.toString() + " " + b.toString() + " " + c.toString());
}
});
});
</script>
</head>
<body>
<h1>Pending Server Requests</h1>
<div id="content">
<table id="report">
<!-- <thead>
<tr>
<td class="id header">ID</td>
<td class="status header">Status</td>
<td class="user header">Requested By</td>
<td class="header">Link</td>
</tr>
</thead>-->
<tbody>
<tr style="display:none;"><td>test</td><td>test2</td><td>test3</td><td>test4</td></tr>
</tbody>
</table>
</div>
<div id="status">NULL</div>
</body>
</html>
