How to initialize Datatable plugin?

How to initialize Datatable plugin?

Datatables.net is a sophisticated plug in built on Jquery, JavaScript library which provides more functionality to normal HTML tables. The plug in offers search, pagination and sorting functionalities.
The assets file can be downloaded
  • From the website,
  • CDN
From website: https://datatables.net/download/index

CDN Links: https://cdn.datatables.net/





Basic Implementation of Datatable

  • Write the basic markup of the table with data
  • Add a class name to the table
  • Include all the assets
  • As Datatables.net is built on Jquery, make sure that Jquery is downloaded before data tables 



         Sites         Followers         Rank         Country       

     

         SitePoint         11456         5         Canada       


         Learnable         123449         3         USA       


         Flippa         143567         1         Brazil

$(function(){
$("#example").dataTable();
})


Datatables plugin



You may continue this series in our next post Datatables.net Plugin options

Also, read how to manipulate DOM using jQuery

Comments

Post a Comment

Popular posts from this blog

Datatables.net - Plugin options

Image
Datatables jquery plugin options In PART i of this series we have discussed the basics of datatables.net plugin Datatables.net has a wide set of options which gives extensive interface support and browser compatibility. The following article clearly explains how to utilize the options provided by the plugin. The datatables.net CDN links for style sheet reference https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css The datatables.net CDN links for script reference https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css To disable all options $("#example").dataTable({ paging: false, searching: false, info: false }); To display “Show entries” at the bottom of the data table $('.promo-pricing-table').dataTable({ "dom": 'frtlip' }); }) To display “Show entries” at the
Read more >>

What are some mistakes people make when they start learning HTML, CSS and JavaScript?

Image
Using id instead of class names Many beginners are tending to write CSS using id names instead of CSS class names. We should always aim to reuse the code as much as possible. By using id names we are applying styles only to that particular div rather than sharing the styles which are common to div s having the same class name. Do read this article which gives a practical approach to maintainable CSS . Not using CSS shorthand Using CSS shorthand will come as a second nature by practice. Until then we need to force ourselves to write CSS in the right way. While working on a large project, we will notice that by using shorthand properties the number of code lines in CSS file will be reduced reasonably. CSS Measurements 0px is just a 0. There is no need to mention if it is a px or em. Following a standard measurement throughout the project is important. Be it px or rem, it should be followed by all for the project. Using relative values are encouraged more than absolu
Read more >>