Question

我在settimeout函数中在数据表中加载了超过10000条记录，但在后台操作完成之前页面没有响应。

需要避免页面无法响应，尽管进行后台操作。任何想法？

setTimeOut fn：

 setTimeout(function () {                
                var table = $('#tbcont').dataTable(); var str = '';
                for (var i = 300; i < rem_Data.length; i++) {
                    vehicle.push(rem_Data[i].Vehicleno);
                    str += "<tr><td>" + (i + 1) + " </td><td><span class='cls_ind_img' id='vehstatus" + i + "'><img src='/Images/CarPosition/" + rem_Data[i].Status + "'/></span></td>" +
                        "<td><span style='cursor: pointer;' onclick=senddata('" + "VehiclebasedDashboard.aspx?vehicleNo=" + rem_Data[i].Vehicleno + "') id='vehno" + i + "'>" + rem_Data[i].Vehicleno + "</span></td><td><span id='tracktime" + i + "'>" + rem_Data[i].TrackTime + "</span></td>" +
                        "<td><span id='location" + i + "'>" + rem_Data[i].location + "</span></td><td><span  id='speed" + i + "'>" + rem_Data[i].Speed + "</span></td><td><span class='cls_ind_img' id='ignition" + i + "'><img width='20' height='20' src='/Images/" + $.trim(rem_Data[i].Ignition) + ".png'/></span></td></tr>";
                }
                if (rem_Data.length > 300) {
                    $('#tbcont').dataTable().fnDestroy();
                    $('#tbcont tbody').append(str);
                    configtable('#tbcont');
                   $('#tbcont thead tr td div').each(function (index, element) {
                        $('#tbcont tbody tr td:nth-child(' + (index + 1) + ')').css('width', $(element).width() + 1 + 'px')
                    });
                    $('#tbcont tr td').css('padding', '3px 2px');
                    $('.cls_ind_img').parent().addClass('cls_ind_img');
                    $("#tbcont_wrapper").css("width", $('#tbcont thead tr').width() + 4 + 'px');
                    $('#tbcont tbody tr').css('display', 'block');                
                }                                                 
            }, 100)

Answer 1

您正在寻找异步请求：AJAX请求

像往常一样加载您的页面，而不执行数据库查询，但显示例如一个loading.gif
使用Javascript调用AJAX请求到仅执行数据库查询的脚本
处理AJAX回调中的请求返回，例如将html附加到div或评估返回的JSON

此外，您可以将数据查询分成几个块（例如条目1-5000,5001-10000等）

在后台执行操作时避免页面无响应

1 个答案: