Экспорт таблицы html в Excel не работает

Question

Я очень новичок в разработке. Я пытаюсь изучить что-то в веб-приложении. У меня есть таблица в html, и я хочу экспортировать эту таблицу в лист Excel, как только пользователь нажмет кнопку «Экспорт». Я получаю кнопку для экспорта и данные в таблице. Но он не получает Exported. Пожалуйста, помогите мне. Ниже упоминается мой код

<script src="../../Scripts/jquery-1.10.2.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery-ui-1.10.4.custom.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.dataTables.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.dataTables.min.js" type="text/javascript"></script> 
<script src="../../Scripts/jquery.dataTables.columnFilter.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#Movies').dataTable({ 
      "aLengthMenu": [2, 5, 10, 25, 50, 100], 
      "bJQueryUI": true, 
      "bFilter": false, 
      "sPaginationType": "full_numbers" 
     }).columnFilter({ "aoColumns": [ 
              { "type": "number" }, 
              null, 
              null, 
              { "type": "number" }, 
              { "type": "text" } 
             ] 
     }); 
    }); 
</script> 


<script type="text/javascript"> 
$("[id$=btnExport]").click(function(e) { 
    window.open('data:application/vnd.ms-excel,' + encodeURIComponent($('#TableDiv').html())); 
     e.preventDefault(); 
}); 
​</script> 


<% using (Html.BeginForm()) { %> 

<div> 
<button id="btnExport">Export to excel</button> 
</div> 

<% } %> 


<div id="Tablediv"> 
    <table id="Movies"> 
     <thead> 
      <tr> 
       <th> 
        ID 
       </th> 
       <th> 
        Movie 
       </th> 
       <th> 
        Director 
       </th> 
       <th> 
        Collection 
       </th> 
       <th> 
        Release Date 
       </th> 
      </tr> 
     </thead> 
     <tfoot> 
     <tr> 
     <th rowspan="1" colspan="1"> 
      <input class="search_init" type="text" value="ID" name="ID"/> 
     </th> 
     <th rowspan="1" colspan="1"> 
      <input class="search_init" type="text" value="Movie" name="Movie"/> 
     </th> 
     <th rowspan="1" colspan="1"> 
      <input class="search_init" type="text" value="Director" name="Director"/> 
     </th> 
     <th rowspan="1" colspan="1"> 
      <input class="search_init" type="text" value="Collection" name="Collection"/> 
     </th> 
     <th rowspan="1" colspan="1"> 
      <input class="search_init" type="text" value="Release Date" name="release_date"/> 
     </th> 
     </tr> 
     </tfoot>  
     <tbody> 
     <% foreach (MvcApplication1.Models.MovieResult item in ViewData.Model) 
      { %> 
     <tr> 
      <td> 
       <%=Html.DisplayFor(x=>item.ID) %> 
      </td> 
      <td> 
       <%=Html.DisplayFor(x=>item.Movie) %> 
      </td> 
      <td> 
       <%=Html.DisplayFor(x=>item.Director)%> 
      </td> 
      <td> 
       <%=Html.DisplayFor(x=>item.Collection)%> 
      </td> 
      <td> 
       <%=Html.DisplayFor(x=>item.Release_Date)%> 
      </td> 
     </tr> 
     <% } %> 

     </tbody> 
    </table> 

</div> 

Answer 1

Пожалуйста, напишите $("[id$=btnExport]").click(function (e) событие внутри $(document).ready(function() {, следующим образом.

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#Movies').dataTable({ 
      "aLengthMenu": [2, 5, 10, 25, 50, 100], 
      "bJQueryUI": true, 
      "bFilter": false, 
      "sPaginationType": "full_numbers" 
     }).columnFilter({ "aoColumns": [ 
              { "type": "number" }, 
              null, 
              null, 
              { "type": "number" }, 
              { "type": "text" } 
             ] 
     }); 
     $("[id$=btnExport]").click(function (e) { 
      var html = $('#Tablediv').html(); 
      window.open('data:application/vnd.ms-excel,' + encodeURIComponent(html)); 
      e.preventDefault(); 
     }); 
    }); 
</script>