@import "d...">
All geek questions in one place

What files are needed to use dataTable?

I am trying to initialize a DataTable but cannot.

<style type="text/css" title="currentStyle"> @import "demo_page.css"; @import "demo_table.css"; </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.dataTables.js"></script>

  • What's wrong?

  • Is table structure required?

  • Is data required?

 <table id="example"> <thead> <tr> <th>Column 1</th> </tr> </thead> <tbody> <tr> <td>data</td> </tr> </tbody> </table>
+4
source share
4 answers

Initialization requires only two files:

  • jQuery (however you want to enable it); then
  • jquery.dataTables.js (or shortened version).

Your table will look crazy without the proper CSS, (various spaces are added to facilitate sorting the icons), but they are not needed. They are just a style.

If it is not initialized with these two files and calling $('#myTable').dataTable() (in the document ready function), something else happens and you will need to look at your JavaScript console to see what errors are causing it.

Here it is in jsbin environment: http://live.datatables.net/olofeg

No CSS, only two JS files, a well-formed table and a call to dataTable() from the document ready function.

+4
source

To use a datatable, you have many options, one of the possibilities is to have a well-formed (with <thead> and <tbody> ) HTML table for "conversion"

 <style type="text/css" title="currentStyle">  @import "demo_page.css";  @import "demo_table.css"; </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.dataTables.js"></script> <table id="example"> <thead> <tr> <th>Column 1</th> </tr> </thead> <tbody> <tr> <td>data</td> </tr> </tbody> </table> <script type="text/javascript"> //initialize datatables (function($){ $('#example').dataTable(); }); </script>
+3
source

You must call the dataTable function in javascript

 <script type="text/javascript"> $(document).ready(function(){ $("example").dataTable(); }); </script>
+1
source

I explored all day. Presumably, jQuery is used by a large number of people, but I could not find the "Single" blog, which says that all the "minimal" things that will be imported into your html / jsp for using the jQuery datatable functions ... Therefore, I have compiled this into a small html page as shown below (this is fully working material, so please start with this and build it your own way.)

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"> <script type="text/javascript"> $(document).ready(function () { $("#companies").dataTable({ "sPaginationType": "full_numbers", "bJQueryUI": true }); }); </script> </head> <body id="dt_example"> <div id="container"> <div id="demo_jui"> <table id="companies" class="display"> <thead> <tr> <th>Company name</th> <th>Address</th> <th>Town</th> </tr> </thead> <tbody> <tr> <th>Atlassian</th> <th>Paramatta</th> <th>Sydney</th> </tr> <tr> <th>Oracle</th> <th>Whitefield</th> <th>India</th> </tr> </tbody> </table> </div> </div> </body> </html>
0
source

Source: https://habr.com/ru/post/1395024/

More articles:


All Articles