Show pageBacklinksBack to top This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong. ====== DataTables - The Basic ====== - Download datatables from [[https://datatables.net/download/]]. Here we use the DataTables style. - jQuery are required for datatables. We use jQuery 2.2.0. - Link style sheet datatables.min.css in your HTML - Add the datatables.min.js into your HTML - Create a <table></table> in HTML with an id="YOUR_TABLE_ID" - Add a <script></script> with $(document).ready(function(){$('#YOUR_TABLE_ID').DataTable();}); tab under your jQuery, and datetables js. ===== Download and Install DataTables===== 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: {{ :datatables:datatable1.png?direct&200 |}} 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. ===== The Rest ===== <code> <!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> </code> {{ :datatables:datatable2.png?direct&600 |}} datatables/datatables_basic.txt Last modified: 2018/10/24 11:35by chongtin