笔记：利用jquery异步加载table

1.首页页面建立容器

此处是点击类样式为list的btn，在类样式为add的div里面添加一个table

        <button class="list">列表</button>

        <div class="add"></div>

2.其次在javascript里面发起异步请求

• 发起异步请求
• 找到div容器并置空
• 此处一定利用empty()将容器置空，不然一直点击list的按钮，会重复出现许多表

$(".list").click(function () {
    $.get("news/all/1", function (res) {
        console.log(res);
        //找到添加的容器并置空
        var add = $(".add");
        add.empty();

3.controller里面处理异步请求

此处引用mybatis的分页组件，返回一个pageInfo对象。

    @ResponseBody
    @RequestMapping("/all/{pageNo}")
    public PageInfo selectAll(@PathVariable(name = "pageNo") Integer pageNo) {
        PageHelper.startPage(pageNo, 10);
        List<News> news = newsMapper.selectAll();
        PageInfo<News> pageInfo = new PageInfo<>(news);
        return pageInfo;
    }

4.页面接收返回的对象并处理

4.1首先创建表的表头

• 建表
• 给表增加样式
• 建立表头
• 表头加内容
• 表加入div容器

//创建表
var table = document.createElement("table");
//利用bootstrap给表增加样式
table.classList = "table table-hover table-striped"
//创建首行表头
var tableHead = table.insertRow(0);
//首行添加内容
tableHead.insertCell(0).innerHTML = "序号";
tableHead.insertCell(1).innerHTML = "资讯栏目";
tableHead.insertCell(2).innerHTML = "封面图";
tableHead.insertCell(3).innerHTML = "咨询标题";
tableHead.insertCell(4).innerHTML = "发布人";
tableHead.insertCell(5).innerHTML = "认证类型";
tableHead.insertCell(6).innerHTML = "发布电话";
tableHead.insertCell(7).innerHTML = "发布时间";
tableHead.insertCell(8).innerHTML = "发布地址";
tableHead.insertCell(9).innerHTML = "评论量";
tableHead.insertCell(10).innerHTML = "当前状态";
tableHead.insertCell(11).innerHTML = "审核状态";
tableHead.insertCell(12).innerHTML = "操作";

//表加进div容器
add.append(table);

4.2取得ajax返回值，利用for循序建表body

//表内容
var re = res.list;
for (let i = 0; i < re.length; i++) {
    let tr = table.insertRow(i + 1);//第二行开始
    //行内容
    tr.insertCell(0).innerHTML = re[i].id;
    tr.insertCell(1).innerHTML = re[i].type;
    tr.insertCell(3).innerHTML = "<img src=\"images/"+re[i].image+"\">";
    tr.insertCell(3).innerHTML = re[i].title;
    tr.insertCell(4).innerHTML = re[i].uname;
    tr.insertCell(5).innerHTML = re[i].rtype;
    tr.insertCell(6).innerHTML = re[i].tel;
    tr.insertCell(7).innerHTML = re[i].time;
    tr.insertCell(8).innerHTML = re[i].adress;
    tr.insertCell(9).innerHTML = re[i].number;
    if (re[i].status == 0) {
        tr.insertCell(10).innerHTML ="<span style=\"color: red\">未审核</span>";
    } else {
        tr.insertCell(10).innerHTML = "<span style=\"color: #4cae4c\">已审核</span>";
    }
    if (re[i].checkstatus == 0) {
        tr.insertCell(11).innerHTML ="<span style=\"color: red\">未审核</span>";
    } else {
        tr.insertCell(11).innerHTML ="<span style=\"color: #4cae4c\">已审核</span>";
    }
    tr.insertCell(12).innerHTML = "<a href=\"updateOne.jsp?one="+encodeURI(JSON.stringify(re[i]))+"\">修改</a>" +
        "&nbsp;&nbsp;<a href=\"seeOne.jsp?one="+encodeURI(JSON.stringify(re[i]))+"\">查看</a>";
}

4.3表尾的分页简单效果

//分页
let tableFoot = table.insertRow(re.length + 1);
tableFoot.insertCell(0).innerHTML = "共计" + res.pages + "页";
tableFoot.insertCell(1).innerHTML = "当前是" + res.pageNum + "页";
tableFoot.insertCell(2).innerHTML = "跳转到"+
    "<input type=\"number\" class=\"change\" style=\"width: 50px\">"+"页";

5.效果图显示如下：

点击列表按钮，异步加载表格如下：