Question

我对发展很陌生。我正在尝试在Web应用程序中探索一些东西。我有一个html表，我想在用户点击导出按钮后将该表导出到Excel表格。我也在我的表中获取了导出按钮和数据。但它没有得到出口。请帮助我。下面提到的是我的代码

<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>

导出html表到Excel无法正常工作

1 个答案: