A problem with DataTables

Hi,

I have a problem showing the Data Tables searchfield. I have tried everything I can think of, but it does not show.
What am I doing wrong.

The page is this: http://kroweb.dk/gfdev/ft_raw2/

I have this main code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Folketællinger</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">


    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css" />


    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>

  <script type="text/javascript" src="jquery.dataTables.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
        $('#myTable').dataTable( {
          responsive:true
            "language": {
                "url": "dataTables.danish.lang"
            }
        } );
    } );
</script>

    <script type="text/javascript">
    $(function(){
        $('#ft_items').on('click', '.toggle', function() {
            $(this).parents('tr').nextAll('tr.child').toggle();
        });
    });
    </script>


</head>

<body>
    <!-- Søge felt til folketællinger -->
    <div class="container" style="width:100%;padding-top:10px;background-color:#f6f6f6;">
        <!-- HEADER START -->
        <div class="row" id="header">


            <form method="POST" id="search" style="margin-left:30px; margin-right: 30px;"> 
                <label for="amt">Amt</label> 
                <select id="amt" name="amt" style="width: 125px; margin-right: 20px; font-weight:normal; ">
                    <option value=""></option>
                    <option value="Bornholm">Bornholm</option>
                    <option value="Frederiksborg">Frederiksborg</option>
                    <option value="Færøerne">Færøerne</option>
                    <option value="Grønland">Grønland</option>
                    <option value="Haderslev">Haderslev</option>
                    <option value="Hjørring">Hjørring</option>
                    <option value="Holbæk">Holbæk</option>
                    <option value="København">København</option>
                    <option value="Køøge">Køge</option>               
                    <option value="Maribo">Maribo</option>
                    <option value="Odense">Odense</option>
                    <option value="Præstø">Præstø</option>
                    <option value="Randers">Randers</option>
                    <option value="Ribe">Ribe</option>
                    <option value="Ringkøbing">Ringkøbing</option>
                    <option value="Roskilde">Roskilde</option>
                    <option value="Skanderborg">Skanderborg</option>
                    <option value="Sorø">Sorø</option>
                    <option value="Svendborg">Svendborg</option>
                    <option value="Sønderborg">Sønderborg</option>
                    <option value="Thisted">Thisted</option>
                    <option value="Tønder">Tønder</option> 
                    <option value="Vejle">Vejle</option>
                    <option value="Viborg">Viborg</option>
                    <option value="Aabenraa">Aabenraa</option>
                    <option value="Aalborg">Aalborg</option>
                    <option value="Aarhus">Aarhus</option>
                    <option value="Åbenrå-Sønderborg">Åbenrå-Sønderborg</option>
                </select>

                <label for="type">Type</label>
                <select id="type" name="type"style="width: 160px; margin-right: 20px; font-weight:normal;">
                    <option value=""></option>
                    <option value="Landdistrikt">Søg i Landdistrikter</option>
                    <option value="Købstad">Søg i Købstæder</option>
                    <option value="Hovedstaden">Søg i Hovedstaden</option>
                </select>


                <label for="aar">År</label>                
                <select id="aar" name="query_start" style=" width: 65px; margin-right: 20px; font-weight:normal; ">
                    <option value=""></option>
                    <option value="1787">1787</option>
                    <option value="1801">1801</option>
                    <option value="1803">1803</option>
                    <option value="1834">1834</option>
                    <option value="1835">1835</option>
                    <option value="1840">1840</option>
                    <option value="1845">1845</option>
                    <option value="1850">1850</option>
                    <option value="1855">1855</option>
                    <option value="1860">1860</option>
                    <option value="1861">1861</option>
                    <option value="1870">1870</option>
                    <option value="1878">1878</option>
                    <option value="1880">1880</option>
                    <option value="1890">1890</option>
                    <option value="1901">1901</option>
                    <option value="1906">1906</option>
                    <option value="1911">1911</option>
                    <option value="1916">1916</option>
                    <option value="1921">1921</option>
                    <option value="1925">1925</option>
                    <option value="1930">1930</option>
                    <option value="1940">1940</option>

                </select>

                <label for="sogn">Sted, By, Sogn, Gade</label>
                <input type="text" name="sogn" id="sogn" placeholder="Fritekst" style="color: #e08a94;">
                <input type="submit" value="Søg" name="Sog" id="Sog">  
                <input type="reset" value="Nulstil">
                <script>
                $(':reset', '#search').click(function(e) {
                    $('#ft_items').html('');
                });
                </script>

            </form>
        </div>  
        <!-- HEADER END -->        
    </div>


    <div id="ft_items" class="dataTable"></div>


    <script>
      var SogButton=document.getElementById('Sog'); //"Søg" button
      var input_1 = document.getElementById('sogn'); //main searchfield
      var list = document.getElementById('ft_items'); //main searchresult
 


            // "Søg" button function
            SogButton.addEventListener('click',function (){
      $('#ft_items > table').remove();    
      $.ajax({
       url: 'ajaxFtListHtml.php',
       data: $('#search').serialize(),
       method:'POST',
       dataType: 'html'
     }).done(function (res){  
      $('#ft_items > table').remove();                 
            $('#ft_items').html(res);
             $('#myTable').DataTable({searching: true, paging: false, info: false, "dom": '<"top"<if>', order: []});


            
          });           

 });

      // Return key search function
      $('#search').submit(function(e) {
        e.preventDefault();
        $.ajax({
            url : 'ajaxFtHtml.php',
            method: 'post',
            data : $('#search').serialize(),
            dataType: 'html'
        }).done(function(res){
            $('#ft_items > table').remove();          
            $('#ft_items').html(res);
            $('#my_table').DataTable({searching: true, paging: false, info: false, "dom": '<"top"<if>', order: []}); 
  
        });
    });




      </script>

  </body>
  </html>

