Ok disclaimer: I am totally building a website the wrong way. To start off, I copied the source code from a Wordpress blog and I've been editing it by taking out stuff and seeing what happens to the page. So take into account any explanation will probably have to be very rudimentary for me to understand.
So I finally got a page that I like. I included a table from Data Tables, sort of like this one.
But I also want something in my page to be collapsible, maybe something like this.
So the problem I've found is that there are two link rel="stylesheet" css things that aren't meshing.
This one makes the collapsible thing work
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
And this one makes the tables work
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
But together the collapsible works and the table works, but then the format of the header is all messed up and doesn't work.
This is the messup when both the link rels are there
This is when just the table code is there but not the collapsible
Any ideas? I'm assuming I have too many references that are overlapping, but I'm not really sure the standards/rules for this or how to fix it. Here is my head code. If necessary, I can give more code.
<head>
<title>Training– Academy</title>
<link rel='stylesheet' id='screen-css-1' href='https://s1.wp.com/wp-content/themes/pub/pique/style.css?m=1465934028h' type='text/css' media='screen' />
<link rel='stylesheet' id='pique-fonts-css' href='https://fonts.googleapis.com/css?family=Lora%3A400%2C700%2C400italic%2C700italic%7CKarla%3A400%2C700%2C400italic%2C700italic&subset=latin%2Clatin-ext' type='text/css' media='all' />
<script type='text/javascript' src='https://s1.wp.com/_static/??-eJyFzksKAjEMANAL2Sn+Rl2IZ5lPpqS2TW1Si57eCroQB4VAQvISoktUGAaXR2Bta1wypNsrNZYX+hdQHk3qBBqP4Y0HCgJBntZTjw5UZkidqb16aKIZF4nFA3NFM9PPlzBcEcpfZkFiN5xVAsb719XekVHRZYOBda0NjJRFTeQcFV1wNCB15+SPy03bblfrw25vH0h6b8A='></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/jquery-1.12.3.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<style>
#wrapper {
width: 100%;
height: auto;
}
#centered {
margin: 0 auto;
width: 700px;
}
#list {
margin: 0 auto;
width: 610px;
}
</style>
<script>
$(document).ready(function() {
$('#trainingtable').DataTable();
$('input.global_filter').on( 'keyup click', function () {
filterGlobal();
} );
$('input.column_filter').on( 'keyup click', function () {
filterColumn( $(this).parents('tr').attr('data-column') );
} );
} );
</script>
<script>
$(document).ready(function() {
$('#linktable').DataTable();
$('input.global_filter').on( 'keyup click', function () {
filterGlobal();
} );
$('input.column_filter').on( 'keyup click', function () {
filterColumn( $(this).parents('tr').attr('data-column') );
} );
} );
</script>
</head>
Aucun commentaire:
Enregistrer un commentaire