2014-11-22

[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,排序功能請參考 TableSorterSortTable

沒有留言:

張貼留言