I wrote code using Ajax/C# that will append data with jQuery to HTML table ,this is the table headers:
table id='tblUsers' class='table table-striped table-condensed table-hover table-bordered table-responsive' >
<tr>
<th>Customer ID</th>
<th>Customer Name</th>
<th>File #</th>
<th>Territory</th>
<th>Start Date</th>
<th>Goods Desc</th>
<th>Custom Declaration</th>
<th>Quantity</th>
<th>Weight</th>
<th>Volumetric Weight</th>
<th>Mortage Amount</th>
<th>Invoice#</th>
<th>Invoice Amount</th>
</tr>
</table>
and this is the Ajax Call:
$.ajax({
url: "WebService.asmx/showResult",
type: "post",
data: JSON.stringify({
"dateFrom": $('#txtDateFrom').val(),
"dateTo": $('#txtDateTo').val(),
"ddlType": $("#ddlType").children("option").filter(":selected").val(),
"ddlTer": $("#ddlTer").children("option").filter(":selected").val(),
"ddlFilter": $("#filter").children("option").filter(":selected").val()
}), // parameters
beforeSend: function () {
$('#loader').html('<img src="Images/loading.gif" />');
},
contentType: "application/json; charset=utf-8",
success: function (result) {
$('#loader').html('');
document.getElementById('filter').style.display = 'inherit';
document.getElementById('logo').style.display = 'none';
document.getElementById('exp').style.display = 'inherit';
//To delete the whole tr except the first one.
$("#tblUsers").find("tr:gt(0)").remove();
$('#tblUsers').append(JSON.stringify(result));
if ($("#ddlType").val() != 0) {
document.getElementById('filter').style.display = 'none';
}
},
error: function () {
alert('error');
}
});
The WebMethod:
var sp = db.divideTypes(dateFrom, dateTo, ddlFilter).ToList();
foreach (var u in sp)
{
result += "<tr>";
result += "<td>" + u.custid + "</td>";
result += "<td>" + u.custname + "</td>";
result += "<td>" + u.depno + "</td>";
result += "<td>" + u.Terr + "</td>";
result += "<td>" + u.deidate + "</td>";
result += "<td>" + u.gooddesc+ "</td>";
result += "<td>" + u.custdec + "</td>";
result += "<td>" + u.pkg + "</td>";
result += "<td>" + u.wt + "</td>";
result += "<td>" + u.vwt + "</td>";
result += "<td>" + u.lcamt+ "</td>";
result += "<td>" + u.invno + "</td>";
result += "<td>" + u.invamt + "</td>";
result += "<td></td>";
result += "</tr>";
}
i tried to read articles over the web to export excel table as excel file but using JQuery, How to export HTML table data to excel sheet using Jquery
Heading
and there's a lot of articles like this all of them failed because i want to render Arabic letters so the letters looks strange.
i notice that there's an article in stackOverflow:Export Data table With Arabic Data to Excel
that talk about a situation similar to mine, but really i don't know how to implement it.