File export not working with paging

jmcnamee328 · February 2021

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: I am trying to use the paging and file export on the same table in an MVC web app.. I have the following in a script section on the view with the table:

$(document).ready(function () {
            $('#suspended').DataTable();
        });

        $(document).ready(function () {
            $('#suspended').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    'copy', 'csv', 'excel', 'pdf', 'print'
                ]
            });
        });

When I go to that page I get an error saying the table can't be re-initialized. How do I initialize the table with the file export options and the paging?

tangerine · February 2021

$(document).ready(function () {
            $('#suspended').DataTable();
        });

Remove that code.

jmcnamee328 · February 2021

That gives me the paging but not the file export options

kthorngren · February 2021

That gives me the paging but not the file export options

Have you loaded the required buttons CSS and JS files? Use the Download Builder to get the files.

If you still need help please post a link to your page or a test case showing the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

jmcnamee328 · February 2021

It isn't a live site yet so I can't provide a link. It is a .Net MVC Web App. I have the datatables.js package installed through nuget. I only need to be able to export to CSV for these reports.

Here is the _layout page

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title Reports</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
   
</head>
<body>

    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="@Url.Action("Index", "Home")">Home</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Reports
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" data-toggle="tooltip" title="reportsummary" href="@Url.Action("Index", "Suspended")">Report 1</a>
                        <a class="dropdown-item" data-toggle="tooltip" title="reportsummary" href="@Url.Action("Index", "Aging")">Report 2</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
    <br />
    <br />

    @RenderBody()
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

</body>
</html>

the view:

@model stateViewModel
@{
    ViewBag.Title = "Suspended Summary Line Items";
}

<div class="row justify-content-center">
    <h1 style="align-content:center">States</h1>
</div>
<br />

<div class="table-responsive-lg">
    <div>
        <table id="suspended" class="table table-hover table-primary">
            <thead>
                <tr>
                    <th>State 1</th>
                    <th>State 2</th>
                    <th>State 3</th>
                    <th>State 4</th>
                    <th>State 5</th>
                </tr>
            </thead>
            <tbody>
                    <tr>
                        <td>Ohio</td>
                        <td>New York</td>
                        <td>Oklahoma</td>
                        <td>Indiana</td>
                        <td>Michigan</td>
                    </tr>
                }
            </tbody>
        </table>
        <br />
        @*<div id="toolbar">
                <button class="btn btn-primary" id="export">Export to CSV</button>
            </div>*@
        <br />
    </div>
</div>

@section scripts{
 
    <script>
        $(document).ready(function () {
            $('#suspended').DataTable();
        });

        $(document).ready(function () {
            $('#suspended').DataTable({
                dom: 'Bfrtip',
                buttons: [
                    'csv'
                ]
            });
        });
        </script>
    
}

and the bundlesconfig

