排序ajax表客戶端

我已經嘗試了幾個jQuery庫，到目前爲止我最喜歡Flexigrid。但是，似乎我需要重寫提供表數據的Web服務。如果可能，我想避免這種情況。我的代碼如下。結果看起來不錯，但排序不起作用。排序ajax表客戶端

我可以在不重寫我的網絡服務的情況下修復它嗎？

<!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>

來源

2013-01-04 Scott Beeson