\n[ulp id=’qGGDqWnle19VavkM’]<\/p>\n
1. Introduction<\/h2>\n
A DataTable is a JQuery\u00b4s plugin for creating HTML tables using the JQuery’s DOM manipulation power, this plugin allows add interactions to them. Interactions like searching, sorting, and pagination without configuration.<\/p>\n
DataTable and its extensions provide an extensive API that allows manipulating the data contained in the table. The design of this API represents the structure of the data on the table and provide ways to interact with the table. The API have 6 key areas to work with a table and its data:<\/p>\n
- \n
- Tables<\/li>\n
- Columns<\/li>\n
- Rows<\/li>\n
- Cells<\/li>\n
- Core<\/li>\n
- Utilities<\/li>\n<\/ul>\n
The DataTable API provides a set of extensions and plugins that add more functionality to the methods exposed through this API. To see the currently available extensions and plugins check the links below:<\/p>\n
- \n
- Extensions<\/a><\/li>\n
- Plugins<\/a><\/li>\n<\/ul>\n
For the full API methods documentation please refer to API reference<\/a><\/p>\n
2. Concepts<\/h2>\n
In order to be clear on some API concepts for the development of these examples, below I’ll explain a few important concepts to keep in mind for this implementation.<\/p>\n
- \n
- Instance: Is a simple API object that refers to a specific set of DataTables.<\/li>\n
- Result set: Is the data that is held for the API instance, comes in a javascript array way and you can access it using array notation.
[]<\/code><\/li>\n- Context: Describe the API DataTables linked with the instance, using this context you can access to one or more DataTables and interact with them.<\/li>\n<\/ul>\n
3. Using The API<\/h2>\n
On this section, we’ll see the different ways that allow obtaining an API instance for one or more tables. The API provides 3 ways to access to it, these ways are:<\/p>\n
- \n
$( selector ).DataTable();<\/code><\/li>\n<\/code>$( selector ).dataTable().api();<\/code><\/li>\n<\/code>new $.fn.dataTable.Api( selector );<\/code><\/li>\n<\/ul>\nThe result of each way is a DataTables API instance that has the tables found by the selector. It is an important difference between
$( selector ).DataTable();<\/code> and$( selector ).dataTable();<\/code>. The first one returns a DataTables instance, while the second one returns ajQuery type<\/code> object. Anapi()<\/code> method allows converting that JQuery object on a DataTables API instance.<\/p>\nThe JQuery object created by the
$( selector ).dataTable();<\/code> can be useful to manipulate the table node like any other JQuery object.<\/p>\n4. Chainig<\/h2>\n
This JQuery API feature allows the DataTables API to be used in an extensive way. This applies for methods that return the DataTable API instance, so you can call immediately another API method like is shown below.<\/p>\n
var table = $('#wcg_example').DataTable();\r\n \r\ntable.search( 'Carlos' ).draw();\r\n<\/pre>\nIn this code example, we are using the
search<\/code> anddraw<\/code> API, on a single line. This can be helpful to make our code shorter and clear.<\/p>\n5. Setup Environment<\/h2>\n
For implementing this example we need the next tools:<\/p>\n
- \n
- Web Browser (Chrome, FireFox, etc..), to check the Jquery browser compatibility please check this<\/a> URL<\/li>\n
- Text Editor (ATOM, Brackets, Notepad++, etc..)<\/li>\n<\/ol>\n
In order to implement these examples, we\u2019ll use the JQuery CDN. Also, you can download the JQuery library on a non-minified version for development purposes from here<\/a>.<\/p>\n
Also, we’ll use the DataTable CDN. In order to know how to use the CDN please refer to datatables.net<\/a>.\u00a0Also you can download the source code for development purposes with dependencies management tools like NPM<\/a> and\u00a0Bower<\/a>.<\/p>\n
6. Examples Implementation<\/h2>\n
In order to implement a JQuery data table it is first necessary to create a well formatted HTML table.<\/p>\n
6.1 HTML Table<\/h3>\n
To use the JQuery data table we need to create an HTML table following the structure below:<\/p>\n
<table id=\"wgc_table\" class=\"display\">\r\n <thead>\r\n <tr>\r\n <th>Column 1<\/th>\r\n <th>Column 2<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td>Row 1 Data 1<\/td>\r\n <td>Row 1 Data 2<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Row 2 Data 1<\/td>\r\n <td>Row 2 Data 2<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n<\/table>\r\n<\/pre>\n
The previous table must have the tags
thead<\/code> andtbody.<\/code>\u00a0Also like optional you can use thetfoot<\/code> tag. So this is the stantard html table structure that allows to integrate the JQuery data table with our html table.<\/p>\n6.2 JQuery DataTable Basic Initialization Example<\/h3>\n
In this example, we’ll see how to create a basic JQuery data table using the DataTable API and an HTML table. Please check the code below to see the implementation.<\/p>\n
basic_datatable_initialization_example.html<\/em><\/span><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<!-- Using the jquery CDN -->\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js\"><\/script>\r\n<!-- Using the jquery dataTables CSS CDN -->\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"\/\/cdn.datatables.net\/1.10.15\/css\/jquery.dataTables.css\">\r\n<!-- Using the jquery dataTables API CDN -->\r\n<script type=\"text\/javascript\" charset=\"utf8\" src=\"\/\/cdn.datatables.net\/1.10.15\/js\/jquery.dataTables.js\"><\/script>\r\n<\/head>\r\n<body>\r\n \r\n <!-- Target table to instantiate the DataTable API -->\r\n <table id=\"wgc_table\" class=\"display\">\r\n <thead>\r\n <tr>\r\n <th>Column 1<\/th>\r\n <th>Column 2<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td>Row 1 Data 1<\/td>\r\n <td>Row 1 Data 2<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Row 2 Data 1<\/td>\r\n <td>Row 2 Data 2<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n<\/table>\r\n <!-- JQuery code to initializate the DataTables API -->\r\n <script>\r\n $(document).ready( function () {\r\n $('#wgc_table').DataTable();\/\/Basic DataTable API instance \r\n });\r\n <\/script>\r\n\r\n<\/body> \r\n<\/html>\r\n<\/pre>\nThe output of the previous example shows us a default JQuery data table with some other default components provided by the API like a paginator, search text box, sorting component, and a default CSS style. See the output below.<\/p>\n
![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/06\/basic_jquery_table-1.png\")
<\/a>Figure 1. Basic jquery data table<\/figcaption><\/figure>\n 6.3 JQuery DataTable Advanced Initialization Example<\/h3>\n
In this example, we’ll see how to create a JQuery data table using an advanced DataTable API initialization. In this case data table events like order, search and page. For these events we will add a notification function that will be fired when the data table event occurs. Please check the code below to see the implementation.<\/p>\n
advanced_datatable_initialization_example.html<\/em><\/span><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<!-- Using the jquery CDN -->\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js\"><\/script>\r\n<!-- Using the jquery dataTables CSS CDN -->\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"\/\/cdn.datatables.net\/1.10.15\/css\/jquery.dataTables.css\">\r\n<!-- Using the jquery dataTables API CDN -->\r\n<script type=\"text\/javascript\" charset=\"utf8\" src=\"\/\/cdn.datatables.net\/1.10.15\/js\/jquery.dataTables.js\"><\/script>\r\n<\/head>\r\n<body>\r\n \r\n <!-- Target table to instantiate the DataTable API -->\r\n <table id=\"wgc_table\" class=\"display\">\r\n <thead>\r\n <tr>\r\n <th>Column 1<\/th>\r\n <th>Column 2<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td>Row 1 Data 1<\/td>\r\n <td>Row 1 Data 2<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Row 2 Data 1<\/td>\r\n <td>Row 2 Data 2<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Row 3 Data 1<\/td>\r\n <td>Row 3 Data 2<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Row 4 Data 1<\/td>\r\n <td>Row 4 Data 2<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Row 5 Data 1<\/td>\r\n <td>Row 5 Data 2<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Row 6 Data 1<\/td>\r\n <td>Row 6 Data 2<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Row 7 Data 1<\/td>\r\n <td>Row 7 Data 2<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Row 8 Data 1<\/td>\r\n <td>Row 8 Data 2<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Row 9 Data 1<\/td>\r\n <td>Row 9 Data 2<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Row 10 Data 1<\/td>\r\n <td>Row 10 Data 2<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Row 11 Data 1<\/td>\r\n <td>Row 11 Data 2<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Row 12 Data 1<\/td>\r\n <td>Row 12 Data 2<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Row 13 Data 1<\/td>\r\n <td>Row 13 Data 2<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Row 14 Data 1<\/td>\r\n <td>Row 14 Data 2<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Row 15 Data 1<\/td>\r\n <td>Row 15 Data 2<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Row 16 Data 1<\/td>\r\n <td>Row 16 Data 2<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n<\/table>\r\n <!-- Div panel for data table events -->\r\n <div id=\"events_output\">\r\n <\/div>\r\n <!-- JQuery code to initializate the DataTables API -->\r\n <script>\r\n \/\/when the DOM is rendered\r\n $(document).ready(function() {\r\n \/**\r\n This function will be fire when one of these events occurs\r\n Order, Search and page.\r\n This function prints a div with the name and date of the event fired. \r\n *\/\r\n var whenTheEventIsFired = function (eventName){\r\n var output = $('#events_output')[0];\r\n output.innerHTML += '<div>'+eventName+' event - '+new Date().getTime()+'<\/div>';\r\n }\r\n \r\n \/**\r\n Advanced initialization adding a function that will be executed when one of the data table events provided by the API occurs.\r\n *\/\r\n $('#wgc_table')\r\n .on( 'order.dt', function () { whenTheEventIsFired( 'Order' ); } )\/\/when the table is ordered\r\n .on( 'search.dt', function () { whenTheEventIsFired( 'Search' ); } )\/\/when search on the table using the search text box\r\n .on( 'page.dt', function () { whenTheEventIsFired( 'Page' ); } )\/\/when the pagination buttons are clicked.\r\n .DataTable();\r\n \r\n } );\r\n <\/script>\r\n\r\n<\/body> \r\n<\/html>\r\n<\/pre>\nAfter fired the 3 events provided by the JQuery data table API (order, search, and page) the function
whenTheEventIsFired<\/code> is executed and creates a new div container with the event name and the date when was executed. See the output below.<\/p>\n![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/06\/advance_jquery_table.png\")
<\/a>Figure 2. Advanced jquery data table<\/figcaption><\/figure>\n 6.3 JQuery DataTable Initialization Using The API And Javascript Data Example<\/h3>\n
In this example, we’ll see how to create a JQuery data table using directly the DataTable API and use a Javascript array in order to initialize the table with a dynamic data. We will also see how to create on the fly a JQuery data table using just the HTML table tag. Please check the code below to see the implementation.<\/p>\n
api_javascript_datatable_initialization.html<\/em><\/span><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<!-- Using the jquery CDN -->\r\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.2.1\/jquery.min.js\"><\/script>\r\n<!-- Using the jquery dataTables CSS CDN -->\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"\/\/cdn.datatables.net\/1.10.15\/css\/jquery.dataTables.css\">\r\n<!-- Using the jquery dataTables API CDN -->\r\n<script type=\"text\/javascript\" charset=\"utf8\" src=\"\/\/cdn.datatables.net\/1.10.15\/js\/jquery.dataTables.js\"><\/script>\r\n<!-- Loading the JS script that allow us create the JQuery data table -->\r\n<script type=\"text\/javascript\" charset=\"utf8\" src=\"api_javascript_datatable_initialization.js\"><\/script> \r\n<\/head>\r\n<body>\r\n \r\n <!-- Target table to instantiate the DataTable API -->\r\n <table id=\"wgc_table\" class=\"display\"><\/table>\r\n\r\n<\/body> \r\n<\/html>\r\n<\/pre>\n
api_javascript_datatable_initialization.js<\/em><\/span><\/p>\n
\/**\r\nThe data that will be show by the data table\r\n*\/\r\nvar dataSet = [[\"Carlos\", \"Nixon\", \"35\"],\r\n [\"Garrett\", \"Winters\", \"33\"],\r\n [\"Ashton\", \"Cox\", \"31\"],\r\n [\"Cedric\", \"Kelly\", \"38\"],\r\n [\"Airi\", \"Satou\", \"34\"],\r\n [\"Brielle\", \"Williamson\", \"32\"],\r\n [\"Herrod\", \"Chandler\", \"25\"],\r\n [\"Rhona\", \"Davidson\", \"22\"],\r\n [\"Colleen\", \"Hurst\", \"28\"],\r\n [\"Sonya\", \"Frost\", \"30\"],\r\n [\"Jena\", \"Gaines\", \"27\"],\r\n [\"Quinn\", \"Flynn\", \"20\"],\r\n [\"Charde\", \"Marshall\", \"39\"],\r\n [\"Haley\", \"Kennedy\", \"40\"],\r\n [\"Tatyana\", \"Fitzpatrick\", \"23\"],\r\n [\"Pedro\", \"Perez\", \"21\"]];\r\n\r\n\/**\r\nWhen the DOM is ready, we use the data table API to create a new one\r\nbased on a javascript array that provides the data.\r\n*\/\r\n$(document).ready(function() {\r\n $('#wgc_table').DataTable( {\r\n data: dataSet, \/\/data used by the data table\r\n columns: [\r\n { title: \"First Name\" },\/\/defining table presentation using the API\r\n { title: \"Last Name\" },\r\n { title: \"Age\" }\r\n ]\r\n });\r\n});\r\n<\/pre>\nThe output of the previous code will be a fully functional JQuery data table. Note that in the HTML page it was necessary just to create the table HTML tag with an ID to allows to JQuery to use that tag to create the data table using the API and define some presentation aspects like the column’s title. See the output below.<\/p>\n
![\"\"](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2017\/06\/api_javascript_jquery_table.png\")
<\/a>Figure 3. API javascript data table<\/figcaption><\/figure>\n The official JQuery data table site provides a lot of examples that allow you to get the \u00a0necessary knowledge and understanding to use the API and use a different kind of functionalities that this library provides.<\/p>\n
To see all the usage examples please refer to the official examples site here<\/a>.<\/p>\n
7. Conclusion<\/h2>\n
In this post we learned how to use the JQuery data table library, some specific API aspects, and we saw some simplest examples to get more understanding about this library and its usage.<\/p>\n
Also, we saw the functionalities that are provided by default for this API like sort pagination and searching. This is a powerful library based on JQuery framework that allows the developers to create a fully functional data table based on a different kind of data resources like javascript data JSON or Ajax API calls with a few lines of code.<\/p>\n
To explore in more detail the API of this library, please refer to the official API reference here<\/a>.<\/p>\n
8. Download The Source Code<\/h2>\n
These were a JQuery data table examples.<\/p>\n
- Text Editor (ATOM, Brackets, Notepad++, etc..)<\/li>\n<\/ol>\n
- Context: Describe the API DataTables linked with the instance, using this context you can access to one or more DataTables and interact with them.<\/li>\n<\/ul>\n
- Plugins<\/a><\/li>\n<\/ul>\n
- Extensions<\/a><\/li>\n