File export not working with paging

File export not working with paging

jmcnamee328jmcnamee328 Posts: 6Questions: 1Answers: 0

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?

This question has an accepted answers - jump to answer

Answers

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394
    $(document).ready(function () {
                $('#suspended').DataTable();
            });
    

    Remove that code.

  • jmcnamee328jmcnamee328 Posts: 6Questions: 1Answers: 0

    That gives me the paging but not the file export options

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736

    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

  • jmcnamee328jmcnamee328 Posts: 6Questions: 1Answers: 0

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

  • jmcnamee328jmcnamee328 Posts: 6Questions: 1Answers: 0

    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>
    }
    
  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394
            $(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.

  • jmcnamee328jmcnamee328 Posts: 6Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,147Questions: 26Answers: 4,736
    Answer ✓

    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

  • jmcnamee328jmcnamee328 Posts: 6Questions: 1Answers: 0

    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.

This discussion has been closed.