title: Data table's features disable when using other scripts for bootstrap modal
body: <p><a href="https://i.stack.imgur.com/7n5Lp.png" rel="nofollow noreferrer">Picture of head contents</a>I'm developing a small web page and I'm using datatables, when I add some other js for Bootstrap modal, features of my datatable go missing and if I don't use these then my modal don't show on click.<a href="https://i.stack.imgur.com/xmLqQ.png" rel="nofollow noreferrer">Modal code</a></p>
  
  <p>Here is my code of Modal which I'm unable to open:</p>
  
  <pre><code>&lt;!--Modal Details--&gt;
  &lt;div class="modal fade" id="myModal" role="dialog"&gt;
      &lt;div class="modal-dialog" id="printThis"&gt;
  
    &lt;!-- Modal content--&gt;
    &lt;div class="modal-content"&gt;
      &lt;div class="modal-header"&gt;
        &lt;h4 class="modal-title" style="color: black;"&gt;TEA BILL&lt;/h4&gt;
      &lt;/div&gt;
  
      &lt;div class="modal-body"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12"&gt; 
                  &lt;label style="color: black;"&gt;Name&lt;/label&gt;
                  &lt;h5 style="color: black;"&gt;Mr. Akbar Ali&lt;/h5&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;label  style="color: black;"&gt;For the month of&lt;/label&gt;
                  &lt;h5  style="color: black;"&gt;FEB 2018&lt;/h5&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12"&gt;
                  &lt;table class="table table-hover table-striped table-bordered" id="myTableItems"&gt;
                      &lt;thead&gt;
                          &lt;tr style="color: black;"&gt;
                              &lt;th scope="col"&gt;Item&lt;/th&gt;
                              &lt;th scope="col"&gt;Quantity&lt;/th&gt;
                              &lt;th scope="col"&gt;Amount&lt;/th&gt;
  
                          &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                          &lt;tr style="color: black;"&gt;
                              &lt;th scope="row"&gt;Tea&lt;/th&gt;
                              &lt;td&gt;0&lt;/td&gt;
                              &lt;td&gt;0&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr style="color: black;"&gt;
                              &lt;th scope="row"&gt;Coffee&lt;/th&gt;
                              &lt;td&gt;0&lt;/td&gt;
                              &lt;td&gt;0&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr style="color: black;"&gt;
                              &lt;th scope="row"&gt;Biscuit&lt;/th&gt;
                              &lt;td&gt;0&lt;/td&gt;
                              &lt;td&gt;0&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr style="color: black;"&gt;
                              &lt;th scope="row"&gt;Drinks&lt;/th&gt;
                              &lt;td&gt;0&lt;/td&gt;
                              &lt;td&gt;0&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr style="color: black;"&gt;
                              &lt;th scope="row"&gt;Tea Break&lt;/th&gt;
                              &lt;td&gt;0&lt;/td&gt;
                              &lt;td&gt;0&lt;/td&gt;
                          &lt;/tr&gt;
                          &lt;tr style="color: black;"&gt;
                              &lt;th scope="row"&gt;Misc&lt;/th&gt;
                              &lt;td&gt;0&lt;/td&gt;
                              &lt;td&gt;0&lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="row"&gt;
                  &lt;div class="form-group col-md-6"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="form-group col-md-6"&gt;
                    &lt;label  style="color: black;"&gt;Total&lt;/label&gt;
                    &lt;h2  style="color: black;"&gt;0&lt;/h2&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="form-group col-md-6"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="form-group col-md-6"&gt;
                    &lt;label  style="color: black;"&gt;Arrear&lt;/label&gt;
                    &lt;h2  style="color: black;"&gt;0&lt;/h2&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="row"&gt;
                  &lt;div class="form-group col-md-6"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="form-group col-md-6"&gt;
                    &lt;label  style="color: black;"&gt;Grand Total&lt;/label&gt;
                    &lt;h2  style="color: black;"&gt;0&lt;/h2&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="form-group col-md-5"&gt;
  
                  &lt;/div&gt;
                  &lt;div class="form-group col-md-7"&gt;
                    &lt;br&gt;&lt;br&gt;&lt;p style="color: black; font: 12px;"&gt;&lt;strong&gt;IC Offrs Tea Bar&lt;/strong&gt;&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="modal-footer"&gt;
          &lt;button id="btnPrint" type="button" class="btn btn-default"&gt;Print&lt;/button&gt;
        &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Modal works when I use particular script links but datatable features go missing</p>