CSS
CSS
HTML
HTML
tables
tables

Data Tables Select

Hi,

I am trying to get Data Tables Select working on this page http://kroweb.dk/gfdev/kancelli_raw2/kancelli.php

I have downloaded the Select extension (Select - 1.2.4) and uploaded it to my page, and I have set select to true in the scripts. But it is not working. Can anybody help with this :)

I have this main file which I believe is the one we should look into :)

<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);
?>


<!DOCTYPE html>
<html lang="da">
<head>
  <!-- Check for title--> 
  <title>Dansk Kancelli</title>

  <meta charset="utf-8" lang="da">

  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">    
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.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">
  $(document).ready(function() {
    $('#tdata').dataTable( {
      responsive:true,
      select: true,
      
    } );
  } );
  </script>

</head>


<body>
 <!-- Page content start-->        
 <div class="w3-row" style="overflow: auto">

  <!-- Main page start-->  

  <div class="w3-row">
    <!-- Column1 start-->         
    <div class="w3-col w3-mobile" style="width:80%; margin-top: 10px; margin-left: 20px; margin-bottom:10px; padding-bottom: 10px;"> <br>

      <div id="KcList" class='list' ></div>


      <hr style= 'border-color: #9F5584; margin-bottom:0px; margin-top:0px;'>
      <br>
      <div class="w3-row"> <!-- for content inside this column -->
      </div>
    </div>
    <!-- Column1, end-->

    <!-- Column3 start--> 
    <div class="w3-col w3-mobile" style="width:15%; margin-top: 10px; margin-left: 10px; margin-bottom:10px;"> 
      <div class="container" style="border: 1px solid #666666; margin-top: 20px; margin-bottom: 20px;"><h5>Interessante og meget anvendte arkivalier, herunder fra Dansk Kancelli, Suppliker og Registre og Tegnelser</h5>
      </div>
      <img src= "Praest_der_laeser.png" alt="Slægtsforsker" style="width:100%; border: solid 1px #cccccc;"> 
    </div>
    <!-- Column3 end--> 

    <script>
    $('#KcList > table').remove();    
    $.ajax({
     url: 'ajaxFtListHtml.php',
       //data: $('#search').serialize(),
       method:'POST',
       dataType: 'html'
     }).done(function (res){             
      $('#KcList').html(res);
      $('#tdata').DataTable({select: true, searching: true, paging: false, info: false, "dom": '<"top"<if>', order: []});
      
    });         

     </script>  
   </div>
   <!-- Main page end--> 
   

 </body>   
 </html>
</div>  
<!-- Page content end-->

Open in new window

Peter KromanSales ExecutiveAsked: 2017-12-18

Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

Experts Exchange Solution brought to you by

Enjoy your complimentary solution view.

Get every solution instantly with Premium. Start your 7-day free trial.

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.

LVL 44

zephyr_hex (Megan)DeveloperCommented: 2017-12-18

I don't see a table defined in your HTML (where is the element with id tdata ?)
Also, line 78 references "DataTable" which is the OLD version of dataTable. It should be dataTable, not DataTable.

Also, why do you init dataTable twice? Line 30 & 78.

I have a basic demo here: https://jsfiddle.net/zephyr_hex/h13awjns/1/

LVL 51

Chris StanyonWebDevCommented: 2017-12-18

Hey Peter,

You say you've downloaded the Select extension and uploaded it to your page, but there's nothing in your code that loads the Select extension - looks like you're probably missing that part

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.4/css/select.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.4/js/dataTables.select.min.js"></script>

Open in new window

Peter KromanSales ExecutiveAuthor Commented: 2017-12-19

Thanks,

I have edited line 78, and removed the script around line 30.

And I have added the lines (again) that you suggest Chris.

It is still not working :(

I paste in the edited code, and the code that defines the table too.

<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);
?>


<!DOCTYPE html>
<html lang="da">
<head>
  <!-- Check for title--> 
  <title>Dansk Kancelli</title>

  <meta charset="utf-8" lang="da">

  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">    
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.4/css/select.dataTables.min.css" />
  <script type="text/javascript" src="https://cdn.datatables.net/select/1.2.4/js/dataTables.select.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>

  

</head>


