DataTables jquery
DataTables jquery
提问于 2020-03-06 19:10:56
我似乎无法将数据表添加到我的表中。你能帮我找出哪里做错了吗？
<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.这是我现在尝试使用的链接和脚本，我已经使用了官方网站中的连接，但它也不起作用。我试着做一个新的html页面，它起作用了，但在这个页面中它似乎不起作用。如果你想下载文件，这里是http://sendanywhe.re/Z1UV5OCM链接，我不知道另一种发送文件的方式。我发现的问题，我认为是bootstrap或其他东西阻塞了datatables jquery插件。
<!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 m-t-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 m-t-30">
<div class="col-md-12">
<!-- DATA TABLE-->
<div class="table-responsive m-b-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
Stack Overflow用户
发布于 2020-03-06 19: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>
兄弟，您必须在"thead“和"tbody”中添加相同的第n列，在第一个表"thead“中有8列，但"tbody”只有6列，所以只需添加“td<>E210”2次即可
Stack Overflow用户
发布于 2020-03-06 20:11:59
我为数据表添加了一些JS和CSS CDN
<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"
/>这能解决问题吗？
<!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 m-t-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 m-t-30">
<div class="col-md-12">
<!-- DATA TABLE-->
<div class="table-responsive m-b-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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60562900
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号