DataTables Custom Button

zgoforth

Hello, so I have been doing some research on DataTables buttons (with bootstrap), and wasn't able to come across anything that stood out to me/was what I was looking for. Is it possible to create a custom button on a DataTable (within a button collection) that will download a file from a SharePoint folder? For example a userguide?

kthorngren

This example shows how to use custom buttons with a button collection.

Kevin

zgoforth

@kthorngren Hey, I tried to add to my button collection but it gives me an error and doesn't work like intended.. Here is JSFiddle https://jsfiddle.net/opcmb86w/ . Ever since I added the new modal with the PDF location and the new button, my table doesn't appear anymore neither does the button collection

kthorngren

You have a syntax error:

Uncaught SyntaxError: Unexpected token ']'

Click on the line in the error and it shows this code:

      {
                        text: 'Update Table',
                        action: function (e, dt, node, config){
                        $('#myModal').modal('show');
                                        }
                                        
                ],

You are missing the closing } for line 1. It should go on line 6.

Kevin

zgoforth

@kthorngren I already tried that, and it still doesn't work... tells me Uncaught SyntaxError: Unexpected token '{' at line 1

kthorngren

tells me Uncaught SyntaxError: Unexpected token '{' at line 1

I placed the } in the spot I mentioned and didn't complain about syntax errors.

Kevin

zgoforth

@kthorngren Hm. so did I in my code.. and it gave me the same issue.. Could it be something with the HTML modal initalization

buttons: [{
                extend: 'collection',
                className: "btn-dark",
                text: 'Export/Update Table',
                buttons: [{
                        extend: "excel",
                        className: "btn-dark"
                    },
                    {
                        extend: "pdf",
                        className: "btn-dark"
                    },
                    {
                        extend: "print",
                        className: "btn-dark"
                    },
                    {
                        text: 'Update Table',
                        action: function (e, dt, node, config){
                        $('#myModal').modal('show');
                    },
                    {
                        text: 'User Guide',
                        action: function (e, dt, node, config){
                        $('#uGModal').modal('show');
                            }
                    }       
                ],
            }],

<div class="container">

        <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#uGModal">Open Modal</button>
        <!-- Modal -->
        <div id="uGModal" class="modal fade" role="dialog">
            <div class="modal-dialog modal-lg">

                <!-- Modal content-->
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">User Guide</h4>
                    </div>
                    <div class="modal-body">

                        <embed src="~/Sandbox/SiteAssets/Deliverables%20DataTable%20User%20Guide.pdf"
                               frameborder="0" width="100%" height="400px">

                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

kthorngren

tells me Uncaught SyntaxError: Unexpected token '{' at line 1

If you are getting this in your code (not the example) then you have another issue in your Javascript code that needs fixed. You are missing or have an extra symbol somewhere.

Kevin

tangerine

This is not a DataTables problem.
Run your code through a Javascript validator.