Apply Jquery DataTable in Prestashop

Question

How to i apply the jquery datatable plugin into prestashop tpl file?

i tried doing this by creating a custom tpl file

{extends file='customer/page.tpl'}
{block name='page_content'}
<link rel="stylesheet" 
href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function(){
$('#example').DataTable();
});
</script>
<br><br>
<div class="container">

<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>
    </tbody>
</table>


</div>
{/block}

here is the output

the jquery datatable is not appearing/working

is there anyway i can call the sources properly?

should i download all the sources not to call it like this?

Answer 1

In order for JS code to be properly executed in Smarty templates, you should surround it by {literal} {/literal} tags (see here)

Anyway that's definitely a bad practice, assuming you are developing a Prestashop module / controller, you should load your JS assets the Prestashop way and keep only your table logic into the template.