DataTables - The Basic

  1. Download datatables from https://datatables.net/download/. Here we use the DataTables style.
  2. jQuery are required for datatables. We use jQuery 2.2.0.
  3. Link style sheet datatables.min.css in your HTML
  4. Add the datatables.min.js into your HTML
  5. Create a <table></table> in HTML with an id=“YOUR_TABLE_ID”
  6. Add a <script></script> with $(document).ready(function(){$('#YOUR_TABLE_ID').DataTable();}); tab under your jQuery, and datetables js.

Goto https://datatables.net/download/. The default one is good. Pick download, and download the zip file. Unzip the file. Copy the datatables.min.css, and datatable.min.js into your project. The DataTable-1.1x.xx\images\*.* are also needed.

For Grails, copy such directory into the assets\images directory like: I know it is ugly, but that's the way it is.

Then, put the css file, and the js file into the asserts\stylesheets and asserts\javascripts respectively.

<!doctype html>
<html>
<head>
    <title>Tables</title>
    <asset:stylesheet src="application.css"/>
    <asset:stylesheet src="datatables.min.css"/>
</head>

<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-sm-12">
            <table id="my-table" class="display">
                <thead>
                <tr>
                    <th>Header 1</th>
                    <th>Header 2</th>
                    <th>Header 3</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>r1 c1</td>
                    <td>r1 c2</td>
                    <td>r1 c3</td>
                </tr>
                <tr>
                    <td>r2 c1</td>
                    <td>r2 c2</td>
                    <td>r2 c3</td>
                </tr>
                <tr>
                    <td>r3 c1</td>
                    <td>r3 c2</td>
                    <td>r3 c3</td>
                </tr>
                </tbody>
            </table>

        </div>
    </div>
</div>
<asset:javascript src="application.js"/>
<asset:javascript src="datatables.min.js.js"/>
<script>
    $(document).ready(function () {
        $("#my-table").dataTable();
    });
</script>
</body>
</html>

  • datatables/datatables_basic.txt
  • Last modified: 2018/10/24 11:35
  • by chongtin