方式一（服务器返回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>