Last active
October 1, 2023 08:51
-
-
Save n1crack/ff6f728ad22ddac33a690007197b318b to your computer and use it in GitHub Desktop.
Codeigniter4Adapter usage for ozdemir/datatables
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Welcome to CodeIgniter 4!</title> | |
| <meta name="description" content="The small framework with powerful features"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="shortcut icon" type="image/png" href="/favicon.ico"/> | |
| <!-- STYLES --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"> | |
| <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/> | |
| <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css"> | |
| <style {csp-style-nonce}> | |
| * { | |
| transition: background-color 300ms ease, color 300ms ease; | |
| } | |
| *:focus { | |
| background-color: rgba(221, 72, 20, .2); | |
| outline: none; | |
| } | |
| html, body { | |
| color: rgba(33, 37, 41, 1); | |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; | |
| font-size: 16px; | |
| margin: 0; | |
| padding: 0; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| text-rendering: optimizeLegibility; | |
| } | |
| header { | |
| background-color: rgba(247, 248, 249, 1); | |
| padding: .4rem 0 0; | |
| } | |
| .menu { | |
| padding: .4rem 2rem; | |
| } | |
| header ul { | |
| border-bottom: 1px solid rgba(242, 242, 242, 1); | |
| list-style-type: none; | |
| margin: 0; | |
| overflow: hidden; | |
| padding: 0; | |
| text-align: right; | |
| } | |
| header li { | |
| display: inline-block; | |
| } | |
| header li a { | |
| border-radius: 5px; | |
| color: rgba(0, 0, 0, .5); | |
| display: block; | |
| height: 44px; | |
| text-decoration: none; | |
| } | |
| header li.menu-item a { | |
| border-radius: 5px; | |
| margin: 5px 0; | |
| height: 38px; | |
| line-height: 36px; | |
| padding: .4rem .65rem; | |
| text-align: center; | |
| } | |
| header li.menu-item a:hover, | |
| header li.menu-item a:focus { | |
| background-color: rgba(221, 72, 20, .2); | |
| color: rgba(221, 72, 20, 1); | |
| } | |
| header .logo { | |
| float: left; | |
| height: 44px; | |
| padding: .4rem .5rem; | |
| } | |
| header .menu-toggle { | |
| display: none; | |
| float: right; | |
| font-size: 2rem; | |
| font-weight: bold; | |
| } | |
| header .menu-toggle button { | |
| background-color: rgba(221, 72, 20, .6); | |
| border: none; | |
| border-radius: 3px; | |
| color: rgba(255, 255, 255, 1); | |
| cursor: pointer; | |
| font: inherit; | |
| font-size: 1.3rem; | |
| height: 36px; | |
| padding: 0; | |
| margin: 11px 0; | |
| overflow: visible; | |
| width: 40px; | |
| } | |
| header .menu-toggle button:hover, | |
| header .menu-toggle button:focus { | |
| background-color: rgba(221, 72, 20, .8); | |
| color: rgba(255, 255, 255, .8); | |
| } | |
| header .heroe { | |
| margin: 0 auto; | |
| max-width: 1100px; | |
| padding: 1rem 1.75rem 1.75rem 1.75rem; | |
| } | |
| header .heroe h1 { | |
| font-size: 2.5rem; | |
| font-weight: 500; | |
| } | |
| header .heroe h2 { | |
| font-size: 1.5rem; | |
| font-weight: 300; | |
| } | |
| section { | |
| margin: 0 auto; | |
| max-width: 1100px; | |
| padding: 2.5rem 1.75rem 3.5rem 1.75rem; | |
| } | |
| section h1 { | |
| margin-bottom: 2.5rem; | |
| } | |
| section h2 { | |
| font-size: 120%; | |
| line-height: 2.5rem; | |
| padding-top: 1.5rem; | |
| } | |
| section pre { | |
| background-color: rgba(247, 248, 249, 1); | |
| border: 1px solid rgba(242, 242, 242, 1); | |
| display: block; | |
| font-size: .9rem; | |
| margin: 2rem 0; | |
| padding: 1rem 1.5rem; | |
| white-space: pre-wrap; | |
| word-break: break-all; | |
| } | |
| section code { | |
| display: block; | |
| } | |
| section a { | |
| color: rgba(221, 72, 20, 1); | |
| } | |
| section svg { | |
| margin-bottom: -5px; | |
| margin-right: 5px; | |
| width: 25px; | |
| } | |
| .further { | |
| background-color: rgba(247, 248, 249, 1); | |
| border-bottom: 1px solid rgba(242, 242, 242, 1); | |
| border-top: 1px solid rgba(242, 242, 242, 1); | |
| } | |
| .further h2:first-of-type { | |
| padding-top: 0; | |
| } | |
| footer { | |
| background-color: rgba(221, 72, 20, .8); | |
| text-align: center; | |
| } | |
| footer .environment { | |
| color: rgba(255, 255, 255, 1); | |
| padding: 2rem 1.75rem; | |
| } | |
| footer .copyrights { | |
| background-color: rgba(62, 62, 62, 1); | |
| color: rgba(200, 200, 200, 1); | |
| padding: .25rem 1.75rem; | |
| } | |
| @media (max-width: 559px) { | |
| header ul { | |
| padding: 0; | |
| } | |
| header .menu-toggle { | |
| padding: 0 1rem; | |
| } | |
| header .menu-item { | |
| background-color: rgba(244, 245, 246, 1); | |
| border-top: 1px solid rgba(242, 242, 242, 1); | |
| margin: 0 15px; | |
| width: calc(100% - 30px); | |
| } | |
| header .menu-toggle { | |
| display: block; | |
| } | |
| header .hidden { | |
| display: none; | |
| } | |
| header li.menu-item a { | |
| background-color: rgba(221, 72, 20, .1); | |
| } | |
| header li.menu-item a:hover, | |
| header li.menu-item a:focus { | |
| background-color: rgba(221, 72, 20, .7); | |
| color: rgba(255, 255, 255, .8); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- HEADER: MENU + HEROE SECTION --> | |
| <header> | |
| <div class="menu"> | |
| <ul> | |
| <li class="menu-toggle"> | |
| <button onclick="toggleMenu();">☰</button> | |
| </li> | |
| <li class="menu-item hidden"><a href="#">Home</a></li> | |
| <li class="menu-item hidden"><a href="https://codeigniter4.github.io/userguide/" target="_blank">Docs</a> | |
| </li> | |
| <li class="menu-item hidden"><a href="https://forum.codeigniter.com/" target="_blank">Community</a></li> | |
| <li class="menu-item hidden"><a | |
| href="https://github.com/codeigniter4/CodeIgniter4/blob/master/CONTRIBUTING.md" target="_blank">Contribute</a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="heroe"> | |
| <h1>Datatables Php Library for Codeigniter <?= CodeIgniter\CodeIgniter::CI_VERSION ?></h1> | |
| <h2>ozdemir/datatables Codeigniter4Adapter Example</h2> | |
| </div> | |
| </header> | |
| <!-- CONTENT --> | |
| <section> | |
| <table border="0" class="display" id="example" width="100%"> | |
| <thead> | |
| <tr> | |
| <th width="8%">Id</th> | |
| <th width="60%">Name</th> | |
| <th width="32%">Unit Price</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>loading...</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </section> | |
| <!-- SCRIPTS --> | |
| <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script> | |
| <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> | |
| <script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script> | |
| <script> | |
| function toggleMenu() { | |
| var menuItems = document.getElementsByClassName('menu-item'); | |
| for (var i = 0; i < menuItems.length; i++) { | |
| var menuItem = menuItems[i]; | |
| menuItem.classList.toggle("hidden"); | |
| } | |
| } | |
| $(document).ready(function () { | |
| $('#example').dataTable({ | |
| "serverSide": true, | |
| "responsive": true, | |
| "ajax": "/home/ajax" | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php namespace App\Controllers; | |
| use Ozdemir\Datatables\Datatables; | |
| use Ozdemir\Datatables\DB\Codeigniter4Adapter; | |
| class Home extends BaseController | |
| { | |
| public function index() | |
| { | |
| return view('datatables'); | |
| } | |
| public function ajax() | |
| { | |
| $dt = new Datatables(new Codeigniter4Adapter); | |
| $dt->query('Select TrackId, Name, UnitPrice from Track'); | |
| echo $dt->generate(); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment