Export Aspx View Page HTML Table Data to Excel File - excel

Question

In my MVC3 Web application I have a aspx main view page and a partial View Page. My table is in Partial view. I have also applied Table sorter and other table css to it. Now I want to export data from this table to excel. I tried so many ways but it didn't worked for me. Can anyone Help Me Please...
Code of my partial view is:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<ApricaCRMEvent.Models.CRM.DatabaseEntities.CRM_Doctor_Request>>" %>
<!-- for table sorter and table Pager -->
<script src="../../__jquery.tablesorter/jquery.tablesorter.js" type="text/javascript"></script>
<script src="../../__jquery.tablesorter/jquery.tablesorter.widgets.js" type="text/javascript"></script>
<script src="../../__jquery.tablesorter/jquery.tablesorter.pager.js" type="text/javascript"></script>
<script type ="text/javascript" id="js">
$(function () {
// **********************************
// Description of ALL pager options
// **********************************
var pagerOptions = {
// target the pager markup - see the HTML block below
container: $(".pager"),
// use this url format "http:/mydatabase.com?page={page}&size={size}&{sortList:col}"
ajaxUrl: null,
// process ajax so that the data object is returned along with the total number of rows
// example: { "data" : [{ "ID": 1, "Name": "Foo", "Last": "Bar" }], "total_rows" : 100 }
ajaxProcessing: function (ajax) {
if (ajax && ajax.hasOwnProperty('data')) {
// return [ "data", "total_rows" ];
return [ajax.data, ajax.total_rows];
}
},
// output string - default is '{page}/{totalPages}'
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
output: '{startRow} to {endRow} ({totalRows})',
// apply disabled classname to the pager arrows when the rows at either extreme is visible - default is true
updateArrows: true,
// starting page of the pager (zero based index)
page: 0,
// Number of visible rows - default is 10
size: 10,
// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
// table row set to a height to compensate; default is false
fixedHeight: true,
// remove rows from the table to speed up the sort of large tables.
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
removeRows: false,
// css class names of pager arrows
cssNext: '.next', // next page arrow
cssPrev: '.prev', // previous page arrow
cssFirst: '.first', // go to first page arrow
cssLast: '.last', // go to last page arrow
cssGoto: '.gotoPage', // select dropdown to allow choosing a page
cssPageDisplay: '.pagedisplay', // location of where the "output" is displayed
cssPageSize: '.pagesize', // page size selector - select dropdown that sets the "size" option
// class added to arrows when at the extremes (i.e. prev/first arrows are "disabled" when on the first page)
cssDisabled: 'disabled' // Note there is no period "." in front of this class name
};
// Extend the themes to change any of the default class names ** NEW **
$.extend($.tablesorter.themes.jui, {
// change default jQuery uitheme icons - find the full list of icons here: http://jqueryui.com/themeroller/ (hover over them for their name)
table: 'ui-widget ui-widget-content ui-corner-all', // table classes
header: 'ui-widget-header ui-corner-all ui-state-default', // header classes
footerRow: '',
footerCells: '',
icons: 'ui-icon', // icon class added to the <i> in the header
sortNone: 'ui-icon-carat-2-n-s',
sortAsc: 'ui-icon-carat-1-n',
sortDesc: 'ui-icon-carat-1-s',
active: 'ui-state-active', // applied when column is sorted
hover: 'ui-state-hover', // hover class
filterRow: '',
even: 'ui-widget-content', // odd row zebra striping
odd: 'ui-widget-content' // even row zebra striping
});
// call the tablesorter plugin and apply the ui theme widget
$("table").tablesorter({
theme: 'jui', // theme "jui" and "bootstrap" override the uitheme widget option in v2.7+
headerTemplate: '{content} {icon}', // needed to add icon for jui theme
// widget code now contained in the jquery.tablesorter.widgets.js file
widgets: ['uitheme', 'zebra'],
widgetOptions: {
// zebra striping class names - the uitheme widget adds the class names defined in
// $.tablesorter.themes to the zebra widget class names
zebra: ["even", "odd"]
// set the uitheme widget to use the jQuery UI theme class names
// ** this is now optional, and will be overridden if the theme name exists in $.tablesorter.themes **
// uitheme : 'jui'
}
})
// bind to pager events
// *********************
.bind('pagerChange pagerComplete pagerInitialized pageMoved', function (e, c) {
var msg = '"</span> event triggered, ' + (e.type === 'pagerChange' ? 'going to' : 'now on') +
' page <span class="typ">' + (c.page + 1) + '/' + c.totalPages + '</span>';
$('#display')
.append('<li><span class="str">"' + e.type + msg + '</li>')
.find('li:first').remove();
})
// initialize the pager plugin
// ****************************
.tablesorterPager(pagerOptions);
});
</script>
<!-- end table sorter and table Pager -->
<table class="tablesorter" id="ResultList">
<thead id="headers">
<tr>
<th>
CRMId
</th>
<th>
Territory
</th>
<th>
Doctor(MDLNo)
</th>
<th>
Requester
</th>
<th>
Suggester
</th>
<th>
Division
</th>
<th>
Estimated
</th>
<th>
Actual
</th>
<th>
Priority
</th>
<th>
Notation
</th>
<th>
Deadline
</th>
<th>
ExecutedDate
</th>
<th>
CreatedDate
</th>
<th>
CRM State
</th>
<th>
Service State
</th>
</tr>
</thead>
<tbody>
<% foreach (var item in Model) { %>
<tr>
<td>
<%: Html.ActionLink(((int)item.Id).ToString(), "DetailsCRMRequest", "CRM", new { Id = item.Id, controllerName = "FilterCRMRequest", actionName = "Index" }, null)%>
<%--<%: Html.DisplayFor(modelItem => item.Id) %>--%>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Territory_Name) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Request_For_Name) %> (<%: Html.DisplayFor(modelItem => item.Request_For_Id) %>)
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Requester_Name) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Suggester_Name) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Division_Name) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Estimated_Amount) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Actual_Amount) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Compute_Priority) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.CRM_Notation_Name) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Deadline) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Executed_Date) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Date_Created) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Compute_CRM_State) %>
</td>
<td>
<%: Html.DisplayFor(modelItem => item.Compute_Service_State) %>
</td>
</tr>
<% } %>
</tbody>
<tfoot>
<tr class="pager" align="center">
<td colspan="15">
<img src="../../Content/images/first.png" class="first" alt="First" />
<img src="../../Content/images/prev.png" class="prev" alt="Prev" />
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
<img src="../../Content/images/next.png" class="next" alt="Next" />
<img src="../../Content/images/last.png" class="last" alt="Last" />
<select class="pagesize" title="Select page size">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
<select class="gotoPage" title="Select page number"></select>
</td>
</tr>
</tfoot>
</table>
I have already tried this : this works but gives me css in Excel file and 5 td fields from all 50 records result...
function Export(e) {
window.open('data:application/vnd.ms-excel,' + $('#ResultList').html());
e.preventDefault();
}
and this : it doesn't worked totally...
function Export() {
alert("called function");
str = "";
var myTableHead = document.getElementById('headers');
var rowCount = myTableHead.rows.length;
var colCount = myTableHead.getElementsByTagName("tr")[0].getElementsByTagName("th").length;
var ExcelApp = new ActiveXObject("Excel.Application");
var ExcelSheet = new ActiveXObject("Excel.Sheet");
ExcelSheet.Application.Visible = true;
alert("before for");
for (var i = 0; i < rowCount; i++) {
for (var j = 0; j < colCount; j++) {
str = myTableHead.getElementsByTagName("tr")[i].getElementsByTagName("th")[j].innerHTML;
ExcelSheet.ActiveSheet.Cells(i + 1, j + 1).Value = str;
}
}
alert("done");
}