jQuery 스크립트가 있습니다. 개념은 버튼을 클릭 할 때 AJAX 함수를 호출하여 번호를 계산하는 것입니다. 특정 검색어의 행 수 그런 다음 호출이 성공하면 jQuery 변수에 행 수가 저장됩니다.취소 버튼을 클릭하여 아약스 통화를 중지 할 수 없습니다.
그런 다음 AJAX 함수를 호출하여 시간당 10 개의 행을 사용하여 서버에서 데이터를 호출합니다.이 과정에서 db에서 일부 데이터를 가져올 때마다 점진적으로 증가하거나 채우는 진행률 막대가 나타납니다. 데이터 청크가 수신되면 전역 배열로 푸시됩니다. 마지막 아약스 호출이 빈 no. 또는 행을 선택하면 프로세스가 종료됩니다.
진행로드 로더와 함께 버튼을 클릭하면 AJAX 프로세스가 종료되어 호출을 중지하고 데이터 테이블에 수신 된 데이터를 표시합니다.
여기,
<script type="text/javascript">
var oTable;
var outer_start_row = 0;
var outer_limit = 1;
var final_data = [];
var cancel = false;
var total_data = 0;
$(document).ready(function() {
window.prettyPrint() && prettyPrint();
$('#load').click(function()
{
var v = $('#drp_v').val();
var cnt = $('#drp_cnt').val();
var ctg = $('#drp_ctg').val();
var api = $('#drp_api').val();
var nt = $('#drp_nt').val();
alert("version :"+v+" category :"+ctg+" country :"+cnt);
$.post("ajax.php",
{
'version':v,'category':ctg,
'country':cnt,'network_id':nt,
'api':api,'func':'total_data'
},
function(data)
{
total_data = data;
$("#progress_bar_container").fadeIn('fast');
});
load_data_in_datatable();
});
});
function stop_it()
{
cancel == true;
}
function load_data_in_datatable()
{
if(cancel == true)
{
alert(cancel);
return;
}
else
{
var v = $('#drp_v').val();
var cnt = $('#drp_cnt').val();
var ctg = $('#drp_ctg').val();
var api = $('#drp_api').val();
var nt = $('#drp_nt').val();
$.post("ajax.php",
{
'version':v,'category':ctg,
'country':cnt,'network_id':nt,
'api':api,'func':'show_datatable',
'start_row':outer_start_row,'limit':outer_limit
},
function(response)
{
var data = response.data;
var limits = response.limits;
outer_limit = limits.limit;
outer_start_row = limits.start_row;
if(data.length > 0)
{
for(var i = 0; i < data.length; i++)
{
final_data.push(data[i]);
}
var current = parseInt(final_data.length);
percent_load = Math.round((current/parseInt(total_data))*100);
$(".progress-bar").css("width",percent_load+"%");
$(".progress-bar").text(percent_load+"%");
load_data_in_datatable();
}
else
{
create_datatable();
cancel = true;
return;
}
},'json');
}
}
function create_datatable()
{
$("#progress_bar_container").fadeOut('fast');
var aColumns = [];
var columns = [];
for(var i = 0; i < final_data.length; i++)
{
if(i>0)
break;
keycolumns = Object.keys(final_data[i]);
for(j = 0; j < keycolumns.length; j++)
{
if($.inArray(keycolumns[j],aColumns.sTitle)<=0)
{
aColumns.push({sTitle: keycolumns[j]}) //Checks if
columns.push(keycolumns[j]) //Checks if
}
}
}
var oTable = $('#jsontable').dataTable({
"columns":aColumns,
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"aButtons": [
{
"sExtends": "csv",
"sButtonText": "CSV",
}
]
}
});
oTable.fnClearTable();
var row = []
for(var i = 0; i < final_data.length; i++)
{
for(var c = 0; c < columns.length; c++)
{
row.push(final_data[i][columns[c]]) ;
}
oTable.fnAddData(row);
row = [];
}
}
</script>
내 스크립트 문제의 취소 버튼을 클릭 할 때 내가 AJAX를 중지 할 수 있다는 것입니다.
왜 아래로 투표 하시겠습니까? 아약스 요청을 중단하는 것은 jquery meothod입니다. –
방금 링크를 보냈습니다 ..... 중단하는 법을 알고 있습니다 .... 어떻게 작동하는지에 대한 논리를 알고 싶었습니다. – Saswat
괜찮 았지만 질문에 대해서는 언급하지 마십시오. 아약스를 멈추고 싶니? 귀하의 질문을 확인하십시오. –