先来看请求服务器api返回的json数据：
{
"code": 200,
"msg": "success",
"data": [
{
"id": 19,
"batchNumber": "6c284774467d4a399ce3667ae4056f2c",
"type": 1,
"clientId": 8,
"borrowNo": "10086256.00",
"userName": "王小强",
"userPhone": "18768444444.00",
"idNumber": "331000199003560000.00",
"capitalAmount": 2000,
"failureReason": "案件更新操作：第0条更新失败，记录不存在...",
"createTime": 1525340340000,
"updateTime": 1525405134000
},
{
"id": 20,
"batchNumber": "6c284774467d4a399ce3667ae4056f2c",
"type": 1,
"clientId": 8,
"borrowNo": "10086256.00",
"userName": "王小强",
"userPhone": "18768444444.00",
"idNumber": "331000199003560000.00",
"capitalAmount": 2000,
"failureReason": "案件更新操作：第0条更新失败，记录不存在...",
"createTime": 1525340440000,
"updateTime": 1525405133000
},
{
"id": 21,
"batchNumber": "6c284774467d4a399ce3667ae4056f2c",
"type": 1,
"clientId": 8,
"borrowNo": "10086256.00",
"userName": "王小强",
"userPhone": "18768444444.00",
"idNumber": "331000199003560000.00",
"capitalAmount": 2000,
"failureReason": "案件更新操作：第0条更新失败，记录不存在...",
"createTime": 1525340503000,
"updateTime": 1525405131000
},
{
"id": 22,
"batchNumber": "6c284774467d4a399ce3667ae4056f2c",
"type": 1,
"clientId": 8,
"borrowNo": "150365241.00",
"userName": "王小强",
"userPhone": "18768444444.00",
"idNumber": "331000199003560000.00",
"capitalAmount": 2000,
"failureReason": "案件更新操作：第0条更新失败，记录不存在...",
"createTime": 1525352245000,
"updateTime": 1525352245000
}
]
}
html调用js方法：
<span style="color: red;cursor: pointer;" onClick="showFailureRecordDetail('$!data.batchNumber')" >$!data.failNumber条失败</span>
js方法：主要向服务端发起ajax请求
function showFailureRecordDetail(param) {
jQuery.ajax({
type:'POST',
data:{"batchNumber":param},
url :'/failureRecord/findFailureRecordList',
dataType:"json",
success:function(data){
var dataObj = eval(data); //解析数据
console.log(dataObj.data.length);
if(data.code!="200"){
bootbox.alert(data.msg)
}
if(data.code=="200"){
#*失败详情弹框*#
var html = '';
html += '<div id="failureRecordDetail">'
html += '<div class="model-content-failure-detail">'
html += ' <p>'
html += '<div class="form-group" ><label style="margin-left: 19px; font-size: 17px;">失败详情</label></div>'
html += '<div class="form-group" style="margin: 0 10px 0 1%">'
html += '<table class="table tablesorter table-striped" style="table-layout: fixed;">'
html += '<thead>'
html += '<tr style="text-align: center">'
html += '<th style="width:5%;">序号</th>'
html += '<th style="width:10%;">委托方</th>'
html += '<th style="width:15%;">案件编号</th>'
html += '<th style="width:10%;">客户姓名</th>'
html += '<th style="width:15%;">手机号码</th>'
html += '<th style="width:20%;">身份证号</th>'
html += '<th style="width:10%;">委案金额</th>'
html += '<th style="width:15%;">失败原因</th>'
html += '</tr>'
html += '</thead>'
html += '<tbody>'
if(dataObj.data.length > 0){
//遍历数据
for (var i = 0; i < dataObj.data.length; i++) {
console.log(dataObj.data[i].batchNumber);
console.log(dataObj.data[i].userName);
html += '<tr style="cursor: pointer;">'
html += '<td>'+ + dataObj.data[i].id + '</td>'
html += '<td><p title="' + dataObj.data[i].clientId + '" class="mayOutRange">'+ dataObj.data[i].clientId + '</p></td>'
html += '<td><p title="' + dataObj.data[i].borrowNo + '" class="mayOutRange">'+ dataObj.data[i].borrowNo + '</p></td>'
html += '<td><p title="' + dataObj.data[i].userName + '" class="mayOutRange">'+ dataObj.data[i].userName + '</p></td>'
html += '<td><p title="' + dataObj.data[i].userPhone + '" class="mayOutRange">'+ dataObj.data[i].userPhone + '</p></td>'
html += '<td><p title="' + dataObj.data[i].idNumber + '" class="mayOutRange">' + dataObj.data[i].idNumber + '</p></td>'
html += '<td><p title="' + dataObj.data[i].capitalAmount + '" class="mayOutRange">' + dataObj.data[i].capitalAmount + '</p></td>'
html += '<td><p title="' + dataObj.data[i].failureReason + '" class="mayOutRange">' + dataObj.data[i].failureReason + '</p></td>'
html += '</tr>'
};
}else {
html += '<tr>'
html += '<td colspan="8" style="text-align: center">未找到相关数据</td>'
html += '</tr>'
}
html += '</tbody>'
html += '</table>'
html += '</div>'
html += '</p>'
html += '<p style="margin: 0 0 10px 75%;">'
html += '<button id="exExcel" class="btn btn-primary">导出</button> '
html += '<button id="closeUpdateModel" class="btn" onclick="closeFailureRecordDetail()">取消</button>'
html += '</p>'
html += '</div>'
html += '</div>';
$("#showFailureRecordList").html(html);
document.getElementById('failureRecordDetail').style.display = 'block';
}
},
error:function(XHR, status, errorThrown){
bootbox.alert("操作失败");
console.log(XHR)
console.log(status);
console.log(errorThrown);
}
});
}
结果展示：
