Я использую CSS Таблицы данных , мой код указан ниже. Я использую Twitter Bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" sizes="57x57" href="icons/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="icons/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="icons/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="icons/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="icons/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="icons/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="manifest" href="icons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="icons/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<title>BLA BLA BLA</title>
<!-- Bootstrap -->
<link href="vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="vendors/nprogress/nprogress.css" rel="stylesheet">
<!-- iCheck -->
<link href="vendors/iCheck/skins/flat/green.css" rel="stylesheet">
<!-- bootstrap-progressbar -->
<link href="vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
<!-- JQVMap -->
<link href="vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
<!-- bootstrap-daterangepicker -->
<link href="vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="build/css/custom.min.css" rel="stylesheet">
<!-- Custom Responsive Style -->
<link href="build/css/responsive.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
</head>
<body class="nav-md">
<div class="container body">
<div class="main_container">
<div class="col-md-3 left_col">
<div class="left_col scroll-view">
<div class="navbar nav_title" style="border: 0;">
<a href="index.html" class="site_title">Global Sea Foods</a>
</div>
<div class="clearfix"></div>
<!-- sidebar menu -->
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="sidenav">
<button class="dropdown-btn"><i class="icon-search iconsp"><img src="images/icons-admin.jpg" width="20" height="20" alt=""></i> Super Admin
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
<a href="super-admin-settings.html">Super Admin Settings</a>
<a href="admin.html">Administrator Accounts</a>
</div>
<a href="mobile-admin-operations.html"><i class="icon-search iconsp"><img src="images/icons-gsfapp.jpg" width="20" height="20" alt=""></i> Mobile Staff</a>
<a href="fresh-products.html"><i class="icon-search iconsp"><img src="images/icons-products.jpg" width="20" height="20" alt=""></i> Fresh Products</a>
<button class="dropdown-btn"><i class="icon-search iconsp"><img src="images/icons-settings.jpg" width="20" height="20" alt=""></i> Product Settings
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-container">
<a href="species.html">Species</a>
<a href="product-grades.html">Product Grades</a>
<a href="#">Product</a>
<a href="#">Product Type</a>
<a href="#">Product Specs</a>
<a href="#">Product Size</a>
</div>
</div>
</div>
<!-- /sidebar menu -->
</div>
</div>
<!-- top navigation -->
<div class="top_nav">
<div class="nav_menu">
<nav>
<div class="nav toggle">
<a id="menu_toggle"><i class="fa fa-bars"></i></a>
</div><div class="nav-sm logo">Global Sea Foods</div>
<div class="btn-group">
<div class="dropdown-toggle logbt" data-toggle="dropdown">
<span class="horiz">|</span> <span id="user-name">John Deo</span> <i class="fa fa-angle-down" aria-hidden="true"></i>
</div>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" type="button" href="#">Logout</a>
</div>
</div>
</nav>
</div>
</div>
<!-- /top navigation -->
<!-- page content -->
<div class="right_col" role="main">
<div class="container">
<div class="row title">
<div class="col-md-8 col-sm-8 col-xs-12">
<h1 class="main-titles">Fresh Products</h1>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 text-right padd10">
<button type="button" class="btn btn-primary sm-bt" data-toggle="modal" data-target="#addnewModal">Add Product</button>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="x_panel tile fixed_height_320">
<h4>List of Products</h4>
<div class="table-responsive">
<table class="display" id="myTable">
<thead>
<tr>
<th>Species</th>
<th>Product</th>
<th>Product Type</th>
<th>Grade</th>
<th>Specs</th>
<th>Size</th>
<th>Edit</th>
<th class="text-right">Delete</th>
</tr>
</thead>
<tbody>
</tbodystyle="height: 100px;">
</table>
</div>
</div>
</div>
</div>
</div>
<!-- /page content -->
<!-- footer content -->
<footer>
<div class="">
</div>
<div class="clearfix"></div>
</footer>
<!-- /footer content -->
</div>
</div>
<!-- Add New-->
<div class="modal fade" id="addnewModal" tabindex="-1" role="dialog" aria-labelledby="addnewModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title" id="addnewModalLabel">Add a New Fresh Product</h1>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="createaccount padd20">
<form>
<div class="form-group">
<label for="sel1">Select Species</label>
<select class="form-control">
<option value="1" disabled selected>Yellow Fin Tuna</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class="form-group padd10">
<label for="sel1">Select Product</label>
<select class="form-control">
<option value="1" disabled selected>Loin</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class="form-group padd10">
<label for="sel1">Select Product Type</label>
<select class="form-control">
<option value="1" disabled selected>Skin On</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class="form-group padd10">
<label for="sel1">Select Product Grade</label>
<select class="form-control">
<option value="1" disabled selected>Grade B</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class="form-group padd10">
<label for="sel1">Select Product Specs</label>
<select class="form-control">
<option value="1" disabled selected>Select Product Specs</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class="form-group padd10">
<label for="sel1">Select Product Size</label>
<select class="form-control">
<option value="1" disabled selected>2-4 Kg</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class="form-group padd10">
<input type="submit" class="btn btn-primary full-bt" id="update" value="Add Product">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Add New-->
<!-- Popup-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title" id="exampleModalLabel">Edit Fresh Product</h1>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12 max-width">
<div class="createaccount">
<form>
<div class="form-group padd10">
<select class="form-control">
<option value="1" disabled selected>Yellow Fin Tuna</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class="form-group padd10">
<select class="form-control">
<option value="1" disabled selected>Grade 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
<div class="form-group padd10">
<input type="text" class="form-control" id="Specs" placeholder="Skinless Boneless, Full Loins" value="Skinless Boneless, Full Loins">
</div>
<div class="form-group padd10">
<input type="text" class="form-control" id="Size" placeholder="2-4 Kgs" value="2-4 Kgs">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary sm-bt" id="Edit Product" value="Edit Product">
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end Popup-->
<!-- popup Are You sure -->
<div class="modal fade" id="remove" tabindex="-1" role="dialog" aria-labelledby="removeLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title" id="removeLabel">Remove Product</h1>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12">
<div class="areyousure">
<form>
<div class="form-group">
<div class="row">
<div class="col-sm-12 popform-title" for="email">Are you sure you want to remove this product</div>
</div>
</div>
<div class="form-group padd20">
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-8 mob-align max-width"><input type="submit" class="btn btn-primary sm-bt green-bt" id="update" value="Yes"> <input type="submit" class="btn btn-primary sm-bt red-bt" id="update" value="No" data-dismiss="modal" aria-label="Close"></div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- end popup Are You sure -->
<!-- jQuery -->
<script src="vendors/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="vendors/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- FastClick -->
<script src="vendors/fastclick/lib/fastclick.js"></script>
<!-- NProgress -->
<script src="vendors/nprogress/nprogress.js"></script>
<!-- Chart.js -->
<script src="vendors/Chart.js/dist/Chart.min.js"></script>
<!-- gauge.js -->
<script src="vendors/gauge.js/dist/gauge.min.js"></script>
<!-- bootstrap-progressbar -->
<script src="vendors/bootstrap-progressbar/bootstrap-progressbar.min.js"></script>
<!-- iCheck -->
<script src="vendors/iCheck/icheck.min.js"></script>
<!-- Skycons -->
<script src="vendors/skycons/skycons.js"></script>
<!-- Flot -->
<script src="vendors/Flot/jquery.flot.js"></script>
<script src="vendors/Flot/jquery.flot.pie.js"></script>
<script src="vendors/Flot/jquery.flot.time.js"></script>
<script src="vendors/Flot/jquery.flot.stack.js"></script>
<script src="vendors/Flot/jquery.flot.resize.js"></script>
<!-- Flot plugins -->
<script src="vendors/flot.orderbars/js/jquery.flot.orderBars.js"></script>
<script src="vendors/flot-spline/js/jquery.flot.spline.min.js"></script>
<script src="vendors/flot.curvedlines/curvedLines.js"></script>
<!-- DateJS -->
<script src="vendors/DateJS/build/date.js"></script>
<!-- JQVMap -->
<script src="vendors/jqvmap/dist/jquery.vmap.js"></script>
<script src="vendors/jqvmap/dist/maps/jquery.vmap.world.js"></script>
<script src="vendors/jqvmap/examples/js/jquery.vmap.sampledata.js"></script>
<!-- bootstrap-daterangepicker -->
<script src="vendors/moment/min/moment.min.js"></script>
<script src="vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<!-- Custom Theme Scripts -->
<script src="build/js/custom.min.js"></script>
<script >
$(".toggle-password").click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
</script>
<script>
/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;
for (i = 0; i < dropdown.length; i++) {
dropdown[i].addEventListener("click", function() {
this.classList.toggle("active");
var dropdownContent = this.nextElementSibling;
if (dropdownContent.style.display === "block") {
dropdownContent.style.display = "none";
} else {
dropdownContent.style.display = "block";
}
});
}
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>
</body>
</html>
Я столкнулся с проблемой, с которой никогда не сталкивался, веб-страница загружается очень долго! Я заметил проблему в Chrome Инспектор. Это как показано ниже.
GET http://www.greenriverworks.com/elements/borders/green_button_background_over.jpg net::ERR_CONNECTION_RESET
Fa @ jquery.min.js:3
css @ jquery.min.js:3
(anonymous) @ jquery.min.js:3
K @ jquery.min.js:2
css @ jquery.min.js:3
(anonymous) @ jquery.dataTables.min.js:27
each @ jquery.min.js:2
W @ jquery.dataTables.min.js:27
Ja @ jquery.dataTables.min.js:75
ja @ jquery.dataTables.min.js:62
e @ jquery.dataTables.min.js:106
(anonymous) @ jquery.dataTables.min.js:106
each @ jquery.min.js:2
each @ jquery.min.js:2
q @ jquery.dataTables.min.js:96
f.fn.DataTable @ jquery.dataTables.min.js:179
(anonymous) @ fresh-products.html:408
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
ready @ jquery.min.js:2
J @ jquery.min.js:2
Некоторое изображение с greenriverworks.com загружается вечно, и я не знаю, что это за веб-сайт. Кажется, ссылка доступна в одном из JS файлов.
Когда я удалил свою таблицу данных, особенно следующую часть, все вернулось в нормальное состояние.
$(document).ready( function () {
$('#myTable').DataTable();
}
Почему это так?