Open in new window


This ajax file code:
<?php
// Turn on error reporting
error_reporting(E_ALL);
ini_set('display_errors', 1);

function cityVariations($city) {
    $substitute = array(
        "æ" => "ae",
        "ø" => "oe",
        "å" => "aa",
        "ae" =>"æ",
        "oe" =>"ø",
        "aa" => "å",
        );

    $flatCity = mb_convert_case($city, MB_CASE_LOWER);

    $cities[] = $flatCity;
    $cities[] = strtr($flatCity, $substitute); 

    return $cities;
}

// Do we need the database
if (!empty($_POST)):

// Connect to the database if we have a POST
    $mysqli = mysqli_connect("db credentials") or die("Error connecting to database!");
$mysqli->set_charset("utf8");

// Trim the input values
$start = trim($_POST['query_start']); 
$sogn = trim($_POST['sogn']);
$amt = trim($_POST['amt']);
$type = trim($_POST['type']);

        // Get the city variations
$cities = cityVariations($sogn);

        // Prepare the cities for the LIKE clause by wrapping each in %...%
array_walk($cities, function (&$city) { $city = '%'.$city.'%'; });




if (!empty($amt) && !empty($sogn) && empty($type) && empty($start)):
                // We have a 'amt - 'sogn' value

    $query = $mysqli->prepare("SELECT * FROM ftu WHERE Amt = ? AND ((Sogn LIKE ? OR Sogn LIKE ?) OR (AmtHerredSognGade LIKE ? OR AmtHerredSognGade LIKE ? )) ORDER BY Aar ASC, Amt ASC");
$query->bind_param("sssss",$amt, $cities[0], $cities[1], $cities[0], $cities[1]);



elseif (!empty($amt) && !empty($start) && !empty($sogn) && empty($type)):
                // We have a 'amt' - 'aar' - sogn' value

    $query = $mysqli->prepare("SELECT * FROM ftu WHERE Amt = ? AND Aar = ? AND ((Sogn LIKE ? OR Sogn LIKE ?) OR (AmtHerredSognGade LIKE ? OR AmtHerredSognGade LIKE ? )) ORDER BY Aar ASC, Amt ASC");
