{"id":3459,"date":"2021-02-10T14:40:40","date_gmt":"2021-02-10T14:40:40","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3459"},"modified":"2023-02-28T05:35:06","modified_gmt":"2023-02-28T05:35:06","slug":"js-tutorial-data-table-using-jquery-datatable-in-angular-js","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/js-tutorial-data-table-using-jquery-datatable-in-angular-js\/","title":{"rendered":"JS Tutorial &#8211; Data Table Using Jquery Datatable in Angular JS"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; Hides columns as screen gets smaller and displays a toggle icon to view the rest of the data.<\/p>\n<p><iframe style=\"width: 100%;\" title=\"JS Tutorial - Data Table Using Jquery Datatable in Angular JS\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/mdLPNbd?default-tab=result&amp;theme-id=dark\" height=\"650\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/mdLPNbd\"><br \/>\nJS Tutorial &#8211; Data Table Using Jquery Datatable in Angular JS<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>&nbsp;<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\" class=\"antialiased\"&gt;\r\n\r\n&lt;head&gt;\r\n    &lt;meta charset=\"UTF-8\"&gt;\r\n    &lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"&gt;\r\n    &lt;meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"&gt;\r\n    &lt;title&gt;DataTables &lt;\/title&gt;\r\n    &lt;meta name=\"description\" content=\"\"&gt;\r\n    &lt;meta name=\"keywords\" content=\"\"&gt;\r\n    &lt;link href=\"https:\/\/unpkg.com\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\" stylesheet\"&gt;\r\n    &lt;!--Replace with your tailwind.css once created--&gt;\r\n\r\n\r\n    &lt;!--Regular Datatables CSS--&gt;\r\n    &lt;link href=\"https:\/\/cdn.datatables.net\/1.10.19\/css\/jquery.dataTables.min.css\" rel=\"stylesheet\"&gt;\r\n    &lt;!--Responsive Extension Datatables CSS--&gt;\r\n    &lt;link href=\"https:\/\/cdn.datatables.net\/responsive\/2.2.3\/css\/responsive.dataTables.min.css\" rel=\"stylesheet\"&gt;\r\n\r\n    &lt;style&gt;\r\n        \/*Overrides for Tailwind CSS *\/\r\n\r\n        \/*Form fields*\/\r\n        .dataTables_wrapper select,\r\n        .dataTables_wrapper .dataTables_filter input {\r\n            color: #4a5568;\r\n            \/*text-gray-700*\/\r\n            padding-left: 1rem;\r\n            \/*pl-4*\/\r\n            padding-right: 1rem;\r\n            \/*pl-4*\/\r\n            padding-top: .5rem;\r\n            \/*pl-2*\/\r\n            padding-bottom: .5rem;\r\n            \/*pl-2*\/\r\n            line-height: 1.25;\r\n            \/*leading-tight*\/\r\n            border-width: 2px;\r\n            \/*border-2*\/\r\n            border-radius: .25rem;\r\n            border-color: #edf2f7;\r\n            \/*border-gray-200*\/\r\n            background-color: #edf2f7;\r\n            \/*bg-gray-200*\/\r\n        }\r\n\r\n        \/*Row Hover*\/\r\n        table.dataTable.hover tbody tr:hover,\r\n        table.dataTable.display tbody tr:hover {\r\n            background-color: #ebf4ff;\r\n            \/*bg-indigo-100*\/\r\n        }\r\n\r\n        \/*Pagination Buttons*\/\r\n        .dataTables_wrapper .dataTables_paginate .paginate_button {\r\n            font-weight: 700;\r\n            \/*font-bold*\/\r\n            border-radius: .25rem;\r\n            \/*rounded*\/\r\n            border: 1px solid transparent;\r\n            \/*border border-transparent*\/\r\n        }\r\n\r\n        \/*Pagination Buttons - Current selected *\/\r\n        .dataTables_wrapper .dataTables_paginate .paginate_button.current {\r\n            color: #fff !important;\r\n            \/*text-white*\/\r\n            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);\r\n            \/*shadow*\/\r\n            font-weight: 700;\r\n            \/*font-bold*\/\r\n            border-radius: .25rem;\r\n            \/*rounded*\/\r\n            background: #667eea !important;\r\n            \/*bg-indigo-500*\/\r\n            border: 1px solid transparent;\r\n            \/*border border-transparent*\/\r\n        }\r\n\r\n        \/*Pagination Buttons - Hover *\/\r\n        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {\r\n            color: #fff !important;\r\n            \/*text-white*\/\r\n            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);\r\n            \/*shadow*\/\r\n            font-weight: 700;\r\n            \/*font-bold*\/\r\n            border-radius: .25rem;\r\n            \/*rounded*\/\r\n            background: #667eea !important;\r\n            \/*bg-indigo-500*\/\r\n            border: 1px solid transparent;\r\n            \/*border border-transparent*\/\r\n        }\r\n\r\n        \/*Add padding to bottom border *\/\r\n        table.dataTable.no-footer {\r\n            border-bottom: 1px solid #e2e8f0;\r\n            \/*border-b-1 border-gray-300*\/\r\n            margin-top: 0.75em;\r\n            margin-bottom: 0.75em;\r\n        }\r\n\r\n        \/*Change colour of responsive icon*\/\r\n        table.dataTable.dtr-inline.collapsed&gt;tbody&gt;tr&gt;td:first-child:before,\r\n        table.dataTable.dtr-inline.collapsed&gt;tbody&gt;tr&gt;th:first-child:before {\r\n            background-color: #667eea !important;\r\n            \/*bg-indigo-500*\/\r\n        }\r\n    &lt;\/style&gt;\r\n\r\n\r\n\r\n&lt;\/head&gt;\r\n\r\n&lt;body class=\"bg-gray-100 text-gray-900 tracking-wider leading-normal\"&gt;\r\n\r\n\r\n    &lt;!--Container--&gt;\r\n    &lt;div class=\"container w-full md:w-4\/5 xl:w-3\/5  mx-auto px-2\"&gt;\r\n\r\n        &lt;!--Title--&gt;\r\n        &lt;h1 class=\"flex items-center font-sans font-bold break-normal text-indigo-500 px-2 py-8 text-xl md:text-2xl\"&gt;\r\n            Responsive &lt;a class=\"underline mx-2\" href=\"https:\/\/datatables.net\/\"&gt;DataTables.net&lt;\/a&gt; Table\r\n        &lt;\/h1&gt;\r\n\r\n\r\n        &lt;!--Card--&gt;\r\n        &lt;div id='recipients' class=\"p-8 mt-6 lg:mt-0 rounded shadow bg-white\"&gt;\r\n\r\n\r\n            &lt;table id=\"example\" class=\"stripe hover\" style=\"width:100%; padding-top: 1em;  padding-bottom: 1em;\"&gt;\r\n                &lt;thead&gt;\r\n                    &lt;tr&gt;\r\n                        &lt;th data-priority=\"1\"&gt;Name&lt;\/th&gt;\r\n                        &lt;th data-priority=\"2\"&gt;Position&lt;\/th&gt;\r\n                        &lt;th data-priority=\"3\"&gt;Office&lt;\/th&gt;\r\n                        &lt;th data-priority=\"4\"&gt;Age&lt;\/th&gt;\r\n                        &lt;th data-priority=\"5\"&gt;Start date&lt;\/th&gt;\r\n                        &lt;th data-priority=\"6\"&gt;Salary&lt;\/th&gt;\r\n                    &lt;\/tr&gt;\r\n                &lt;\/thead&gt;\r\n                &lt;tbody&gt;\r\n                    &lt;tr&gt;\r\n                        &lt;td&gt;Tiger Nixon&lt;\/td&gt;\r\n                        &lt;td&gt;System Architect&lt;\/td&gt;\r\n                        &lt;td&gt;Edinburgh&lt;\/td&gt;\r\n                        &lt;td&gt;61&lt;\/td&gt;\r\n                        &lt;td&gt;2011\/04\/25&lt;\/td&gt;\r\n                        &lt;td&gt;$320,800&lt;\/td&gt;\r\n                    &lt;\/tr&gt;\r\n\r\n                    &lt;!-- Rest of your data (refer to https:\/\/datatables.net\/examples\/server_side\/ for server side processing)--&gt;\r\n\r\n                    &lt;tr&gt;\r\n                        &lt;td&gt;Donna Snider&lt;\/td&gt;\r\n                        &lt;td&gt;Customer Support&lt;\/td&gt;\r\n                        &lt;td&gt;New York&lt;\/td&gt;\r\n                        &lt;td&gt;27&lt;\/td&gt;\r\n                        &lt;td&gt;2011\/01\/25&lt;\/td&gt;\r\n                        &lt;td&gt;$112,000&lt;\/td&gt;\r\n                    &lt;\/tr&gt;\r\n                &lt;\/tbody&gt;\r\n\r\n            &lt;\/table&gt;\r\n\r\n\r\n        &lt;\/div&gt;\r\n        &lt;!--\/Card--&gt;\r\n\r\n\r\n    &lt;\/div&gt;\r\n    &lt;!--\/container--&gt;\r\n\r\n\r\n\r\n\r\n\r\n    &lt;!-- jQuery --&gt;\r\n    &lt;script type=\"text\/javascript\" src=\"https:\/\/code.jquery.com\/jquery-3.4.1.min.js\"&gt;&lt;\/script&gt;\r\n\r\n    &lt;!--Datatables --&gt;\r\n    &lt;script src=\"https:\/\/cdn.datatables.net\/1.10.19\/js\/jquery.dataTables.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"https:\/\/cdn.datatables.net\/responsive\/2.2.3\/js\/dataTables.responsive.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script&gt;\r\n        $(document).ready(function() {\r\n\r\n            var table = $('#example').DataTable({\r\n                    responsive: true\r\n                })\r\n                .columns.adjust()\r\n                .responsive.recalc();\r\n        });\r\n    &lt;\/script&gt;\r\n\r\n&lt;\/body&gt;\r\n\r\n&lt;\/html&gt;<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; Hides columns as screen gets smaller and displays a <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/js-tutorial-data-table-using-jquery-datatable-in-angular-js\/\" title=\"JS Tutorial &#8211; Data Table Using Jquery Datatable in Angular JS\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3832,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[341,340,264,263,103,227],"newstopic":[],"class_list":{"0":"post-3459","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"tag-angular-js","9":"tag-data-table","10":"tag-javascript-tutorial","11":"tag-js-tutorial","12":"tag-web-design","13":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3459","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3459"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3459\/revisions"}],"predecessor-version":[{"id":3461,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3459\/revisions\/3461"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3832"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3459"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3459"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3459"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3459"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}