引导表数据在排序后消失

Question

我不确定为什么排序后数据表中的数据会消失。这是用户单击按钮后将触发的ajax脚本：

<script type="text/JavaScript">
 var showTestCaseDetails = {'click .record-details': function(e, value, row, index){
         var targetUrl = $(this).attr('id');
        $.ajax({
            type: "GET",
            url: targetUrl,
            dataType: "json",
            contentType: "application/json",
            success: function (responseObj) {
                $("#test-case-id").text(responseObj.testCaseID);
                $("#test-scenario").text(responseObj.testScenario);
                var tableRows = '';
                $.each(responseObj.responseResults,function(index,value){
                    var tempRow = '';
                    if (value.verdict === 'passed'){
                        tempRow = "<tr><td>" + value.fieldName + "</td><td>" + value.expected + "</td><td>" + value.actual +
                        "</td><td>" + '<div class="progress" style="height:20px;"> ' +
                        '<div class="progress-bar bg-success" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">' +
                        'Passed'+
                        '</div>'+
                        '</div>' + "</td></tr>"
                    }
                    else if(value.verdict === 'failed'){
                        tempRow = "<tr><td>" + value.fieldName + "</td><td>" + value.expected + "</td><td>" + value.actual +
                        "</td><td>" + '<div class="progress" style="height:20px;"> ' +
                        '<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">' +
                        'Failed'+
                        '</div>'+
                        '</div>' + "</td></tr>"
                    }
                    else {
                        tempRow = "<tr><td>" + value.fieldName + "</td><td>" + value.expected + "</td><td>" + value.actual +
                        "</td><td>" + '<div class="progress" style="height:20px;"> ' +
                        '<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">' +
                        'Failed'+
                        '</div>'+
                        '</div>' + "</td></tr>"
                    }
                    tableRows = tableRows + tempRow;
                })
                $("#table-body").html(tableRows);
                $("#http-method-verb").attr('value',responseObj.httpVerb);
                $("#api-url").val(responseObj.apiUrl);
                $("#req-headers").val(responseObj.reqHeaders);
                $("#request-list").text(responseObj.requestJson);
                $("#response-list").text(responseObj.responseJson);
                $("#test-case-record-details").modal("show");
            },
            error: function (xhr, ajaxOptions, thrownError) {
                window.alert(xhr.status);
                window.alert(thrownError);
            }
        });
 }};
</script>

HTML页面，表的设置如下：

<table id="testCase-details" class="table table-hover" data-toggle="table" data-classes="table-no-bordered" data-locale="en-US" >
    <thead style="border-top-style: hidden;">
        <tr style = "margin-top:15px; margin-bottom: 50px;">
            <th scope="col" style="width:30%" data-sortable="true">Field Name</th>
            <th scope="col" style="width:25%" data-sortable="true">Expected Value</th>
            <th scope="col" style="width:25%" data-sortable="true">Actual Value</th>
            <th scope="col" style="width:20%" data-sortable="true">Verdict</th>
        </tr>
    </thead>
    <tbody id="table-body">

    </tbody>
</table>

我可以将数据返回到页面。但是一旦排序，数据就会消失。