$query->bind_param("ssssss", $amt, $start, $cities[0], $cities[1], $cities[0], $cities[1]); 

else:   


    if (!empty($amt) && !empty($type) && !empty($start) && !empty($sogn)):
        //We have 'amt' - 'type' - 'aar' - 'sted' value

        $query = $mysqli->prepare("SELECT * FROM ftu WHERE Amt = ? AND Type = ? AND Aar = ? AND ((Sogn LIKE ? OR Sogn LIKE ?) OR (AmtHerredSognGade LIKE ? OR AmtHerredSognGade LIKE ? )) ORDER BY Aar ASC, Amt ASC");
    $query->bind_param("sssssss", $amt, $type, $start, $cities[0], $cities[1], $cities[0], $cities[1]);   

        //var_dump($amt, $type, $start, $cities);

    elseif (!empty($type) && !empty($sogn) && empty($start) && empty($amt)):
                // We have a 'type' - sogn' value

        $query = $mysqli->prepare("SELECT * FROM ftu WHERE Type = ? AND ((Sogn LIKE ? OR Sogn LIKE ?) OR (AmtHerredSognGade LIKE ? OR AmtHerredSognGade LIKE ? )) ORDER BY Aar ASC, Amt ASC");
    $query->bind_param("sssss", $type, $cities[0], $cities[1], $cities[0], $cities[1]); 


    else:

      if (!empty($amt) && !empty($type) && !empty($start) && empty($sogn)):
        //We have 'amt' - 'type' - 'aar' value

        $query = $mysqli->prepare("SELECT * FROM ftu WHERE Amt = ? AND Type = ? AND Aar = ? ORDER BY Aar ASC, Amt ASC");
    $query->bind_param("sss", $amt, $type, $start);   




    elseif (!empty($amt) && !empty($type) && empty($start) && empty($sogn)):
        //We have 'amt' - 'type' value

        $query = $mysqli->prepare("SELECT * FROM ftu WHERE Amt = ? AND Type = ? ORDER BY Aar ASC, Amt ASC");
    $query->bind_param("ss", $amt, $type);   



    else:


        if (!empty($amt) && empty($type) && empty($start) && empty($sogn)):
        //We have 'amt' value

            $query = $mysqli->prepare("SELECT * FROM ftu WHERE Amt = ? ORDER BY Aar ASC, Amt ASC");
        $query->bind_param("s", $amt);   

    //var_dump($amt, $type, $start, $cities); 


        elseif (!empty($amt) && empty($type) && !empty($start) && empty($sogn)):
        //We have 'amt' - 'aar' value

            $query = $mysqli->prepare("SELECT * FROM ftu WHERE Amt = ? AND Aar = ? ORDER BY Aar ASC, Amt ASC");
        $query->bind_param("ss", $amt, $start);       
    //var_dump($amt, $start); 


        else:

            if (!empty($type) && !empty($start) && !empty($sogn) && empty($amt)):
            // We have a 'type' - 'aar' - 'sogn' value

                $query = $mysqli->prepare("SELECT * FROM ftu WHERE Type = ? AND Aar = ? AND ((Sogn LIKE ? OR Sogn LIKE ?) OR (AmtHerredSognGade LIKE ? OR AmtHerredSognGade LIKE ? )) ORDER BY Aar ASC, Amt ASC");
            $query->bind_param("ssssss",$type, $start, $cities[0], $cities[1], $cities[0], $cities[1]);


            elseif  (!empty($type) && !empty($start) && empty($sogn) && empty($amt)):
            // We have a 'type' - 'aar' value

                $query = $mysqli->prepare("SELECT * FROM ftu WHERE Type = ? AND Aar = ? ORDER BY Aar ASC, Amt ASC ");
            $query->bind_param("ss",$type, $start); 



            else:

                if (!empty($type) && empty($start) && empty($sogn) && empty($amt)):
            // We have a 'type' value

                    echo "<h2> Feltet 'Type' skal anvendes sammen med mindst ét af de andre valg. Klik på Nulstil og prøv igen </h2>";

            //    $query = $mysqli->prepare("SELECT * FROM ftu WHERE Type = ?");
            //$query->bind_param("s",$type); 


                elseif (!empty($start) && !empty($sogn) && empty($type) && empty($amt)):
            // We have a 'aar' - 'sogn' value

                    $query = $mysqli->prepare("SELECT * FROM ftu WHERE Aar = ? AND ((Sogn LIKE ? OR Sogn LIKE ?) OR (AmtHerredSognGade LIKE ? OR AmtHerredSognGade LIKE ? )) ORDER BY Aar ASC, Amt ASC");
                $query->bind_param("sssss",$start, $cities[0], $cities[1], $cities[0], $cities[1]);  


                else:                

                    if (!empty($start) && empty($sogn) && empty($type) && empty($amt)):
            // We have a 'aar' value

                        $query = $mysqli->prepare("SELECT * FROM ftu WHERE Aar = ? ORDER BY Aar ASC, Amt ASC");
                    $query->bind_param("s",$start);


                    elseif (!empty($sogn) && empty($start) && empty($type) && empty($amt)):
            // We have a sogn' value

                        $query = $mysqli->prepare("SELECT * FROM ftu WHERE (Sogn LIKE ? OR Sogn LIKE ?) ORDER BY Aar ASC, Amt ASC");
                    $query->bind_param("ss", $cities[0], $cities[1]); 


                    endif;

                    endif;

                    endif;

                    endif;

                    endif;

                    endif; 

                    endif; 



