search builder

vsek · December 2020

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

kthorngren · December 2020

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

vsek · December 2020

ok took out extra stuff. this is what i have now and still am not seeing the buttons?

<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>  
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/searchbuilder/1.0.1/js/dataTables.searchBuilder.min.js"></script>
     
    <script>
    $(document).ready( function () {
         var table = $('#scrapedTable').DataTable({ 
              dom: 'Qfrtip',
                "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" }
                ],
         deferRender: true
         })
    });
    </script>
</head>

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren · December 2020

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

vsek · December 2020

here is a link to the webpage with the suggested changes

http://www.findmynextbike.com/

tangerine · December 2020

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.

vsek · December 2020

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?

kthorngren · December 2020

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 html tag 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

search builder

search builder

Answers

Howdy, Stranger!

Categories

DataTables

search builder

search builder

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables