[Javascript] 取代 GridView，改用 ajax + JSON 來組合 HTML Table

個人一直在尋找取代 GridView 的方法，網上也有很多 Plugin，一個一個試用後，最後還是覺得自己手動來組 HTML Table 是最有彈性的，雖然跟現成的 Plugin 比起來較費時，但是可以彈性應付各種需求。

以下是用 jQuery ajax + JSON 來組合 HTML Table 的做法，先記錄一下，如果之後還有找到更適合的再說囉~

<script type="text/javascript" src="/jquery.js"></script>

<script type="text/javascript">

 $(function () {
  
  $.ajax(
   {
      type:"post",
      url: "getJSON.aspx",
      data:encodeURI('mode=test&parm1=tim&parm2=timothy'),
      success:
       function (strResult) {
          var tr;
          var json = $.parseJSON(strResult);
      
          for (var i = 0; i < json.length; i++) {
             tr = $('<tr/>');
             tr.append("<td>" + json[i].Pd_Id + "</td>");
             tr.append("<td>" + json[i].PartNo + "</td>");
             $('#tbl').append(tr);
          }
  
          // 加上排序功能
          $('#tbl').tablesorter();

          // 加上分頁功能
          $("#tbl").tablepage($("#table_page"), 10);
       },
      error:
         function () {
            alert('getJSON error!');
         }
     }
  );   
 });
</script>

HTML Table 格式如下，只定義出 title，內容就交給 Javascript 放進來：

<table id="tbl" border="1">
   <thead>
      <tr>
         <th>Pd_Id</th>
         <th>PartNo</th>
      </tr>
   </thead>
</table>

如果需要分頁功能，請參考 TablePage，排序功能請參考 TableSorter 或 SortTable。