Answers

• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  September 2020

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

  Kevin
• zgoforth Posts: 493Questions: 98Answers: 2

  September 2020

  @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 Posts: 21,336Questions: 26Answers: 4,951

  September 2020 edited September 2020

  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 Posts: 493Questions: 98Answers: 2

  September 2020 edited September 2020

  @kthorngren I already tried that, and it still doesn't work... tells me Uncaught SyntaxError: Unexpected token '{' at line 1
• kthorngren Posts: 21,336Questions: 26Answers: 4,951

  September 2020 edited September 2020

  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 Posts: 493Questions: 98Answers: 2

  September 2020

  @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 Posts: 21,336Questions: 26Answers: 4,951

  September 2020 Answer ✓

  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 Posts: 3,365Questions: 39Answers: 395

  September 2020

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