使用AJAX动态生成table表格数据

时间：2024-04-11 21:03:10

《使用AJAX动态生成table表格数据》

【1】使用jquery-Ajax动态生成表格数据

【2】使用jquery.pagination.js和pagination.css生成分页栏

效果：

json数据为假数据，由一个data.json和data1.json 等组成。写多个json主要体现，点击分页栏，数据变化。

使用AJAX动态生成table表格数据

第一步：下载并导入js和css 文件。

需要三个文件：
jquery-1.8.3.min.js
jquery.pagination.js
pagination.css
jquery.pagination.js和pagination.css下载路径：
导入：


    

  1. <script type="text/javascript"
    2. 

  2.  src="${pageContext.request.contextPath}/js/jquery-1.8.3.min.js"></script>
    3. 

  3. <script type="text/javascript"
    4. 

  4.  src="${pageContext.request.contextPath}/js/jquery.pagination.js"></script>
    5. 

  5. 
<link href="${pageContext.request.contextPath}/css/pagination.css"

    6. 

  6.  rel="stylesheet" type="text/css">
    7. 





第二步：创建table表格和分页栏








    

  1. <table width="95%" border="0" align="center" cellpadding="0"
    2. 

  2.  cellspacing="0" class="table01" id="table01">
    3. 

  3.  <tr>
    4. 

  4.  <td width="17%" class="td_top">栏目名称</td>
    5. 

  5.  <td width="15%" class="td_top">上级栏目名称</td>
    6. 

  6.  <td width="44%" class="td_top">栏目描述</td>
    7. 

  7.  <td width="12%" class="td_top">删除</td>
    8. 

  8.  <td width="12%" class="td_top">修改</td>
    9. 

  9.  </tr>
    10. 

  10.   <!--创建一个空行 -->
    11. 

  11.  <tr id="dynamicCreate">
    12. 

  12.  <td class="td07"></td>
    13. 

  13.  <td class="td07"></td>
    14. 

  14.  <td class="td07"></td>
    15. 

  15.  <td class="td07"></td>
    16. 

  16.  <td class="td07"></td>
    17. 

  17.  </tr>
    18. 

  18.  </table>
    19. 

  19.  <!--创建一个分页栏 -->

    20. 

  20.  <div id="Pagination" style="margin-left: 400px" ></div>
    21. 





第三步：构造虚拟的json数据



使用AJAX动态生成table表格数据






 使用jquery.pagination.js插件，分页时可以只需要 当前页码，和总记录数，就可以实现分页。















    

  1. {"datas":
    2. 

  2. [{"child":[],"content":"体育新闻体育新闻体育新闻","id":1,"name":"体育新闻","parent":null},
    3. 

  3. {"child":[],"content":"娱乐新闻娱乐新闻娱乐新闻","id":2,"name":"娱乐新闻","parent":null},
    4. 

  4. {"child":[],"content":"时政新闻时政新闻时政新闻","id":3,"name":"时政新闻","parent":null}],
    5. 

  5. "pageNumber":1,
    6. 

  6. "pageSize":3,
    7. 

  7. "pageStartIndex":0,
    8. 

  8. "totalPages":8,
    9. 

  9. "totalRows":22}
    10. 





分页数据： "datas":[...] 包含的 



