No Data while export excel or csv when using ajax call
No Data while export excel or csv when using ajax call
arvindGangwar
Posts: 3Questions: 1Answers: 0
This is my html:
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel">
<div class="x_title">
<div class="clearfix"></div>
</div>
<div class="firstdiv" style="overflow-x:auto;">
<table id="tranTable" class="display tranTable" border="1" style="width: 100%;">
<thead>
<tr>
<th>Txn Id</th>
<th>Client Txn Id</th>
<th>Amount</th>
<th>Date of Transaction</th>
<!-- <th>DOT Completion</th> -->
<th>Status</th>
<th>PayMode</th>
<th>Payer Name</th>
<th>Payer Contact No</th>
<th>Payer Email</th>
</tr>
</thead>
<tbody>
<!-- Image loader -->
<div id='loadingImage' style='display:none;'>
<!-- <img src="images/gif/ajax-loader.gif"/> -->
<img src='images/gif/ajax-loader-circle-thikbox.gif'/>
</div>
<!-- Image loader -->
</tbody>
</table>
</div>
</div>
</div>
<!-- jQuery -->
<script src="vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="vendors/nprogress/nprogress.js"></script>
<!-- iCheck -->
<script src="vendors/iCheck/icheck.min.js"></script>
<!-- bootstrap-daterangepicker -->
<script src="js/moment/moment.min.js"></script>
<!-- <script src="js/datepicker/daterangepicker.js"></script> -->
<script src="assets/libs/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<!-- Datatables 2 Start -->
<script src="assets/extra-libs/multicheck/datatable-checkbox-init.js"></script>
<script src="assets/extra-libs/multicheck/jquery.multicheck.js"></script>
<script src="assets/extra-libs/multicheck/datatables.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>
<script src="dist/js/pages/mask/mask.init.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.12/js/select2.min.js"></script>
<script src="assets/libs/jquery-asColor/dist/jquery-asColor.min.js"></script>
<script src="assets/libs/jquery-asGradient.js"></script>
<script
src="assets/libs/jquery-asColorPicker/dist/jquery-asColorPicker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-minicolors/2.3.4/jquery.minicolors.min.js"></script>
<!-- <script
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.7/quill.min.js"></script>
<script
src="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"
type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.1/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"> </script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script>
$(document).ready(function() {
$('#tranTable').DataTable( {
//"paging": false,
"ordering": false,
// "info": false,
"searching": false,
dom: 'Bfrtip',
buttons: [
'copy','csv', 'excel', 'pdf','print'
]
} );
} );
</script>
This is javascript method called on search Txn button
<script>
function loadTransaction() {
var clientCode="";
/* var clientCode = $('#dropdown option:selected').text() */
if(roleid == 3){
clientCode = $('#dropdown option:selected').val();
}else {
clientCode = $('#childClient option:selected').val();
}
var paymode = $('#dropdown1 option:selected').text();
var txnStatus = $('#statusDropDown option:selected').text();
alert("1------ clientCode "+clientCode+", tnStatus "+txnStatus+", paymode "+paymode);
/* var fromdate = $('.fromdt').val();
var todate = $('.todt').val(); */
var fromdate = $('.fromDate').val();
var todate = $('.toDate').val();
alert("1------ fromdate "+fromdate+", todate "+todate);
var reqUrl='';
var fromDateParts = new Date((Number(fromdate.split("/")[2])), (Number(fromdate.split("/")[1]) - 1), (Number(fromdate.split("/")[0])));
var formdateis = fromDateParts.getTime();
var toDateParts = new Date((Number(todate.split("/")[2])), (Number(todate.split("/")[1]) - 1), (Number(todate.split("/")[0])));
var todateis = toDateParts.getTime();
if(clientCode=='' || fromdate == '' || todate == '') {
alert("Please Fill All The Field");
}else {
if(formdateis>=toDateParts){
alert("From date should be smaller than To date");
}else{
if((paymode=='Select a payment type' || paymode=='All' ) && (txnStatus=='Select a Status type' || txnStatus=='All')){
reqUrl="<%=transactionApiUrl %>/transactionList?clientCode="+clientCode+"&fromDate="+formdateis+"&toDate="+todateis;
//alert("Txn reqUrl 1 : "+reqUrl);
}else if((paymode !='Select a payment type' || paymode !='All') && (txnStatus=='Select a Status type' || txnStatus=='All')){
reqUrl="<%=transactionApiUrl %>/transactionList?clientCode="+clientCode+"&fromDate="+formdateis+"&toDate="+todateis+"&payMode="+paymode;
alert("Txn reqUrl 2 with paymode : "+reqUrl);
}else if((txnStatus != 'Select a Status type' || txnStatus != 'All') && (paymode=='Select a payment type' || paymode=='All')){
reqUrl="<%=transactionApiUrl %>/transactionList?clientCode="+clientCode+"&fromDate="+formdateis+"&toDate="+todateis+"&txnStatus="+txnStatus;
alert("Txn reqUrl 3 with status : "+reqUrl);
}else{
reqUrl="<%=transactionApiUrl %>/transactionList?clientCode="+clientCode+"&fromDate="+formdateis+"&toDate="+todateis+"&payMode="+paymode+"&txnStatus="+txnStatus;
alert("Txn reqUrl 4 with paymode and status both : "+reqUrl);
}
$('#loadingImage').show(); // show the loading message.
$
.ajax({
type : 'GET',
dataType : 'json',
url : reqUrl ,
success : function(data) {
$("#tranTable tbody").empty();
//oTable = $('#tranTable').DataTable();
$("#tranTable tbody").clear();
if (data.response=='No Record Found') {
$("#tranTable tbody").append("<tr><td style='text-align: center;' colspan='10'>No Data Found</td></tr>");
$('#loadingImage').hide(); // Hide the loading message.
}else {
var row = '';
$.each(data.response, function(index, value) {
var DDMMYY_Date_Format = timeConverter(value.transDate);
//alert("Humant Redable DDMMYY_Date_Format >>>>>>> "+DDMMYY_Date_Format);
row += "<tr><td>" + value.txnId + "</td><td>" + value.clientTxnId +
"</td><td>" + value.paidAmount + "</td>"+
"<td>" +DDMMYY_Date_Format+ "</td>"+
/* "<td>" + hTransDate +"// "+finalDate "</td>"+
"<td>" + value.transDate + "</td>"+ */
"<td>" + value.status + "</td>"+
"<td>" + value.paymentMode + "</td>"+
"<td>" + value.payeeFirstName + "</td>"+
"<td>" + value.payeeMob + "</td>"+
"<td>" + value.payeeEmail + "</td></tr>"
;
// alert(row);
});
//alert(row);
$("#tranTable tbody").append(row);
$('#loadingImage').hide(); // Hide the loading message.
}
},
error : function(data) { // if error occured
alert("Error occured.please try again");
},
});
}
}
}
// end of loadTransaction
</script>
My data is populate in Table properly but when click on any of download button, only header is export in excel or csv file without table actual row data.
So please help me to resolve so that table data will export in csv or excel file
This discussion has been closed.
Answers
It looks like you are initializing Datatbles then fetching the rows via Ajax followed by adding the rows directly to the table bypassing Datatables. Datatables doesn't know about the added table rows. There are a couple options:
rows.add()to add the rows instead of using the$.each(data.response, function(index, value). Looks like your data is object based so you will also need to usecolumns.data.OR
$.each(data.response, function(index, value)loop you can userows().invalidate()to have Datatables update its data cache with the new data.Kevin
Thanks lots kthorngren for your valuable time and suggestion.
can you help me more with my specific code, as when I use
it through error, So please guide me where can I use .invalidate() method
It's not
It's
Colin
And place it after you append the rows to the table on line 29.
Kevin
Still it not showing data in DataTable while export to file
We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.
Cheers,
Colin