jquery table ajax,jQuery ajax动态生成table功能示例

function ajaxT(){

$.ajax({

type:"POST",

dataType: "json",

url:"UserInfoServlet",

data:"doaction=userList",

success:function(data){

createShowingTable(data);

}

}

);

}

//动态的创建一个table

function createShowingTable(data) {

var tableStr = "

tableStr = tableStr

+ "

"

+"

序号"

+"

"

+"

用户姓名"

+"

工号"

+"

职位"

+"

创建时间"

+"

";

var len = data.length;

for ( var i = 0; i < len; i++) {

tableStr = tableStr + "

"

+"

"+ (i+1) + ""

+"

"

+"

"+ data[i].realName + ""

+ "

"+ data[i].userNo + ""

+ "

"+ data[i].position + ""

+"

"+data[i].regTime+""

+"

";

}

if(len==0){

tableStr = tableStr + "

"

+"

"+ 暂无记录 + ""

+"

";

}

tableStr = tableStr + "

";

//添加到div中

$("#tableAjax").html(tableStr);

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个基于jQuery实现表格分组的示例代码: ```html <!-- 引入jQuerytablesorter插件的CSS和JavaScript文件 --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/css/theme.bootstrap_4.min.css" integrity="sha512-1RgA3bwn1WcYy8Z9g9dD9tGkZu8yVjz6mR8A7X5Ox7fMlJ7m+uqzj4KK1bQ5fO6J3YTd4RqUQuaieVJlK/ciZg==" crossorigin="anonymous" /> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js" integrity="sha512-NxLQZqhOZqJjyf+JzKzY+3jLlFJ8GhXvA6NlXjg3F0bxNqjyf4tWvTETZDTd1nLJX7qLJ1pD0nIttQlZ+uGvaw==" crossorigin="anonymous"></script> <!-- 在HTML中定义一个表格 --> <table id="myTable" class="table table-striped"> <thead> <tr> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>23</td> <td>男</td> </tr> <tr> <td>李四</td> <td>29</td> <td>男</td> </tr> <tr> <td>王五</td> <td>21</td> <td>女</td> </tr> </tbody> </table> <!-- 使用JavaScript代码实现表格分组 --> <script> $(document).ready(function() { // 初始化表格排序和分组 $("#myTable").tablesorter({ theme: "bootstrap", widgets: ["zebra", "group"], widgetOptions: { group_collapsed: false, group_count: " ({num})" }, }); }); </script> ``` 在这个示例中,我们使用了jQuerytablesorter插件来实现表格分组功能。我们定义了一个包含姓名、年龄和性别的表格,并在JavaScript代码中通过调用`tablesorter()`方法来初始化表格的分组功能。我们使用了Bootstrap主题和zebra、group插件来实现表格的交互效果和分组功能。我们还通过设置`group_collapsed`和`group_count`等选项来调整分组的默认行为。 除了tablesorter插件外,还有其他的表格分组插件可供选择,例如jQuery-TableDnD、jQuery-TreeGrid和jQuery-Treetable等。你可以根据自己的需求选择相应的插件。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值