// Do we have a query to run
                    if (!empty($query)):
                        $query->execute();
                    $results = $query->get_result();
                    endif;

                    endif;
                    ?>

                    <div class="flex-container" style="width:site-width; background-color:white;">
                        <div class="flex-item" style="margin-top:10px; float:left; margin-left:20px;width: site-width; overflow:auto;">
                            <div class="row" style="margin-left:10px;margin-right:10px;">

                             <!-- Have we ran a query -->
                             <?php if (isset($results)): ?>

                             <!-- Do we have any results -->
                             <?php if ($results->num_rows): ?>

                             <div class="w3-row w3-mobile" style="width:100%; font-size: 12px"> 

                                <table id="myTable" class="dataTable">

                                    <thead>
                                        <tr>
                                            <colgroup> </colgroup>

                                            <th class="&bsp;" ></th>
                                            <th class="sorting" aria-controls="myTable">Landd.: Amt Herred Sogn <br> Byer: Amt By Sogn</th>
                                            <th class="sorting" aria-controls="myTable">Amt</th>
                                            <th class="sorting" aria-controls="myTable">Aar</th>
                                            <th class="sorting" aria-controls="myTable">Type</th>            
                                            <th class="sorting" aria-controls="myTable">Gade (Kbh. 1860)</th>
                                            <th class="sorting" aria-controls="mytable">Matr. Nr. (Kbh 1860)</th>        

                                        </tr>
                                    </thead>                

                                    <!-- Loop through the results of the query -->
                                    <?php while ($row = $results->fetch_object()): ?>

                                    <!-- Links for the individual rows -->    
                                    <?php
                                    $link1 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->URL, $row->AmtHerredSognGade); 
                                    $link2 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->Infourl, $row->Info);
                                    $link3 = sprintf("<a href='%s' target='_blank'>%s</a>", $row->Infourl, $row->Gade);
                                    $link4 = sprintf($row->AmtHerredSognGade);
                                    ?>


                                    <?php if ($row->Collapse == 'p'): ?>
                                    <!-- We have a parent row -->

                                    <tbody class='toggle' >
                                        <tr class="expander">
                                            <td><span class='toggle'></td>
                                            <td><?php echo (!empty($row->URL)) ? $link1 : $link4 ?></td>
                                            <td><?php echo $row->Amt ?></td>             
                                            <td><?php echo $row->Aar ?></td>
                                            <td><?php echo $row->Type ?></td>   
                                            <td><?php echo $row->Gade ?></td>            
                                            <td><?php echo $row->Kvarter ?></td>            
                                        </tr>

                                    <?php elseif ($row->Collapse == 'c'): ?>
                                    <!-- We have a child row -->

                                    <tr class="child">
                                        <td>&nbsp;</td>
                                        <td><?php echo (!empty($row->URL)) ? $link1 : $link4 ?></td>
                                        <td><?php echo $row->Amt ?></td>             
                                        <td><?php echo $row->Aar ?></td>
                                        <td><?php echo $row->Type ?></td>
                                        <td><?php echo $row->Gade ?></td>            
                                        <td><?php echo $row->Kvarter ?></td>           
                                    </tr>

                                <?php else: ?>
                                <!-- We have a non-collapsible row -->

                                <tr class="non">
                                    <td>&nbsp;</td>
                                    <!-- Område, link -->
                                    <!-- <td><?php echo $link1 ?> </td> -->
                                    <td><?php echo (!empty($row->URL)) ? $link1 : $link4 ?></td>
                                    <td><?php echo $row->Amt ?></td>      
                                    <td><?php echo $row->Aar ?></td>
                                    <td><?php echo $row->Type ?></td>
                                    <td colspan="2">&nbsp;</td>
                                </tr>

                            <?php endif; ?>

                        <?php endwhile; ?>



                    </table>
                </div>

            <?php else: ?>

            <p>Der er ingen resultater for denne søgning</p>

        <?php endif; ?>
    <?php endif; ?>


