0

I'm using Bootstrap datatables in my asp.net web api project. So i have to reference several javascript files from the internet by a given link. One of them is:

https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js

I'm thinking of transferring the code to my own JS file, so that i could access the code even without internet connection. Because when there is no internet connection and i try to run my project, the table don't display well.

But the problem is, when i created a JS file and copypasted the code from the internet, and run my project it didn't work. The table don't display well. Why is this?

Nurul
  • 147
  • 1
  • 3
  • 15

1 Answers1

0

Simply copy pasting the javascript will not do the job. Make sure you have created an html table similar to below:

<table id = "example" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
    </tbody>
</table>

And then ask the plugin (javascript you have downloaded) to do its magic like this (I am giving it the id as the jquery selector):

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

In addition to the above, I am not sure where you saw the table you are expecting, but the above code will not render the table exactly like the one you are expecting. For that, you will also need to provide the CSS. The CSS may also be where you got the javascript code from.

CodingYoshi
  • 25,467
  • 4
  • 62
  • 64
  • I already did all you mentioned. One weird thing i just realised, when i use the online code, it displays well. but when i use the copypasted code, the alignment of navigation tabs and the bootstrap modal becomes haywire. the font also becomes diffferent. – Nurul Jan 04 '17 at 01:46
  • oh sorry you mean if you point the javascript reference to the online one from your file, then all works fine? – CodingYoshi Jan 04 '17 at 01:47
  • Yes, but only for the datatables. – Nurul Jan 04 '17 at 02:08
  • The datatables work well if i reference to the online file, but a glitch: the fonts become bigger; tabs, background colour, everything that involves css are positioned out of place in my page, somewhat being dragged to the right of the screen. When i click on a modal popup window, the modal is also dragged to the right edge of the browser and only shows half of the box, the left part(because its been dragged too much). Why is this happening? How can i fix this? – Nurul Jan 04 '17 at 07:45
  • When i try commenting out the jquery-1.12.4.js file, the modal and other things return back to normal. Why is this happening? Is it because i am loading other jquery scripts as well? – Nurul Jan 04 '17 at 09:38
  • If you are referencing two jquery versions on the same page, then yes you should comment one out and see if it all works well. Do you need both versions of jquery? If yes, let me know because their is a way to do it. – CodingYoshi Jan 04 '17 at 12:25
  • Yes, both is needed for different functions in my page. If i take one out, one of the functions didn't work. – Nurul Jan 05 '17 at 00:31
  • See [this](http://stackoverflow.com/questions/1566595/can-i-use-multiple-versions-of-jquery-on-the-same-page) on how to do that. – CodingYoshi Jan 05 '17 at 00:53