<body>
 <!-- Page content start-->        
 <div class="w3-row" style="overflow: auto">

  <!-- Main page start-->  

  <div class="w3-row">
    <!-- Column1 start-->         
    <div class="w3-col w3-mobile" style="width:80%; margin-top: 10px; margin-left: 20px; margin-bottom:10px; padding-bottom: 10px;"> <br>

      <div id="KcList" class='list' ></div>


      <hr style= 'border-color: #9F5584; margin-bottom:0px; margin-top:0px;'>
      <br>
      <div class="w3-row"> <!-- for content inside this column -->
      </div>
    </div>
    <!-- Column1, end-->

    <!-- Column3 start--> 
    <div class="w3-col w3-mobile" style="width:15%; margin-top: 10px; margin-left: 10px; margin-bottom:10px;"> 
      <div class="container" style="border: 1px solid #666666; margin-top: 20px; margin-bottom: 20px;"><h5>Interessante og meget anvendte arkivalier, herunder fra Dansk Kancelli, Suppliker og Registre og Tegnelser</h5>
      </div>
      <img src= "Praest_der_laeser.png" alt="Slægtsforsker" style="width:100%; border: solid 1px #cccccc;"> 
    </div>
    <!-- Column3 end--> 

    <script>
    $('#KcList > table').remove();    
    $.ajax({
     url: 'ajaxFtListHtml.php',
       //data: $('#search').serialize(),
       method:'POST',
       dataType: 'html'
     }).done(function (res){             
      $('#KcList').html(res);
      $('#tdata').dataTable({select: true, searching: true, paging: false, info: false, "dom": '<"top"<if>', order: []});
      
    });         

     </script>  
   </div>
   <!-- Main page end--> 
   

 </body>   
 </html>
</div>  
<!-- Page content end-->

Open in new window

            <?php

            $con = mysqli_connect("db credentials");


        // Check connection
            if($con === false){
                die("ERROR: Could not connect. " . mysqli_connect_error()); 
            }
            mysqli_select_db($con,"genealogisk_dk_db5");

            mysqli_set_charset($con,"utf8");


            $raw_results = mysqli_query($con, "SELECT * FROM danske_kancelli")
            or die(mysql_error());

//var_dump($raw_results);

            if(mysqli_num_rows($raw_results) > 0){ ?>

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

               <table id="tdata" style="width:100%;" class="dataTable">
      <thead>
         <tr>
            <th class="sorting" aria-controls="tdata">Sted</th>
            <th class="sorting" aria-controls="tdata">Fra</th>
            <th class="sorting" aria-controls="tdata">Til</th>
            <th class="sorting" aria-controls="tdata">Register</th>
            <th class="sorting" aria-controls="tdata">Journal</th>            

         </tr>
      </thead>

     <?php while($row = $result=mysqli_fetch_array($raw_results)): ?>
         <tr>
            <td><?php echo $row["sted"] ?></td>
            <td><?php echo $row["fra_aar"] ?></td>
            <td><?php echo $row["til_aar"] ?></td>
            <td><?php echo "<a href=\"".$row["url"]."\"target=\"_blank\">" . $row["register"] ?></td>
            <td><?php echo "<a href=\"".$row["infourl"]."\"target=\"_blank\">" . $row["journal"] ?></td>
         </tr>
      <?php endwhile; ?>
      
 
   </table>
</div>

<?php
               

            mysqli_close($con);
        }
        ?>

Open in new window

Peter KromanSales ExecutiveAuthor Commented: 2017-12-19

But - is some kind of installation of Select not needed to get it working?

I have just downloaded the extension - a folder named "Select-1.2.4" - from datatables.nnet and uploaded that folder to my page.
Is there anything else I need to do?

LVL 51

Chris StanyonWebDevCommented: 2017-12-19

Hey Peter,

The script at line 30 has no effect so removing it makes sense, but it wasn't part of the problem. And you can use DataTable() with an upper case D - that's actually correct. You can also use it with a lower case d but that returns a different object. Go with the upper case version.

To use the select plugin you need to reference it in your page. You can either download the package and reference that local copy or you can reference the online copy from the DataTables CDN. You are referencing the online copy so there is no need to download the plugin to a folder.

There are a coupe of reasons for your problem. Firstly, you need to make sure you load the scripts in the correct order: jQuery -> DataTables -> DataTables Select. You are trying to load the Select plugin before the DataTables plugin. Load them in this order:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.4/js/dataTables.select.min.js"></script>

Open in new window

You also look to have a slight error in your "dom" property. It should be this:

"dom": '<"top"if>t'

Open in new window

You have a mismatch in the brackets and no T element.

Peter KromanSales ExecutiveAuthor Commented: 2017-12-19

Hi Chris,

I have put in your suggestions. Sadly it still does not work. You ca see it here http://kroweb.dk/gfdev/kancelli_raw2/kancelli.php

Code as it is now:

<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);
?>


<!DOCTYPE html>
<html lang="da">
<head>
  <!-- Check for title--> 
  <title>Dansk Kancelli</title>

  <meta charset="utf-8" lang="da">

  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="style.css">    
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.4/js/dataTables.select.min.js"></script> 

</head>


