jquery----Ajax異步獲取數據添加到表格中

 

 

 

方式一（服務器返回json數據，瀏覽器自己解析json數據）：

1.html中table中含有tbody

<table class="ui nine column table celled table-result" id="table-result">
            <thead>
            <tr>
                <th>hotelSeq</th>
                <th>酒店名稱</th>
                <th>訂單號</th>
                <th>聯系人手機號</th>
                <th>預定時間</th>
                <th>userId</th>
                <th>cellid</th>
                <th>gps定位城市</th>
                <th>wifi定位城市</th>
                <th>定位距離</th>
            </tr>
            </thead>
            <tbody id="tbody-result">
            </tbody>
        </table>

2 js方法中 后台查詢數據返回jsonArr 。text格式為text[txt[0],txt[1]]。txt[1]中數據為構建表格數據

　　可以先將表格中的數據清空

$.ajax({
            type: 'get',
            url: url,
            data: {docMainId: mainId},
            dataType: "json",
            success: function (text) {
                var str = "";
                
                var data = text[1];
                for ( var i=0;i<data.length;i++) {
                    str += "<tr>" +
                    "<td align='center'>" + (i+1) + "</td>" +
                    "<td style='display: none'>" +" <input type='input' class='tbody1' name='fdDetail_Form["+i+"].fdPlanId' value="+ data[i].fdPlanId +" />" + "</td>"+
                    "<td >" + " <input type='input' class='tbody1' readOnly='readOnly'  name='fdDetail_Form["+i+"].fdLandmark' value="+data[i].fdLandmark+" />" + "</td>" ;
                 "<td >" +" <input type='input' class='tbody1' readOnly='readOnly' name='fdDetail_Form["+i+"].fdCashCate' value='尾款'/>" + "</td>";
                
                  
                  "<td >" +" <input type='input' class='tbody1' readOnly='readOnly' name='fdDetail_Form["+i+"].fdReceivables' value="+ data[i].fdReceivables + " />" +"</td>" +
                    "<td>"+" <input type='input' class='tbody1' readOnly='readOnly' name='fdDetail_Form["+i+"].fdCollected' value=" + data[i].fdCollected + " />" +"</td>" +
                   if(data[i].fdUnreceivable=='0'||data[i].fdInvoiced=='0'){
                        str+="<td>"+" <input type='input' class='tbody1' readOnly='readOnly' name='fdDetail_Form["+i+"].fdThisReturn' value=''/>" +"</td>" + 
                        "</tr>";
                    }else{
            
                   str+= "<td>"+" <input type='input' id='returnId["+i+"]' class='tbody2' name='fdDetail_Form["+i+"].fdThisReturn' value=''  onblur='getIndex(this)' /> " +"</td>" + 
                    "</tr>";
                    }
                }
                
                tbody.innerHTML = str;
              
              
            }
            });
     
}

　　

方式二（服務器返回一個html文本（table），瀏覽器將table添加到html中）

方式1，服務器返回json

@ResponseBody
@GetMapping()
public JsonResult test(){}

方式2，服務器返回jhtml，需要ajax設置type

@GetMapping()
public String test(){
    return "xx"; //直接返回視圖
}

html頁面

    <table class="table el-table table-hover">
        <thead id="gridHead">
        <tr>
            <th>借款人</th>
            <th width="180px">借款標題</th>
            <th>年利率</th>
            <th>金額</th>
            <th>還款方式</th>
            <th>進度</th>
            <th width="80px">操作</th>
        </tr>
        </thead>
        <tbody id="gridBody">

        </tbody>
    </table>
    //用於分頁
    <div style="text-align: center;" id="page_container">
        <ul id="pagination" class="pagination"></ul>
    </div>

js

    $(function () {
        var searchForm = $("#searchForm");
        var gridBody = $("#gridBody");
        searchForm.ajaxForm(function (data) {
            // var slice = data.slice(43); 注意data不能有thymeleaf命名空間,如果有就需要字符串分割,將thymeleaf給剔除掉
            console.log(data)
            gridBody.hide(); //可能目的是隱藏原來的數據,但是好像沒有什么用
            gridBody.html(data); //將后台的html數據添加到頁面中
            gridBody.show(500);
        });
        /**
         *  頁面加載就直接發送ajax請求獲取數據,將數據添加到table中
         */
        searchForm.submit();
}　　

后台

	@PostMapping("invest_list")
	public String investList(BidRequestQueryObject qo, Model model) {
		if (qo.getBidRequestState() == -1) {
			qo.setBidRequestStates(new int[] {BidConst.BIDREQUEST_STATE_BIDDING, BidConst.BIDREQUEST_STATE_PAYING_BACK, BidConst.BIDREQUEST_STATE_COMPLETE_PAY_BACK });
		}
		model.addAttribute("pageResult", this.bidRequestService.query(qo));
		return "invest_list";
	}

invest_list

<tr th:each="data:${pageResult.listData}" th:if="${pageResult.listData.size()}>0">
    <td>[[${data.createUser.username}]]</td>
    <td>[[${data.title}]]</td>
    <td class="text-info">[[${data.currentRate}]]%</td>
    <td class="text-info">[[${data.bidRequestAmount}]]</td>
    <td>[[${data.returnTypeDisplay}]]</td>
    <td>
        <div class="">
            [[${data.persent}]]%
        </div>
    </td>
    <td><a class="btn btn-danger btn-sm"
           href="/borrow_info.do?id=${data.id}">查看</a></td>
</tr>
<tr th:if="${pageResult.listData.size()}==0">
    <td colspan="7" align="center">
        <p class="text-danger">目前沒有符合要求的標</p>
    </td>
</tr>

<script type="text/javascript" th:inline="javascript">
    $(function () {
        $("#page_container").empty().append($('<ul id="pagination" class="pagination"></ul>'));
        $("#pagination").twbsPagination({
            totalPages: [[${pageResult.totalPage}]],
            currentPage: [[${pageResult.currentPage}]],
            initiateStartPageClick: false,
            onPageClick: function (event, page) {
                $("#currentPage").val(page);
                $("#searchForm").submit();
            }
        });
    });
</script>

　　

 

 

 

原文：https://www.cnblogs.com/dss1025/p/9455791.html