Jquery datatable in play framework - $(“#example”)

2019-05-25 21:11发布

问题:

I'm trying to implement JQuery datatables in my play application.

Here is my code

    #{extends 'main.html' /}
    #{set title:'Customers List' /}
    <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/demo_table.css'}">
    <link rel="stylesheet" media="screen" href="@{'/public/stylesheets/demo_page.css'}">
    #{set 'moreScripts'}
    <script src="@{'/public/javascripts/jquery-1.5.2.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/jquery.dataTables.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@{'/public/javascripts/jquery.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script>
        $(document).ready( function() {
            oTable = $('#example').dataTable();
        });
    </script>
    #{/set}
    <div class="others" align="center">
                    <table width="100%" cellpadding="0" cellspacing="0" border="0" class="display" id="example">
                        <thead>
                        <tr>
                                <th>Header1</th>
                                <th>Header2</th>
                        </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>Col1</td>
                                <td>Col2</td>
                            </tr>
                        </tbody>
                    </table>
    </div>

When i run the page javascript throws an error

$("#example").dataTable is not a function

I checked all javascript/css files. All files were included. What could be the error.

回答1:

You must load DataTables AFTER jQuery in your scripts section, and you must only include jQuery once.

Try removing the second (non-minified) request for jQuery and see how you go.



回答2:

There are only two reason for the error

  1. You have not include jquery plugin before datatable plugin
  2. You have include more than one time jquery plugin

    if you still have the problem than try to use jquery plugin from cdn link is http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js and remove all other jquery plugins