{"id":802,"date":"2014-12-08T16:44:09","date_gmt":"2014-12-08T23:44:09","guid":{"rendered":"http:\/\/behstant.com\/blog\/?p=802"},"modified":"2015-11-20T13:17:47","modified_gmt":"2015-11-20T20:17:47","slug":"plugin-dairy-jquery-datatable","status":"publish","type":"post","link":"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/","title":{"rendered":"[Plugin Dairy] &#8211; jQuery Datatable"},"content":{"rendered":"<p><a href=\"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2014\/12\/036.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft size-medium wp-image-806\" src=\"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2014\/12\/036-300x175.png\" alt=\"036\" width=\"300\" height=\"175\" srcset=\"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2014\/12\/036-300x175.png 300w, http:\/\/behstant.com\/blog\/wp-content\/uploads\/2014\/12\/036.png 905w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a>The jQuery plugin Datatable is a plugin that will allow you to have many features on a HTML table. This plugin is so simple to use, but if you need more complex thing you can also achieve them since the plugin is full of features that can be customize, it also includes an event listener for the action on the table.<\/p>\n<p>Among the features of the Datatable plugin you can have:<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li>Pagination, instant search and multi-column ordering<br \/>\nSupports almost any data source:<br \/>\nDOM, Javascript, Ajax and server-side processing<\/li>\n<li>Easily theme-able: DataTables, jQuery UI, Bootstrap, Foundation<\/li>\n<li>Wide variety of extensions inc. Editor, TableTools, FixedColumns and more<\/li>\n<li>Extensive options and a beautiful, expressive API<\/li>\n<li>Fully internationalisable<\/li>\n<li>Professional quality: backed by a suite of 2900+ unit tests<\/li>\n<li>Free open source software (MIT license)! Commercial support available.<\/li>\n<li>Scrolling options for table viewport<\/li>\n<li>Smart handling of column widths<\/li>\n<li>State saving<\/li>\n<li>Hidden columns<\/li>\n<p><!--more--><\/p>\n<li>Dynamic creation of tables<\/li>\n<li>Ajax auto loading of data<\/li>\n<li>Custom DOM positioning<\/li>\n<li>Single column filtering<\/li>\n<li>Alternative pagination types<\/li>\n<li>Non-destructive DOM interaction<\/li>\n<li>Sorting column(s) highlighting<\/li>\n<li>Advanced data source options<\/li>\n<li>Commercial support available<\/li>\n<li>Fully accessible for screenreaders \/ keyboard access<\/li>\n<li>Sensible file size: 78K minified, 26K gzip&#8217;d<\/li>\n<li>Extensive plug-in support<br \/>\nSorting, type detection, API functions, pagination and filtering<\/li>\n<li>Solid documentation and interface reference<\/li>\n<li>130+ pre-built examples<\/li>\n<\/ul>\n<p>This list of feature was taken directly from their <a href=\"https:\/\/datatables.net\/\" target=\"_blank\">site<\/a>.<\/p>\n<p>I have implemented this plugin in some of the developments that I have. I will not teach you on this time how to use it but I will drop how you can use it right away.<\/p>\n<p>&nbsp;<\/p>\n<p>So suppose that you have a HTML table with an ID `databaseResults`, To apply the plugin to your table just do this:<\/p>\n<pre class=\"brush: javascript; gutter: true\">$(document).ready(function(){\r\n    $(&#039;#databaseResults&#039;).DataTable();\r\n});\r\n<\/pre>\n<p>By applying that jQuery code to your table you are on business. Although this is the most simple example, on a real application you will need to custom and tweak the plugin to fit your needs. I say tweak because you have to work directly with plugin API.<\/p>\n<p>One more interesting thing is that you can integrate this plugin with the jQuery Themes and Bootstrap.<\/p>\n<p><a href=\"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2014\/12\/037.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-808\" src=\"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2014\/12\/037.png\" alt=\"037\" width=\"700\" height=\"430\" srcset=\"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2014\/12\/037.png 896w, http:\/\/behstant.com\/blog\/wp-content\/uploads\/2014\/12\/037-300x184.png 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p>If you have a comment about this plugin feel free to leave it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The jQuery plugin Datatable is a plugin that will allow you to have many features on a HTML table. This plugin is so simple to use, but if you need more complex thing you can also achieve them since the plugin is full of features that can be customize, it also includes an event listener &#8230; <a title=\"[Plugin Dairy] &#8211; jQuery Datatable\" class=\"read-more\" href=\"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/\" aria-label=\"Read more about [Plugin Dairy] &#8211; jQuery Datatable\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":808,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[42,28,23,25,1,24],"tags":[66,37,43,67,41],"class_list":["post-802","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bootstrap","category-html","category-javascript","category-jquery","category-uncategorized","category-web2-0","tag-bootstrap","tag-html-2","tag-javascript-2","tag-jquery","tag-plugin-dairy"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>[Plugin Dairy] - jQuery Datatable &#187; The Code<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Plugin Dairy] - jQuery Datatable &#187; The Code\" \/>\n<meta property=\"og:description\" content=\"The jQuery plugin Datatable is a plugin that will allow you to have many features on a HTML table. This plugin is so simple to use, but if you need more complex thing you can also achieve them since the plugin is full of features that can be customize, it also includes an event listener ... Read more\" \/>\n<meta property=\"og:url\" content=\"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/\" \/>\n<meta property=\"og:site_name\" content=\"The Code\" \/>\n<meta property=\"article:published_time\" content=\"2014-12-08T23:44:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-11-20T20:17:47+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2014\/12\/037.png\" \/>\n\t<meta property=\"og:image:width\" content=\"896\" \/>\n\t<meta property=\"og:image:height\" content=\"550\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Reedyseth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@Reedyseth\" \/>\n<meta name=\"twitter:site\" content=\"@Reedyseth\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Reedyseth\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/\"},\"author\":{\"name\":\"Reedyseth\",\"@id\":\"https:\/\/behstant.com\/blog\/#\/schema\/person\/760327e1ee480ad2aabe8e40d784ec9f\"},\"headline\":\"[Plugin Dairy] &#8211; jQuery Datatable\",\"datePublished\":\"2014-12-08T23:44:09+00:00\",\"dateModified\":\"2015-11-20T20:17:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/\"},\"wordCount\":364,\"commentCount\":1,\"image\":{\"@id\":\"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2014\/12\/037.png\",\"keywords\":[\"Bootstrap\",\"HTML\",\"Javascript\",\"jQuery\",\"Plugin Dairy\"],\"articleSection\":{\"0\":\"Bootstrap\",\"1\":\"html\",\"2\":\"JavaScript\",\"3\":\"jQuery\",\"5\":\"Web2.0\"},\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/\",\"url\":\"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/\",\"name\":\"[Plugin Dairy] - jQuery Datatable &#187; The Code\",\"isPartOf\":{\"@id\":\"https:\/\/behstant.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/#primaryimage\"},\"image\":{\"@id\":\"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2014\/12\/037.png\",\"datePublished\":\"2014-12-08T23:44:09+00:00\",\"dateModified\":\"2015-11-20T20:17:47+00:00\",\"author\":{\"@id\":\"https:\/\/behstant.com\/blog\/#\/schema\/person\/760327e1ee480ad2aabe8e40d784ec9f\"},\"breadcrumb\":{\"@id\":\"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/#primaryimage\",\"url\":\"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2014\/12\/037.png\",\"contentUrl\":\"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2014\/12\/037.png\",\"width\":896,\"height\":550},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/behstant.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Plugin Dairy] &#8211; jQuery Datatable\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/behstant.com\/blog\/#website\",\"url\":\"https:\/\/behstant.com\/blog\/\",\"name\":\"The Code\",\"description\":\"Learn Web Solutions in WordPress, PHP, jand also purchase code solutions.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/behstant.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/behstant.com\/blog\/#\/schema\/person\/760327e1ee480ad2aabe8e40d784ec9f\",\"name\":\"Reedyseth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/117af509aa15be89968fe955258a7bf8ed362ec2adf1afcf2af50a976f2349fa?s=96&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/117af509aa15be89968fe955258a7bf8ed362ec2adf1afcf2af50a976f2349fa?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/117af509aa15be89968fe955258a7bf8ed362ec2adf1afcf2af50a976f2349fa?s=96&r=g\",\"caption\":\"Reedyseth\"},\"description\":\"My Google Profile+\",\"sameAs\":[\"http:\/\/behstant.com\"],\"url\":\"http:\/\/behstant.com\/blog\/author\/reedyseth\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Plugin Dairy] - jQuery Datatable &#187; The Code","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/","og_locale":"en_US","og_type":"article","og_title":"[Plugin Dairy] - jQuery Datatable &#187; The Code","og_description":"The jQuery plugin Datatable is a plugin that will allow you to have many features on a HTML table. This plugin is so simple to use, but if you need more complex thing you can also achieve them since the plugin is full of features that can be customize, it also includes an event listener ... Read more","og_url":"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/","og_site_name":"The Code","article_published_time":"2014-12-08T23:44:09+00:00","article_modified_time":"2015-11-20T20:17:47+00:00","og_image":[{"width":896,"height":550,"url":"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2014\/12\/037.png","type":"image\/png"}],"author":"Reedyseth","twitter_card":"summary_large_image","twitter_creator":"@Reedyseth","twitter_site":"@Reedyseth","twitter_misc":{"Written by":"Reedyseth","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/#article","isPartOf":{"@id":"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/"},"author":{"name":"Reedyseth","@id":"https:\/\/behstant.com\/blog\/#\/schema\/person\/760327e1ee480ad2aabe8e40d784ec9f"},"headline":"[Plugin Dairy] &#8211; jQuery Datatable","datePublished":"2014-12-08T23:44:09+00:00","dateModified":"2015-11-20T20:17:47+00:00","mainEntityOfPage":{"@id":"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/"},"wordCount":364,"commentCount":1,"image":{"@id":"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/#primaryimage"},"thumbnailUrl":"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2014\/12\/037.png","keywords":["Bootstrap","HTML","Javascript","jQuery","Plugin Dairy"],"articleSection":{"0":"Bootstrap","1":"html","2":"JavaScript","3":"jQuery","5":"Web2.0"},"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/","url":"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/","name":"[Plugin Dairy] - jQuery Datatable &#187; The Code","isPartOf":{"@id":"https:\/\/behstant.com\/blog\/#website"},"primaryImageOfPage":{"@id":"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/#primaryimage"},"image":{"@id":"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/#primaryimage"},"thumbnailUrl":"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2014\/12\/037.png","datePublished":"2014-12-08T23:44:09+00:00","dateModified":"2015-11-20T20:17:47+00:00","author":{"@id":"https:\/\/behstant.com\/blog\/#\/schema\/person\/760327e1ee480ad2aabe8e40d784ec9f"},"breadcrumb":{"@id":"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/#primaryimage","url":"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2014\/12\/037.png","contentUrl":"http:\/\/behstant.com\/blog\/wp-content\/uploads\/2014\/12\/037.png","width":896,"height":550},{"@type":"BreadcrumbList","@id":"http:\/\/behstant.com\/blog\/uncategorized\/plugin-dairy-jquery-datatable\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/behstant.com\/blog\/"},{"@type":"ListItem","position":2,"name":"[Plugin Dairy] &#8211; jQuery Datatable"}]},{"@type":"WebSite","@id":"https:\/\/behstant.com\/blog\/#website","url":"https:\/\/behstant.com\/blog\/","name":"The Code","description":"Learn Web Solutions in WordPress, PHP, jand also purchase code solutions.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/behstant.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/behstant.com\/blog\/#\/schema\/person\/760327e1ee480ad2aabe8e40d784ec9f","name":"Reedyseth","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/117af509aa15be89968fe955258a7bf8ed362ec2adf1afcf2af50a976f2349fa?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/117af509aa15be89968fe955258a7bf8ed362ec2adf1afcf2af50a976f2349fa?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/117af509aa15be89968fe955258a7bf8ed362ec2adf1afcf2af50a976f2349fa?s=96&r=g","caption":"Reedyseth"},"description":"My Google Profile+","sameAs":["http:\/\/behstant.com"],"url":"http:\/\/behstant.com\/blog\/author\/reedyseth\/"}]}},"_links":{"self":[{"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/posts\/802","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/comments?post=802"}],"version-history":[{"count":0,"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/posts\/802\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/media\/808"}],"wp:attachment":[{"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/media?parent=802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/categories?post=802"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/behstant.com\/blog\/wp-json\/wp\/v2\/tags?post=802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}