```
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js",
"~/Scripts/DataTables/jquery.dataTables.min.js",
"~/Scripts/DataTables/dataTables.buttons.min.js",
"~/Scripts/jzip.min.js",
"~/Scripts/DataTables/buttons.html5.min.js",
"~/Scripts/DataTables/buttons.print.min.js"
));
bundles.Add(new StyleBundle("~/Content/css").IncludeDirectory(
"~/Content", "*.css", true));

jmcnamee328 · February 2021

I am not sure how I can make a test case for it. It is a .net MVC web app. I have posted my _layout, view, and bundlesconfig below. I just need to be able to use the CSV file export.

bundles:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js",
                        "~/Scripts/DataTables/jquery.dataTables.min.js",
                        "~/Scripts/DataTables/dataTables.buttons.min.js",
                        "~/Scripts/jzip.min.js",
                        "~/Scripts/DataTables/buttons.html5.min.js",
                        "~/Scripts/DataTables/buttons.print.min.js"
                        ));
 bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      //"~/Scripts", "*.js", true
                      "~/Scripts/DataTables/dataTables.bootstrap.js",
                      "~/Scripts/DataTables/jquery.dataTables.js",
                      "~/Scripts/bootstrap.js"
                      //"~/Scripts/jszip.js",
                      ));
bundles.Add(new StyleBundle("~/Content/css").IncludeDirectory(
                        "~/Content", "*.css", true
                      //"~/Content/DataTables/",
                      //"~/Content/DataTables/css/dataTables.bootstrap.css",
                      //"~/Content/bootstrap.css",
                      //"~/Content/site.css"
                      ));

_layout

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title Suspended Accounts</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark">
        <a class="navbar-brand" href="@Url.Action("Index", "Home")">Home</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Reports
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" data-toggle="tooltip" title="reportsummary" href="@Url.Action("Index", "Suspended")">report 1</a>
                        <a class="dropdown-item" data-toggle="tooltip" title="reportsummary" href="@Url.Action("Index", "Aging")">report 2</a>
                    </div>
                </li>
            </ul>
        </div>
    </nav>
    <br />
    <br />
    @RenderBody()
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

</body>
</html>

view:

@model stateViewModel
@{
    ViewBag.Title = "report 1";
}
<div class="row justify-content-center">
    <h1 style="align-content:center">States</h1>
</div>
<br />
<div class="table-responsive-lg">
    <div>
        <table id="states" class="table table-hover table-primary">
            <thead>
                <tr>
                    <th>state</th>
                    <th>city</th>
                </tr>
            </thead>
            <tbody>
                    <tr>
                        <td>New York</td>
                        <td>Buffalo</td>
                    </tr>
                    <tr>
                        <td>Ohio</td>
                        <td>Cleveland</td>
                    </tr>
                    <tr>
                        <td>Indiana</td>
                        <td>Indianapolis</td>
                    </tr>
                }
            </tbody>
        </table>
        <br />
        <br />
    </div>
</div>
@section scripts{
    <script>
        $(document).ready(function () {
            $('#states').DataTable();
        });

        //$(document).ready(function () {
        //    $('#states').DataTable({
        //        dom: 'Bfrtip',
        //        buttons: [
        //             'csv'
        //        ]
        //    });
        //});
        </script>
}

colin · February 2021

It looks like you're missing some of the libraries still (for example pdfmake). If you look at this example here, ensure you have the necessary files listed on the Javascript and CSS tabs beneath the table.

Colin

tangerine · February 2021

        $(document).ready(function () {
            $('#states').DataTable();
        });
 
        //$(document).ready(function () {
        //    $('#states').DataTable({
        //        dom: 'Bfrtip',
        //        buttons: [
        //             'csv'
        //        ]
        //    });
        //});

Remove the first "$(document).ready(function ()" and uncomment the other one.

jmcnamee328 · February 2021

This is what I have for my bundles now:

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js",
                        "~/Scripts/DataTables/jquery.dataTables.js",
                        "~/Scripts/DataTables/dataTables.buttons.js",
                        "~/Scripts/jzip.min.js",
                        "~/Scripts/pdfmake/pdfmake.min.js",
                        "~/Scripts/pdfmake/vfs_fonts.js,",
                        "~/Scripts/DataTables/buttons.html5.min.js",
                        "~/Scripts/DataTables/buttons.print.min.js"
                        ));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/DataTables/dataTables.bootstrap.js",
                      "~/Scripts/DataTables/jquery.dataTables.js",
                      "~/Scripts/bootstrap.js"
                      ));
bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/DataTables/css/jquery.dataTables.css",
                      "~/Content/DataTables/css/buttons.dataTables.css",
                      "~/Content/DataTables/css/dataTables.bootstrap.css",
                      "~/Content/DataTables/css/responsive.bootstrap.css",
                      "~/Content/DataTables/css/responsive.dataTables.css",
                      "~/Content/bootstrap.css",
                      "~/Content/site.css"
                      ));

I removed the first "$(document).ready(function ()" and uncommented the other. The only change is that now the select number of results to show dropdown is gone but there are still no file export buttons.

kthorngren · February 2021

The only change is that now the select number of results to show dropdown is gone but there are still no file export buttons.

See this FAQ.

Looks like the biggest problem is you are loading jquery.dataTables.js twice (lines 3 and 13) which will cause problems. Try removing line 13.

Kevin

jmcnamee328 · February 2021

That did it! I didn't even see that second import there. Thank you all so much for your help. This was my first time using this DataTables plugin and I was driving myself crazy trying to figure it out.

File export not working with paging

File export not working with paging

Answers

Howdy, Stranger!

Categories

DataTables

File export not working with paging

File export not working with paging

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables