Trying to improve bootstrap table adding datatables. Datatable doesn't seem to affect page at all.
Trying to improve bootstrap table adding datatables. Datatable doesn't seem to affect page at all.
cardboardrings
Posts: 2Questions: 1Answers: 0
I would like to post a test case but have never done that with DataTables live site ( http://live.datatables.net ) or JS Fiddle ( http://jsfiddle.net ), and find neither site sufficiently self explanatory. I do not want to post live as it would overwrite the existing page with working Bootstrap. (in case it helps to see the table I'm trying to improve http://www.mldb.dianak.com/mldb.html)
The reason I want to add datatables is primarily for fixed header and first column. I don't see any other way to add this functionality.
In the mean time, until I lean how to better post the test case, can anyone see in here why all the datatables code I added today is having no effect on the table?
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Moving Light Database</title>
<meta name="description" content=" " />
<meta name="keywords" content=" " />
<!--bootstrap CSS-->
<link rel="stylesheet" href="bootstrap-table-dark.css">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link rel="../src/stylesheet" href="bootstrap-table-filter.css">
<!--bootstrap JS-->
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="../src/bootstrap-table-filter.js"></script>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.min.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="/DataTables-1.10.5/media/js/jquery.js"></script>
<!-- DataTables JS-->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.js"></script>
<link type="text/javascript" charset="utf8" href="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js">
<!-- DataTables with Bootstrap -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.css">
<link type="text/javascript" charset="utf8" href="//cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.js">
<link type="text/javascript" charset="utf8" href="//code.jquery.com/jquery-1.11.1.min.js">
</head>
<body class="body" style="font-family:Verdana" >
| Model Name | Manufacturer | Type | Spot/ Wash |
Lamp Type | Wattage | Color Temp | CRI | Lumens Max |
Length (mm or noted) |
Width (mm or noted) |
Height (mm or noted) |
Weight (mm or noted) |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| A.leda B-EYE K10 | Clay Paky | Head/Yoke | Wash | 19 LED | 300 | 2500-8000 | - | - | 253 | 360 | 449 | 33.1 |
<script type="text/javascript">
$(function() {
$('#tbl').bootstrapTable();
$('#filter-bar').bootstrapTableFilter({
connectTo: '#tbl',
onAll: function(name, args) {
var d = new Date();
$('#log').prepend(d.toLocaleString() + ': ' + name + "\n");
},
onSubmit: function(data) {
var data = $('#filter-bar').bootstrapTableFilter('getData');
var d = new Date();
$('#log').prepend(d.toLocaleString() + ': ' + JSON.stringify(data) + "\n");
}
});
});
</script>
</body>
</html>
Answers
Well that is never going to read right. Sorry. I need help posting to DataTables live site or JS Fiddle