DataTables jquery
Question
I cant seem to add datatables to my table. Can you help me to find what i'm doing wrong?
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
It doesn´t have the datatables jquery plugin idk why, it has the code. this is the links and scripts im using now to try to see if works, i already used the connection in the official website and it didnt work either. I tried to make a new html page and it worked but in this one it doesnt seem to work. If you want to download files here is the link http://sendanywhe.re/Z1UV5OCM i dont know another way to send files. The problem I identify and I think is that the bootstrap or another thing is blocking the datatables jquery plugin.
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags--> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content="au theme template"> <meta name="author" content="Hau Nguyen"> <meta name="keywords" content="au theme template"> <!-- Title Page--> <title>Tables</title> <!-- Fontfaces CSS--> <link href="css/font-face.css" rel="stylesheet" media="all"> <link href="vendor/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all"> <link href="vendor/font-awesome-5/css/fontawesome-all.min.css" rel="stylesheet" media="all"> <link href="vendor/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all"> <!-- Bootstrap CSS--> <link href="vendor/bootstrap-4.1/bootstrap.min.css" rel="stylesheet" media="all"> <!-- Vendor CSS--> <link href="vendor/animsition/animsition.min.css" rel="stylesheet" media="all"> <link href="vendor/bootstrap-progressbar/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet" media="all"> <link href="vendor/wow/animate.css" rel="stylesheet" media="all"> <link href="vendor/css-hamburgers/hamburgers.min.css" rel="stylesheet" media="all"> <link href="vendor/slick/slick.css" rel="stylesheet" media="all"> <link href="vendor/select2/select2.min.css" rel="stylesheet" media="all"> <link href="vendor/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" media="all"> <!-- Main CSS--> <link href="css/theme.css" rel="stylesheet" media="all"> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" /> <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script> </head> <body class="animsition"> <div class="page-wrapper"> <!-- HEADER MOBILE--> <header class="header-mobile d-block d-lg-none"> <div class="header-mobile__bar"> <div class="container-fluid"> <div class="header-mobile-inner"> <a class="logo" href="index.html"> <img src="images/Logo-horiz.png" alt="CoolAdmin" /> </a> <button class="hamburger hamburger--slider" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> </div> </div> </div> <nav class="navbar-mobile"> <div class="container-fluid"> <ul class="navbar-mobile__list list-unstyled"> <li class="has-sub"> <a class="js-arrow" href="index.php"> <i class="fas fa-tachometer-alt"></i>Pagina Inicial</a> </li> <li> <a href="chart.php"> <i class="fas fa-chart-bar"></i>Adicionar Itens</a> </li> <li> <a href="table.php"> <i class="fas fa-table"></i>Itens Atuais</a> </li> <li> <a href="form.html"> <i class="far fa-check-square"></i>Clientes</a> </li> <li> <a href="calendar.html"> <i class="fas fa-calendar-alt"></i>Detalhe De Encomendas</a> </li> </ul> </div> </nav> </header> <!-- END HEADER MOBILE--> <!-- MENU SIDEBAR--> <aside class="menu-sidebar d-none d-lg-block"> <div class="logo"> <a href="#"> <img src="images/icon/logo.png" alt="Cool Admin" /> </a> </div> <div class="menu-sidebar__content js-scrollbar1"> <nav class="navbar-sidebar"> <ul class="list-unstyled navbar__list"> <li class="has-sub"> <a class="js-arrow" href="#"> <i class="fas fa-tachometer-alt"></i>Pagina Principal</a> </li> <li> <a href="chart.html"> <i class="fas fa-chart-bar"></i>Charts</a> </li> <li class="active"> <a href="table.html"> <i class="fas fa-table"></i>Tables</a> </li> <li> <a href="form.html"> <i class="far fa-check-square"></i>Forms</a> </li> <li> <a href="calendar.html"> <i class="fas fa-calendar-alt"></i>Calendar</a> </li> <li> <a href="map.html"> <i class="fas fa-map-marker-alt"></i>Maps</a> </li> </ul> </nav> </div> </aside> <!-- END MENU SIDEBAR--> <!-- PAGE CONTAINER--> <div class="page-container"> <!-- HEADER DESKTOP--> <header class="header-desktop"> <div class="section__content section__content--p30"> <div class="container-fluid"> <div class="header-wrap"> <form class="form-header" action="" method="POST"> </form> <div class="header-button"> <div class="account-wrap"> <div class="account-item clearfix js-item-menu"> <div class="image"> <img src="images/icon/avatar-01.jpg" alt="John Doe" /> </div> <div class="content"> <a class="js-acc-btn" href="#">Admin</a> </div> <div class="account-dropdown js-dropdown"> <div class="info clearfix"> <div class="image"> <a href="#"> <img src="images/icon/avatar-01.jpg" alt="John Doe" /> </a> </div> <div class="content"> <h5 class="name"> <a href="#">Admin</a> </h5> <span class="email">???</span> </div> </div> <div class="account-dropdown__footer"> <a href="#"> <i class="zmdi zmdi-power"></i>Logout</a> </div> </div> </div> </div> </div> </div> </div> </div> </header> <!-- END HEADER DESKTOP--> <!-- MAIN CONTENT--> <div class="main-content"> <div class="section__content section__content--p30"> <div class="container-fluid"> <div class="row mt-30"> <div class="col-md-12"> <div class="table-responsive "> <table id="example" class="table table-borderless table-striped table-earning"> <thead> <tr> <th>Referência</th> <th>Nome</th> <th>Descrição Detalhada</th> <th class="text-right">Preço de Custo</th> <th>Margem/%</th> <th>Stock</th> <th>IVA</th> <th>Familia</th> </tr> </thead> <tbody> <tr> <td>2018-09-29 05:57</td> <td>100398</td> <td>iPhone X 64Gb Grey</td> <td class="text-right">$999.00</td> <td class="text-right">1</td> <td class="text-right">$999.00</td> </tr> <tr> <td>2018-09-28 01:22</td> <td>100397</td> <td>Samsung S8 Black</td> <td class="text-right">$756.00</td> <td class="text-right">1</td> <td class="text-right">$756.00</td> </tr> <tr> <td>2018-09-27 02:12</td> <td>100396</td> <td>Game Console Controller</td> <td class="text-right">$22.00</td> <td class="text-right">2</td> <td class="text-right">$44.00</td> </tr> <tr> <td>2018-09-26 23:06</td> <td>100395</td> <td>iPhone X 256Gb Black</td> <td class="text-right">$1199.00</td> <td class="text-right">1</td> <td class="text-right">$1199.00</td> </tr> <tr> <td>2018-09-25 19:03</td> <td>100393</td> <td>USB 3.0 Cable</td> <td class="text-right">$10.00</td> <td class="text-right">3</td> <td class="text-right">$30.00</td> </tr> <tr> <td>2018-09-29 05:57</td> <td>100392</td> <td>Smartwatch 4.0 LTE Wifi</td> <td class="text-right">$199.00</td> <td class="text-right">6</td> <td class="text-right">$1494.00</td> </tr> <tr> <td>2018-09-24 19:10</td> <td>100391</td> <td>Camera C430W 4k</td> <td class="text-right">$699.00</td> <td class="text-right">1</td> <td class="text-right">$699.00</td> </tr> <tr> <td>2018-09-22 00:43</td> <td>100393</td> <td>USB 3.0 Cable</td> <td class="text-right">$10.00</td> <td class="text-right">3</td> <td class="text-right">$30.00</td> </tr> </tbody> </table> </div> </div> </div> <div class="row mt-30"> <div class="col-md-12"> <!-- DATA TABLE--> <div class="table-responsive mb-40"> <table class="table table-borderless table-data3"> <thead> <tr> <th>date</th> <th>type</th> <th>description</th> <th>status</th> <th>price</th> </tr> </thead> <tbody> <tr> <td>2018-09-29 05:57</td> <td>Mobile</td> <td>iPhone X 64Gb Grey</td> <td class="process">Processed</td> <td>$999.00</td> </tr> <tr> <td>2018-09-28 01:22</td> <td>Mobile</td> <td>Samsung S8 Black</td> <td class="process">Processed</td> <td>$756.00</td> </tr> <tr> <td>2018-09-27 02:12</td> <td>Game</td> <td>Game Console Controller</td> <td class="denied">Denied</td> <td>$22.00</td> </tr> <tr> <td>2018-09-26 23:06</td> <td>Mobile</td> <td>iPhone X 256Gb Black</td> <td class="denied">Denied</td> <td>$1199.00</td> </tr> <tr> <td>2018-09-25 19:03</td> <td>Accessories</td> <td>USB 3.0 Cable</td> <td class="process">Processed</td> <td>$10.00</td> </tr> <tr> <td>2018-09-29 05:57</td> <td>Accesories</td> <td>Smartwatch 4.0 LTE Wifi</td> <td class="denied">Denied</td> <td>$199.00</td> </tr> <tr> <td>2018-09-24 19:10</td> <td>Camera</td> <td>Camera C430W 4k</td> <td class="process">Processed</td> <td>$699.00</td> </tr> <tr> <td>2018-09-22 00:43</td> <td>Computer</td> <td>Macbook Pro Retina 2017</td> <td class="process">Processed</td> <td>$10.00</td> </tr> </tbody> </table> </div> <!-- END DATA TABLE--> </div> </div> <div class="row"> <div class="col-md-12"> <div class="copyright"> <p>Copyright © 2018 Colorlib. All rights reserved. Template by <a href="https://colorlib.com">Colorlib</a>.</p> </div> </div> </div> </div> </div> </div> </div> </div> <!-- Jquery JS--> <script src="vendor/jquery-3.2.1.min.js"></script> <!-- Bootstrap JS--> <script src="vendor/bootstrap-4.1/popper.min.js"></script> <script src="vendor/bootstrap-4.1/bootstrap.min.js"></script> <!-- Vendor JS --> <script src="vendor/slick/slick.min.js"> </script> <script src="vendor/wow/wow.min.js"></script> <script src="vendor/animsition/animsition.min.js"></script> <script src="vendor/bootstrap-progressbar/bootstrap-progressbar.min.js"> </script> <script src="vendor/counter-up/jquery.waypoints.min.js"></script> <script src="vendor/counter-up/jquery.counterup.min.js"> </script> <script src="vendor/circle-progress/circle-progress.min.js"></script> <script src="vendor/perfect-scrollbar/perfect-scrollbar.js"></script> <script src="vendor/chartjs/Chart.bundle.min.js"></script> <script src="vendor/select2/select2.min.js"> </script> <!-- Main JS--> <script src="js/main.js"></script> <script> $(document).ready( function () { var table = $('#example').DataTable(); } ); </script> </body> </html> <!-- end document-->
2 answers
solution1
0 2020-03-06 11:41:32
<html> <head> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" /> <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script> </head> <body> <table id="example" class="table table-bordered table-striped table-earning"> <thead> <tr> <th>Referência</th> <th>Nome</th> <th>Descrição Detalhada</th> <th class="text-right">Preço de Custo</th> <th>Margem/%</th> <th>Stock</th> <th>IVA</th> <th>Familia</th> </tr> </thead> <tbody> <tr> <td>2018-09-29 05:57</td> <td>100398</td> <td>iPhone X 64Gb Grey</td> <td class="text-right">$999.00</td> <td class="text-right">1</td> <td class="text-right">$999.00</td> <td></td> <td></td> </tr> <tr> <td>2018-09-28 01:22</td> <td>100397</td> <td>Samsung S8 Black</td> <td class="text-right">$756.00</td> <td class="text-right">1</td> <td class="text-right">$756.00</td> <td></td> <td></td> </tr> <tr> <td>2018-09-27 02:12</td> <td>100396</td> <td>Game Console Controller</td> <td class="text-right">$22.00</td> <td class="text-right">2</td> <td class="text-right">$44.00</td> <td></td> <td></td> </tr> <tr> <td>2018-09-26 23:06</td> <td>100395</td> <td>iPhone X 256Gb Black</td> <td class="text-right">$1199.00</td> <td class="text-right">1</td> <td class="text-right">$1199.00</td> <td></td> <td></td> </tr> <tr> <td>2018-09-25 19:03</td> <td>100393</td> <td>USB 3.0 Cable</td> <td class="text-right">$10.00</td> <td class="text-right">3</td> <td class="text-right">$30.00</td> <td></td> <td></td> </tr> <tr> <td>2018-09-29 05:57</td> <td>100392</td> <td>Smartwatch 4.0 LTE Wifi</td> <td class="text-right">$199.00</td> <td class="text-right">6</td> <td class="text-right">$1494.00</td> <td></td> <td></td> </tr> <tr> <td>2018-09-24 19:10</td> <td>100391</td> <td>Camera C430W 4k</td> <td class="text-right">$699.00</td> <td class="text-right">1</td> <td class="text-right">$699.00</td> <td></td> <td></td> </tr> <tr> <td>2018-09-22 00:43</td> <td>100393</td> <td>USB 3.0 Cable</td> <td class="text-right">$10.00</td> <td class="text-right">3</td> <td class="text-right">$30.00</td> <td></td> <td></td> </tr> </tbody> </table> <br><hr><br> <table id="example1" class="table table-bordered table-striped table-data3"> <thead> <tr> <th>date</th> <th>type</th> <th>description</th> <th>status</th> <th>price</th> </tr> </thead> <tbody> <tr> <td>2018-09-29 05:57</td> <td>Mobile</td> <td>iPhone X 64Gb Grey</td> <td>Processed</td> <td>$999.00</td> </tr> <tr> <td>2018-09-28 01:22</td> <td>Mobile</td> <td>Samsung S8 Black</td> <td>Processed</td> <td>$756.00</td> </tr> <tr> <td>2018-09-27 02:12</td> <td>Game</td> <td>Game Console Controller</td> <td>Denied</td> <td>$22.00</td> </tr> <tr> <td>2018-09-26 23:06</td> <td>Mobile</td> <td>iPhone X 256Gb Black</td> <td>Denied</td> <td>$1199.00</td> </tr> <tr> <td>2018-09-25 19:03</td> <td>Accessories</td> <td>USB 3.0 Cable</td> <td>Processed</td> <td>$10.00</td> </tr> <tr> <td>2018-09-29 05:57</td> <td>Accesories</td> <td>Smartwatch 4.0 LTE Wifi</td> <td>Denied</td> <td>$199.00</td> </tr> <tr> <td>2018-09-24 19:10</td> <td>Camera</td> <td>Camera C430W 4k</td> <td>Processed</td> <td>$699.00</td> </tr> <tr> <td>2018-09-22 00:43</td> <td>Computer</td> <td>Macbook Pro Retina 2017</td> <td>Processed</td> <td>$10.00</td> </tr> </tbody> </table> <script type="text/javascript"> $(document).ready( function () { $('.table-earning').DataTable(); $('.table-data3').DataTable(); }); </script> </body> </html>Brother you have to add same no of columns in " thead " as well as " tbody " in your first table " thead " have 8 columns but " tbody " have only 6 columns so just add " td " 2 times and you good to go
solution2
0 2020-03-06 12:11:59
i added a few JS and CSS CDN for datatables
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css"
/>
<link
rel="stylesheet"
href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css"
/>
does this solve the issue?
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags--> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> <meta name="description" content="au theme template" /> <meta name="author" content="Hau Nguyen" /> <meta name="keywords" content="au theme template" /> <!-- Title Page--> <title>Tables</title> <!-- Fontfaces CSS--> <link href="css/font-face.css" rel="stylesheet" media="all" /> <link href="vendor/font-awesome-4.7/css/font-awesome.min.css" rel="stylesheet" media="all" /> <link href="vendor/font-awesome-5/css/fontawesome-all.min.css" rel="stylesheet" media="all" /> <link href="vendor/mdi-font/css/material-design-iconic-font.min.css" rel="stylesheet" media="all" /> <!-- Bootstrap CSS--> <link href="vendor/bootstrap-4.1/bootstrap.min.css" rel="stylesheet" media="all" /> <!-- Vendor CSS--> <link href="vendor/animsition/animsition.min.css" rel="stylesheet" media="all" /> <link href="vendor/bootstrap-progressbar/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet" media="all" /> <link href="vendor/wow/animate.css" rel="stylesheet" media="all" /> <link href="vendor/css-hamburgers/hamburgers.min.css" rel="stylesheet" media="all" /> <link href="vendor/slick/slick.css" rel="stylesheet" media="all" /> <link href="vendor/select2/select2.min.css" rel="stylesheet" media="all" /> <link href="vendor/perfect-scrollbar/perfect-scrollbar.css" rel="stylesheet" media="all" /> <!-- Main CSS--> <link href="css/theme.css" rel="stylesheet" media="all" /> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" /> <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" /> <link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" /> </head> <body class="animsition"> <div class="page-wrapper"> <!-- HEADER MOBILE--> <header class="header-mobile d-block d-lg-none"> <div class="header-mobile__bar"> <div class="container-fluid"> <div class="header-mobile-inner"> <a class="logo" href="index.html"> <img src="images/Logo-horiz.png" alt="CoolAdmin" /> </a> <button class="hamburger hamburger--slider" type="button"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </button> </div> </div> </div> <nav class="navbar-mobile"> <div class="container-fluid"> <ul class="navbar-mobile__list list-unstyled"> <li class="has-sub"> <a class="js-arrow" href="index.php"> <i class="fas fa-tachometer-alt"></i>Pagina Inicial</a > </li> <li> <a href="chart.php"> <i class="fas fa-chart-bar"></i>Adicionar Itens</a > </li> <li> <a href="table.php"> <i class="fas fa-table"></i>Itens Atuais</a > </li> <li> <a href="form.html"> <i class="far fa-check-square"></i>Clientes</a > </li> <li> <a href="calendar.html"> <i class="fas fa-calendar-alt"></i>Detalhe De Encomendas</a > </li> </ul> </div> </nav> </header> <!-- END HEADER MOBILE--> <!-- MENU SIDEBAR--> <aside class="menu-sidebar d-none d-lg-block"> <div class="logo"> <a href="#"> <img src="images/icon/logo.png" alt="Cool Admin" /> </a> </div> <div class="menu-sidebar__content js-scrollbar1"> <nav class="navbar-sidebar"> <ul class="list-unstyled navbar__list"> <li class="has-sub"> <a class="js-arrow" href="#"> <i class="fas fa-tachometer-alt"></i>Pagina Principal</a > </li> <li> <a href="chart.html"> <i class="fas fa-chart-bar"></i>Charts</a> </li> <li class="active"> <a href="table.html"> <i class="fas fa-table"></i>Tables</a> </li> <li> <a href="form.html"> <i class="far fa-check-square"></i>Forms</a > </li> <li> <a href="calendar.html"> <i class="fas fa-calendar-alt"></i>Calendar</a > </li> <li> <a href="map.html"> <i class="fas fa-map-marker-alt"></i>Maps</a > </li> </ul> </nav> </div> </aside> <!-- END MENU SIDEBAR--> <!-- PAGE CONTAINER--> <div class="page-container"> <!-- HEADER DESKTOP--> <header class="header-desktop"> <div class="section__content section__content--p30"> <div class="container-fluid"> <div class="header-wrap"> <form class="form-header" action="" method="POST"></form> <div class="header-button"> <div class="account-wrap"> <div class="account-item clearfix js-item-menu"> <div class="image"> <img src="images/icon/avatar-01.jpg" alt="John Doe" /> </div> <div class="content"> <a class="js-acc-btn" href="#">Admin</a> </div> <div class="account-dropdown js-dropdown"> <div class="info clearfix"> <div class="image"> <a href="#"> <img src="images/icon/avatar-01.jpg" alt="John Doe" /> </a> </div> <div class="content"> <h5 class="name"> <a href="#">Admin</a> </h5> <span class="email">???</span> </div> </div> <div class="account-dropdown__footer"> <a href="#"> <i class="zmdi zmdi-power"></i>Logout</a> </div> </div> </div> </div> </div> </div> </div> </div> </header> <!-- END HEADER DESKTOP--> <!-- MAIN CONTENT--> <div class="main-content"> <div class="section__content section__content--p30"> <div class="container-fluid"> <div class="row mt-30"> <div class="col-md-12"> <div class="table-responsive "> <table id="example" class="table table-borderless table-striped table-earning" > <thead> <tr> <th>Referência</th> <th>Nome</th> <th>Descrição Detalhada</th> <th class="text-right">Preço de Custo</th> <th>Margem/%</th> <th>Stock</th> <th>IVA</th> <th>Familia</th> </tr> </thead> <tbody> <tr> <td>2018-09-29 05:57</td> <td>100398</td> <td>iPhone X 64Gb Grey</td> <td class="text-right">$999.00</td> <td class="text-right">1</td> <td class="text-right">$999.00</td> </tr> <tr> <td>2018-09-28 01:22</td> <td>100397</td> <td>Samsung S8 Black</td> <td class="text-right">$756.00</td> <td class="text-right">1</td> <td class="text-right">$756.00</td> </tr> <tr> <td>2018-09-27 02:12</td> <td>100396</td> <td>Game Console Controller</td> <td class="text-right">$22.00</td> <td class="text-right">2</td> <td class="text-right">$44.00</td> </tr> <tr> <td>2018-09-26 23:06</td> <td>100395</td> <td>iPhone X 256Gb Black</td> <td class="text-right">$1199.00</td> <td class="text-right">1</td> <td class="text-right">$1199.00</td> </tr> <tr> <td>2018-09-25 19:03</td> <td>100393</td> <td>USB 3.0 Cable</td> <td class="text-right">$10.00</td> <td class="text-right">3</td> <td class="text-right">$30.00</td> </tr> <tr> <td>2018-09-29 05:57</td> <td>100392</td> <td>Smartwatch 4.0 LTE Wifi</td> <td class="text-right">$199.00</td> <td class="text-right">6</td> <td class="text-right">$1494.00</td> </tr> <tr> <td>2018-09-24 19:10</td> <td>100391</td> <td>Camera C430W 4k</td> <td class="text-right">$699.00</td> <td class="text-right">1</td> <td class="text-right">$699.00</td> </tr> <tr> <td>2018-09-22 00:43</td> <td>100393</td> <td>USB 3.0 Cable</td> <td class="text-right">$10.00</td> <td class="text-right">3</td> <td class="text-right">$30.00</td> </tr> </tbody> </table> </div> </div> </div> <div class="row mt-30"> <div class="col-md-12"> <!-- DATA TABLE--> <div class="table-responsive mb-40"> <table class="table table-borderless table-data3"> <thead> <tr> <th>date</th> <th>type</th> <th>description</th> <th>status</th> <th>price</th> </tr> </thead> <tbody> <tr> <td>2018-09-29 05:57</td> <td>Mobile</td> <td>iPhone X 64Gb Grey</td> <td class="process">Processed</td> <td>$999.00</td> </tr> <tr> <td>2018-09-28 01:22</td> <td>Mobile</td> <td>Samsung S8 Black</td> <td class="process">Processed</td> <td>$756.00</td> </tr> <tr> <td>2018-09-27 02:12</td> <td>Game</td> <td>Game Console Controller</td> <td class="denied">Denied</td> <td>$22.00</td> </tr> <tr> <td>2018-09-26 23:06</td> <td>Mobile</td> <td>iPhone X 256Gb Black</td> <td class="denied">Denied</td> <td>$1199.00</td> </tr> <tr> <td>2018-09-25 19:03</td> <td>Accessories</td> <td>USB 3.0 Cable</td> <td class="process">Processed</td> <td>$10.00</td> </tr> <tr> <td>2018-09-29 05:57</td> <td>Accesories</td> <td>Smartwatch 4.0 LTE Wifi</td> <td class="denied">Denied</td> <td>$199.00</td> </tr> <tr> <td>2018-09-24 19:10</td> <td>Camera</td> <td>Camera C430W 4k</td> <td class="process">Processed</td> <td>$699.00</td> </tr> <tr> <td>2018-09-22 00:43</td> <td>Computer</td> <td>Macbook Pro Retina 2017</td> <td class="process">Processed</td> <td>$10.00</td> </tr> </tbody> </table> </div> <!-- END DATA TABLE--> </div> </div> <div class="row"> <div class="col-md-12"> <div class="copyright"> <p> Copyright © 2018 Colorlib. All rights reserved. Template by <a href="https://colorlib.com">Colorlib</a>. </p> </div> </div> </div> </div> </div> </div> </div> </div> <!-- Jquery JS--> <script src="vendor/jquery-3.2.1.min.js"></script> <!-- Bootstrap JS--> <script src="vendor/bootstrap-4.1/popper.min.js"></script> <script src="vendor/bootstrap-4.1/bootstrap.min.js"></script> <!-- Vendor JS --> <script src="vendor/slick/slick.min.js"></script> <script src="vendor/wow/wow.min.js"></script> <script src="vendor/animsition/animsition.min.js"></script> <script src="vendor/bootstrap-progressbar/bootstrap-progressbar.min.js"></script> <script src="vendor/counter-up/jquery.waypoints.min.js"></script> <script src="vendor/counter-up/jquery.counterup.min.js"></script> <script src="vendor/circle-progress/circle-progress.min.js"></script> <script src="vendor/perfect-scrollbar/perfect-scrollbar.js"></script> <script src="vendor/chartjs/Chart.bundle.min.js"></script> <script src="vendor/select2/select2.min.js"></script> <!-- Main JS--> <script src="js/main.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.js"></script> <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script> <script> $(document).ready(function() { var table = $("#example").DataTable(); }); </script> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Datatables - Jquery is not working in datatables in pagination
jQuery Datatables Not Working
jQuery DataTables altEditor issue
Sorting is not working in jQuery datatables
JQuery Datatables columns overflow
jQuery Datatables is returning html
Adding Buttons to Datatables - Jquery
jQuery Datatables filter position
jQuery DataTables Plugin - iDisplayLength
Fill Jquery datatables dynamically
Related Tags