Full and running example of datatables, please

Full and running example of datatables, please

TonteriasTonterias Posts: 6Questions: 2Answers: 0

Hi, I'm trying to find a complete example of datatables but I'm always missing something...

Can please someone tell me where to find a complete example that I can download (or an example with the links and script references working? Thanks

In github: https://github.com/DataTables/DataTables

The example code gives me errors when executed locally....

Failed to load resource: net: jquery-1.12.4.js :ERR_FILE_NOT_FOUND

Uncaught ReferenceError: jQuery is not defined jquery.dataTables.js:56 at jquery.dataTables.js:56 at jquery.dataTables.js:59

Uncaught ReferenceError: $ is not zero_configuration1.html:25 defined at zero_configuration1.html:25

Can please someone tell me where to find a complete example that I can download (or an example with the links and script references working? Thanks

This question has an accepted answers - jump to answer

Answers

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

    https://datatables.net/examples/basic_init/zero_configuration.html

    Full code is available on that page.
    You don't seem to understand that DataTables requires jQuery. Use your browser's "View source" on the example page to see the full HTML including necessary script and CSS files.

    Alternatively, read the manual.
    https://datatables.net/manual/installation

  • TonteriasTonterias Posts: 6Questions: 2Answers: 0

    Thanks Tangerine!!!!

    But the calls to this source does not work so the tables does work either... Sorry, I got to be doing sometthing really stupid but

    src="//code.jquery.com/jquery-1.12.4.js"

    Thanks Tangerine

  • TonteriasTonterias Posts: 6Questions: 2Answers: 0

    In this basic code it fails to load all the resources:

    <!DOCTYPE html>

    <html>
    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>Zona</title>

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">

    <style type="text/css" class="init"></style>


    <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.css">

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

    </head>

    <body>
    <div>
    <table id="example" class="display" 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>
    <tr>
    <td>Jena Gaines</td>
    <td>Office Manager</td>
    <td>London</td>
    <td>30</td>
    <td>2008/12/19</td>
    <td>$90,560</td>
    </tr>
    </tbody>
    </table>
    </div>

    </body>
    </html>

  • kthorngrenkthorngren Posts: 21,449Questions: 26Answers: 4,975
    Answer ✓

    Looks like you are loading the Datatables CSS twice. You should only load it once plus you are still missing jQuery and Datatables JS files.

    src="//code.jquery.com/jquery-1.12.4.js"

    You need to specify the path to the JS file, more like this:
    src="http://code.jquery.com/jquery-1.12.4.min.js"

    Take a look here for a default example:
    http://live.datatables.net/

    This is a Datatables test site. In your environment you will want to load a specific (1.10.15) version of Datatables instead of the nightly version loaded in the example.

    Kevin

  • TonteriasTonterias Posts: 6Questions: 2Answers: 0

    Thanks a lot Kevin and Tangerine!!!

    Dont you think that this: http://live.datatables.net/ should be advertised in the Basic initialization?

    Thanks you!

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

    Interesting point, @Tonterias.
    It is covered in this post:
    https://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read
    but of course it is very difficult to keep useful information in places where users can't fail to see it.

  • allanallan Posts: 63,689Questions: 1Answers: 10,500 Site admin

    I'll add it to the text that is shown when creating a new thread - thanks for the suggestion.

    Allan

This discussion has been closed.