search builder
search builder
vsek
Posts: 30Questions: 17Answers: 0
Hello, I am not able to seem to get that fancy new search builder to work. Below is code for my screen. Anything I am missing?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8" />
<title>Spring Boot + JPA + Datatables</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.23/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.23/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="CssFile.css" />
<script>
$(document).ready( function () {
var table = $('#scrapedTable').DataTable({
searchBuilder:{
"sAjaxSource": "/scrapedData",
"sAjaxDataProp": "",
"order" : [ [ 1, 'asc' ] ],
"aoColumns": [
{ "mData": "price" },
{ "mData": "description" },
{ "mData": "url",
"render": function ( url ) {
return '<a href= '+ url + ' target=_blank> link </a>';
}
},
{ "mData": "location" }
]
},
dom: 'Qfrtip'
})
});
</script>
</head>
<body style="background-color:darkgray;">
<div class="bg"></div>
<div style="background-color:lightgray" class="container">
<div>
<table id="scrapedTable" class="table-striped">
<!-- Header Table -->
<thead >
<tr>
<th>Price</th>
<th>Description</th>
<th>Url</th>
<th>Location</th>
</tr>
</thead>
<!-- Footer Table -->
<tfoot>
<tr>
<th>Price</th>
<th>Description</th>
<th>Url</th>
<th>Location</th>
</tr>
</tfoot>
</table>
</div>
</div>
<br>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</body>
</html>
Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
This discussion has been closed.
Answers
You are loading jquery.js, bootstrap.js and datatables.js multiple times and conflicting versions. You will want to load them only once. Also you aren't loading the Search Builder include files. The best option is to use the Download Builder to generate the proper set of files.
You are including your Datatables init code inside a `searchBuilder object (line 26). Remove line 26 and the corresponding line 40.
Take a look at the examples to see how to initialize a basic Search Builder.
Kevin
ok took out extra stuff. this is what i have now and still am not seeing the buttons?
Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
I copied most of your code into this test case and it works for the most part. You code snippet is missing the CSS files.
http://live.datatables.net/juvedeva/1/edit
Also please you markdown to format your code.
If you still have issues then please post a link to your page or create a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Take a look at your browser's console for errors.
Kevin
here is a link to the webpage with the suggested changes
http://www.findmynextbike.com/
I am seeing no mention of searchBuilder in your code. Also your HTML is wrong, with no HTML tag at the beginning and no < head > tag.
Look more carefully at Kevin's example.
Got it figured out thanks. I guess only issue left is the formatting for the buttons dont look right. Is this the correct way to import in css stuff for this?
<link rel="stylesheet" src="https://cdn.datatables.net/searchbuilder/1.0.1/css/searchBuilder.dataTables.min.css">
Yes, you need to add the CSS. Since you are using Bootstrap you should use the proper styling files for Bootstrap. See the styling docs for more information. As I mentioned before you are loading two different versions of Bootstrap styling and have other duplicate include files like jquery.js. Choose either BS 3 or 4 and remove the duplicated files. Also use the Download builder to get the proper files for the Bootstrap 3 or 4 environment you are going to use.
As Tangerine mentioned your page is missing
htmltag and other HTML elements for a proper page. This is outside of Datatables support so you should use a tutorial like w3schools to show proper web page setup.Kevin