第四步：编写动态生成表格jquery代码








    

  1. <script type="text/javascript">
    2. 

  2.  var totalRows; // 总记录数
    3. 

  3.  var pageNumber;// 当前页码
    4. 

  4.  $(function(){
    5. 

  5.  Ajax(0,1,0); // 在页面加载的时候，自动发送ajax 请求，生成数据
    6. 

  6.                         //三个参数的含义： index1 ：在分页的时候用到，看url 路径，主要想提交不用的路径，显示不用的数据

    7. 

  7.                         // pageNumber 根据不同的页码，显示不用的分页数据

    8. 

  8.                         // newsLabelId ： 可以理解为是查询的条件，根据条件在后台筛选分页数据

    9. 

  9.  function Ajax(index1,pageNumber,newsLabelId){
    10. 

  10.  // 修改为ajax 来提交请求
    11. 

  11.  var url ="${pageContext.request.contextPath}/html/json/data"+index1+".json";
    12. 

  12.  $.get(url,
    13. 

  13.  {"pageNumber":pageNumber, 
    14. 

  14.  "newsLabelId":newsLabelId}
    15. 

  15.   // 重点代码：----------------------------------------------------
    16. 

  16.  function(data){
    17. 

  17.  //1,将class=dynamicCreate1清空，清空之前生成的tr，因为不清空会导致再生成新的tr时，原来的tr依然存在
    18. 

  18.  $(".dynamicCreate1").remove();
    19. 

  19.  //在数据生成完成后，隐藏了页面上空行的tr，需要显示出来才能使用。
    20. 

  20.  $("#dynamicCreate").show();
    21. 

  21.  // 拿到页面上的tr 对象
    22. 

  22.  var tr = $("#dynamicCreate");
    23. 

  23.  // 拿到需要遍历的数据
    24. 

  24.  var newslabledatas = data.datas;
    25. 

  25.  //遍历集合 index 是索引，item 是当前的对象
    26. 

  26.  $.each(newslabledatas, function(index, item){
    27. 

  27.  //克隆tr，每次遍历都可以产生新的tr，为了创建新的tr 
    28. 

  28.  var clonedTr = tr.clone(); 
    29. 

  29.  //拿到新的tr，循环遍历它每一个td元素，并赋值 inner_index 是当前td 的索引
    30. 

  30.  clonedTr.children("td").each(function(inner_index){ 
    31. 

  31.  //根据索引为每一个td赋值 
    32. 

  32.  switch(inner_index){ 
    33. 

  33.  case(0): // 判断是第一个 td ，就为其赋值
    34. 

  34.  // item.name 就是当前的 newslabledatas.name 
    35. 

  35.  $(this).html(item.name); 
    36. 

  36.  break; 
    37. 

  37.  case(1): 
    38. 

  38.  // 由于parent 元素可能为空，需要判断
    39. 

  39.  if (item.parent == null) {
    40. 

  40.  $(this).html("无上级目录"); 
    41. 

  41.  }else{
    42. 

  42.  $(this).html(item.parent.name); 
    43. 

  43.  }
    44. 

  44.  break; 
    45. 

  45.  case(2): 
    46. 

  46.  $(this).html(item.content); 
    47. 

  47.  break; 
    48. 

  48.  case(3): 
    49. 

  49.  $(this).html("<a href=${pageContext.request.contextPath}/desktop/news/removeNewsLabel.action?id="+item.id+ ">删除</a>"); 
    50. 

  50.  break;
    51. 

  51.  case(4): 
    52. 

  52.  $(this).html("<a href=# onClick=javascript:windowOpen('${pageContext.request.contextPath}/desktop/news/findNewsLabel.action?id="+item.id+"','','',670,260,'no','yes','100','100')>修改</a>"); 
    53. 

  53.  break; 
    54. 

  54.  }//end switch 
    55. 

  55.  });//end children.each 
    56. 

  56.  //把克隆好的tr追加原来的tr后面 ，这样才能看见新的tr
    57. 

  57.  clonedTr.insertAfter(tr); 
    58. 

  58.  // 将所有新生成的clonedTr ，既克隆出来的 tr 给予 class 属性，详情见	$(".dynamicCreate1").remove();的注释
    59. 

  59.  clonedTr.attr("class","dynamicCreate1");
    60. 

  60.  });//end $each 
    61. 

  61.  //隐藏id=clone的tr，因为该tr中的td没有数据，不隐藏起来会在生成的table第一行显示一个空行
    62. 

  62.  $("#dynamicCreate").hide(); 
    63. 

  63.  // 显示整个 table 表格
    64. 

  64.  $("#table01").show();
    65. 

  65.  // 下面的两条数据，主要是为 分页做准备的
    66. 

  66.  totalRows = data.totalRows; // 总记录数
    67. 

  67.  pageNumber= data.pageNumber; // 当前页的页码 
    68. 

  68.  },"json"); 
    69. 

  69.  }
    70. 

  70. 
});
</script>

    71. 






第五步：分页栏的处理


对于该插件的使用，可以借鉴网上很多的例子：









    

  1.  
    2. 

  2.  var pageIndex = pageNumber-1 ; //页面索引初始值
    3. 

  3.  var pageSize = 3; //每页显示条数初始化，修改显示条数，修改这里即可
    4. 

  4.  //分页，PageCount是总条目数，这是必选参数，其它参数都是可选
    5. 

  5.  $("#Pagination").pagination(100, {
    6. 

  6.  callback: PageCallback,
    7. 

  7.  prev_text: '上一页', //上一页按钮里text
    8. 

  8.  next_text: '下一页', //下一页按钮里text
    9. 

  9.  items_per_page: pageSize, //显示条数
    10. 

  10.  num_display_entries: 5, //连续分页主体部分分页条目数
    11. 

  11.  current_page: pageIndex, //当前页索引
    12. 

  12.  num_edge_entries: 2 //两侧首尾分页条目数
    13. 

  13.  }); 
    14. 

  14.  //翻页调用 index 是当前页的索引
    15. 

  15.  function PageCallback(index, jq) {
    16. 

  16.  Ajax(index,index+1,1);
    17. 

  17.  }
    18. 















Demo的源码：http://download.csdn.net/detail/qq_28817739/9873681




相关文章