</div>
</div> 
</div>

Open in new window


This CSS code:
        h2 {
            font-size: 14px;
            font-weight: normal;
            color: red;
            margin-left: 250px;
        }




      #myTable, th {
        border-bottom: 1px solid #666666;
        border-top: 0px;
        border-right: 0px;
        border-left: 0px;
        padding-left:5px;
        padding-right:5px;
        margin-top:15px;
        margin-bottom:5px;
        border-collapse: collapse;
        padding-top:10px;
        padding-left:20px;
        color:black;
        font-family: Serif;
        font-size: 16px;
        font-weight: bold;
        text-align: left;
        background-color: #f6f6f6;
      }

      #myTable, td {

        border-top: 1px solid #666666;
        border-bottom: 1px solid #666666;
        border-left: 0px solid #666666;
        border-right: 0px solid #666666;
        border-collapse: collapse;
        vertical-align: bottom;
        height: 10px;
        margin-bottom:0px;
        margin-top:15px;
        padding-bottom: 0px:;
        padding-top:0px;
        padding-left:5px;
        padding-right:5px;
        color:blue;
        font-family: Arial;
        font-size: 12px;
        font-weight: bold;
        text-align: left; 
        background-color: rgba(204, 255, 153, 0.2);


      }

        .dataTables_filter { float:right; }
        .dataTables_info { float: left; }    
        
          #header { margin-top: 10px; margin-bottom:10px; }
          tbody.toggle tr.child { display: none; background-color: #f6f6f6;}
          tbody.toggle tr:nth-child(even){ display: none; background-color: #d5d5d5;}
          tbody.toggle tr.expander { display: table-row; background-color: #f6f6f6; }
          tbody.toggle tr.non { display: table-row; background-color: white; }
          span.toggle { cursor: pointer; color: cornflowerblue; font-size: 16px; font-family: 'FontAwesome'; }
          span.toggle:hover { color: blue; }
          span.toggle:after { content: '\f055' };


        a:link {
            color: black;
            text-decoration: underline;
            font-weight: bold;
        }
        a:visited {
            color: #e08a94;
            text-decoration: underline;

        }
        a:hover {
            color: cornflowerblue;
            text-decoration: underline;
            font-weight:bold;
        }
        a:active {
            color: black;
            text-decoration: underline;
        }

        /*.table > tbody + tbody { border-top: none; }
        .table > tbody > tr > td { border-top: none; }*/

  

        table tr td:nth-child(1){width: 10px; font-weight:normal; color:black;}        
        table tr td:nth-child(2){width: 300px; font-weight:normal; color:black;}
        table tr td:nth-child(3){width: 75px; font-weight:normal; color:black;}
        table tr td:nth-child(4){width: 25px; font-weight: normal; color:black;}
        table tr td:nth-child(5){width: 100px; font-weight: normal; color:black;}
        table tr td:nth-child(6){width: 150px; font-weight: normal; color:black;}
        table tr td:nth-child(7){width: 150px; font-weight: normal; color:black;}


        #header { margin-top: 10px; margin-bottom:10px; }
 

Open in new window

Peter KromanSenior Proposal SpecialistAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
Hey Peter,

A few issues that you'll need to deal with.

At line 23 of your main code, you have a call to DataTable. That code has an error in it - a missing comma after the responsive property:

responsive:true <-- YOU SHOULD HAVE A COMMA HERE

Havng said that, because you're loading the Datatable dynamically through AJAX (and then calling DataTable in the done() callback), that entire method is not needed and actually has no effect so I would remove it completely.

Further down in your main file (starting around line 149, you have 2 methods - one bound to the Click event of the Sog button and one bound to the Submit event of the form. Both of these methods do the same thing. Clicking on the button effectively Submits the form, so the Submit event is fired. If you look at the done() callback of the Submit event, you'll see you are trying to set up the datatable on the #my_table element when you should be setting it up on the #myTable element.

You only need the method on the Submit event - not on the button Click event, so your entire bottom script should look like this:

<script>
$('#search').submit(function(e) {
    e.preventDefault();
    $.ajax({
        url : 'ajaxFtHtml.php',
        method: 'post',
        data : $('#search').serialize(),
        dataType: 'html'
    }).done(function(res){
        $('#ft_items').html(res);
        $('#myTable').dataTable({searching: true, paging: false, info: false, "dom": '<"top"<if>', order: []}); 
    });
});
</script>

Open in new window

I've also remove the table.remove() call as it's not needed - the very next line overwrites the entire content of the #ft_items div, therefore removing the table by default anyway.
0
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks Chris,

I have removed the first function and replaced the two functions at the end, as you suggest.
Still no DataTables search field.

The main code likes like this now:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Folketællinger</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">


    <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css" /> -->


    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>

  <script type="text/javascript" src="jquery.dataTables.js"></script>
 
  <script type="text/javascript">
    $(function(){
        $('#ft_items').on('click', '.toggle', function() {
            $(this).parents('tr').nextAll('tr.child').toggle();
        });
    });
    </script>


</head>

<body>
    <!-- Søge felt til folketællinger -->
    <div class="container" style="width:100%;padding-top:10px;background-color:#f6f6f6;">
        <!-- HEADER START -->
        <div class="row" id="header">


            <form method="POST" id="search" style="margin-left:30px; margin-right: 30px;"> 
                <label for="amt">Amt</label> 
                <select id="amt" name="amt" style="width: 125px; margin-right: 20px; font-weight:normal; ">
                    <option value=""></option>
                    <option value="Bornholm">Bornholm</option>
                    <option value="Frederiksborg">Frederiksborg</option>
                    <option value="Færøerne">Færøerne</option>
                    <option value="Grønland">Grønland</option>
                    <option value="Haderslev">Haderslev</option>
                    <option value="Hjørring">Hjørring</option>
                    <option value="Holbæk">Holbæk</option>
                    <option value="København">København</option>
                    <option value="Køøge">Køge</option>               
                    <option value="Maribo">Maribo</option>
                    <option value="Odense">Odense</option>
                    <option value="Præstø">Præstø</option>
                    <option value="Randers">Randers</option>
                    <option value="Ribe">Ribe</option>
                    <option value="Ringkøbing">Ringkøbing</option>
                    <option value="Roskilde">Roskilde</option>
                    <option value="Skanderborg">Skanderborg</option>
                    <option value="Sorø">Sorø</option>
                    <option value="Svendborg">Svendborg</option>
                    <option value="Sønderborg">Sønderborg</option>
                    <option value="Thisted">Thisted</option>
                    <option value="Tønder">Tønder</option> 
                    <option value="Vejle">Vejle</option>
                    <option value="Viborg">Viborg</option>
                    <option value="Aabenraa">Aabenraa</option>
                    <option value="Aalborg">Aalborg</option>
                    <option value="Aarhus">Aarhus</option>
                    <option value="Åbenrå-Sønderborg">Åbenrå-Sønderborg</option>
                </select>

                <label for="type">Type</label>
                <select id="type" name="type"style="width: 160px; margin-right: 20px; font-weight:normal;">
                    <option value=""></option>
                    <option value="Landdistrikt">Søg i Landdistrikter</option>
                    <option value="Købstad">Søg i Købstæder</option>
                    <option value="Hovedstaden">Søg i Hovedstaden</option>
                </select>


                <label for="aar">År</label>                
                <select id="aar" name="query_start" style=" width: 65px; margin-right: 20px; font-weight:normal; ">
                    <option value=""></option>
                    <option value="1787">1787</option>
                    <option value="1801">1801</option>
                    <option value="1803">1803</option>
                    <option value="1834">1834</option>
                    <option value="1835">1835</option>
                    <option value="1840">1840</option>
                    <option value="1845">1845</option>
                    <option value="1850">1850</option>
                    <option value="1855">1855</option>
                    <option value="1860">1860</option>
                    <option value="1861">1861</option>
                    <option value="1870">1870</option>
                    <option value="1878">1878</option>
                    <option value="1880">1880</option>
                    <option value="1890">1890</option>
                    <option value="1901">1901</option>
                    <option value="1906">1906</option>
                    <option value="1911">1911</option>
                    <option value="1916">1916</option>
                    <option value="1921">1921</option>
                    <option value="1925">1925</option>
                    <option value="1930">1930</option>
                    <option value="1940">1940</option>

                </select>

                <label for="sogn">Sted, By, Sogn, Gade</label>
                <input type="text" name="sogn" id="sogn" placeholder="Fritekst" style="color: #e08a94;">
                <input type="submit" value="Søg" name="Sog" id="Sog">  
                <input type="reset" value="Nulstil">
                <script>
                $(':reset', '#search').click(function(e) {
                    $('#ft_items').html('');
                });
                </script>

            </form>
        </div>  
        <!-- HEADER END -->        
    </div>


    <div id="ft_items" class="dataTable"></div>


    <script>

      // Search Button and Return key search function
      $('#search').submit(function(e) {
        e.preventDefault();
        $.ajax({
            url : 'ajaxFtHtml.php',
            method: 'post',
            data : $('#search').serialize(),
            dataType: 'html'
        }).done(function(res){
            $('#ft_items').html(res);
            $('#myTable').dataTable({searching: true, paging: false, info: false, "dom": '<"top"<if>', order: []}); 
        });
    });


      </script>

  </body>
  </html>

Open in new window

0
Peter KromanSenior Proposal SpecialistAuthor Commented:
... forgot to say that I had turned the DataTables stylesheet off - have just turned it on again, but sadly there is no difference regarding the search field :)
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Peter KromanSenior Proposal SpecialistAuthor Commented:
CHEERS AND MERRY CHRISTMAS :) :)

I have found the solution.

Just commented out this: <colgroup> </colgroup>

But I dont know why it works - perhaps you can give me hint about that, Chris?
0
Chris StanyonWebDevCommented:
Hey Peter,

The reason it didn't work is because your <colgroup> tags were in the wrong place and therefore gave you invalid HTML. A <colgroup> MUST be a child of a <table> element. Yours is a child of a <tr> element (only <td> and <th> can be children of <tr>!). If you need to include the <colgroup> just move it:

<table id="myTable" class="dataTable">
    <colgroup> </colgroup>
    <thead>
        <tr>
            <th class="&bsp;" ></th>
            ...

Open in new window

Having said that, you're not actually doing anything with the colgroup so it probably doesn't make any sense to have it at all.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks Chris,

That makes sense. I have remived the colgroup tag from this page because I really don't need it here :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.