<body>
 <!-- Page content start-->        
 <div class="w3-row" style="overflow: auto">

  <!-- Main page start-->  

  <div class="w3-row">
    <!-- Column1 start-->         
    <div class="w3-col w3-mobile" style="width:80%; margin-top: 10px; margin-left: 20px; margin-bottom:10px; padding-bottom: 10px;"> <br>

      <div id="KcList" class='table' ></div>


      <hr style= 'border-color: #9F5584; margin-bottom:0px; margin-top:0px;'>
      <br>
      <div class="w3-row"> <!-- for content inside this column -->
      </div>
    </div>
    <!-- Column1, end-->

    <!-- Column2 start--> 
    <div class="w3-col w3-mobile" style="width:15%; margin-top: 10px; margin-left: 10px; margin-bottom:10px;"> 
      <div class="container" style="border: 1px solid #666666; margin-top: 20px; margin-bottom: 20px;"><h5>Interessante og meget anvendte arkivalier, herunder fra Dansk Kancelli, Suppliker og Registre og Tegnelser</h5>
      </div>
      <img src= "Praest_der_laeser.png" alt="Slægtsforsker" style="width:100%; border: solid 1px #cccccc;"> 
    </div>
    <!-- Column2 end--> 

    <script>
    $('#KcList > table').remove();    
    $.ajax({
     url: 'ajaxFtListHtml.php',
       method:'POST',
       dataType: 'html'
     }).done(function (res){             
      $('#KcList').html(res);
      $('#tdata').DataTable({responsive: true, searching: true, paging: false, info: false, select: true, "dom": '<"top"if>t', order: []});
      
    });         

     </script>  
   </div>
   <!-- Main page end--> 
   

 </body>   
 </html>
</div>  
<!-- Page content end-->

Open in new window

LVL 51

Chris StanyonWebDevCommented: 2017-12-19

Hey Peter,

You've still got your dom property wrong!

You've got this:

"dom": '<"top"<if>t'

I showed this:

"dom": '<"top"if>t'

You still have the mis-match of brackets in yours.

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

LVL 51

Chris StanyonWebDevCommented: 2017-12-19

Actually, in the code you posted above it is correct, but on your live page it's wrong. Maybe you haven't uploaded the page changes :)

Peter KromanSales ExecutiveAuthor Commented: 2017-12-19

Well - I am making changes all the time, and I must have made some wrong "change-back" here.

IT IS WORKING NOW :)

Thanks a lot, Chris.

LVL 51

Chris StanyonWebDevCommented: 2017-12-19

No worries Peter - we've all done that :)

Peter KromanSales ExecutiveAuthor Commented: 2017-12-19

Just posting a new question that I hope you will help mw with too :)

Peter KromanSales ExecutiveAuthor Commented: 2017-12-19

Thanks again Chris,

I can not tell you how much I am learning from your great help.
I really hope that I am not tearing your patience with me apart :) :) :)

LVL 44

zephyr_hex (Megan)DeveloperCommented: 2017-12-19

Just a note for anyone who comes across this down the road. DataTable with the uppercase D refers to current DataTables object. dataTable with lower case d refers to the legacy version of jQuery datatables. I had it backwards earlier.

So, this is legacy usage:

$('#example').dataTable();

Open in new window

And this is current usage (v 1.10+):

$('#example').DataTable();

Open in new window

LVL 51

Chris StanyonWebDevCommented: 2017-12-19

Megan,

I did notice that, but actually, you can use both in the current version - the difference is in what gets returned by each call. DataTable() returns an instance of the DataTable API, whereas dataTable() returns an instance of a jQuery object. For most users, it makes sense to use the newer DataTable(), but occassionally, you'll need the dataTable() method because you'll want access to the table as a jQuery object.

:)

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.

CSS

By:

Adam Barney

Bootstrap 3.1: Fundamentals

Premium

Premium members can enroll in this course at no extra cost.
Learn More

70 lessons
HTML

By:

Sandra Batakis

Certification
Certification: MCSA MCSE Microsoft Certified Solutions Associate & …

Premium

Premium members can enroll in this course at no extra cost.
Learn More

435 lessons
CSS

By:

John Ulliman

HTML5 and CSS3 Fundamentals

Premium

Premium members can enroll in this course at no extra cost.
Learn More

42 lessons
CSS

By:

John Ulliman

HTML5 and CSS3 Fundamentals

Premium

Premium members can enroll in this course at no extra cost.
Learn More

42 lessons
CSS

By:

Alex Garrett

Introduction to Web Design

Premium

Premium members can enroll in this course at no extra cost.
Learn More

41 lessons
Programming

By:

Brett Hooper

JavaScript Best Practices

Premium

Premium members can enroll in this course at no extra cost.
Learn More

12 lessons
Document Management

By:

Martin VanDerSchouw

Scope and Requirements

Premium

Premium members can enroll in this course at no extra cost.
Learn More

212 lessons
Microsoft Applications

By:

Patrick Loner

Certification
Certification: MOS Microsoft Office Specialist - Word 2016 Part …

Premium

Premium members can enroll in this course at no extra cost.
Learn More

125 lessons
Microsoft Applications

By:

Debbie Fierst

Certification
Certification: MOS Microsoft Office Specialist - Word 2013 Part …

Premium

Premium members can enroll in this course at no extra cost.
Learn More

120 lessons
Microsoft Applications

By:

Patrick Loner

Certification
Certification: MOS Microsoft Office Specialist - PowerPoint 2016…

Premium

Premium members can enroll in this course at no extra cost.
Learn More

224 lessons