Integration of deeplink.js into existing table

Samu2nd · December 2018

Hey Guys,
i have a little problem with the integration of the deepLink plugin into my existing table.

This is my original table

$(document).ready(function() {
   var dataTable = $('#mytable').DataTable( {
      "iDisplayLength": 30,
      "pagingType": "full",
      "ajax": "Database.txt",
   } );
} );

Now my table looks like this.

$(document).ready( function () {
   $('#mytable').DataTable( $.fn.dataTable.ext.deepLink( [
      'search.search'
       ] ) 
   );
});

So where do i have to place my settings, for example.

"iDisplayLength": 30,    or
"pagingType": "full",    or
"ajax": "Database.txt",

Does anyone know that ?
I know its a dumb question but i don't get it.
Thx Samu

colin · January 2019

Hi @Samu2nd ,

You would just use them both together, like this:

$(document).ready(function() {
   var dataTable = $('#mytable').DataTable( {
      "iDisplayLength": 30,
      "pagingType": "full",
      "ajax": "Database.txt",
      $.fn.dataTable.ext.deepLink( ['search.search' ] )
   } );
} );

Cheers,

Colin

Samu2nd · January 2019

Thx for your answer Colin
but i got the same result as always.
My pagination disappears and deeplink is not working.
This is my minimised Code.

Save it as TEST.htm

<html>
    
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/plug-ins/1.10.19/features/deepLink/dataTables.deepLink.min.js"></script>
    <script type="text/javascript" class="init">
    

$(document).ready(function() {
   var dataTable = $('#mytable').DataTable( {
      "iDisplayLength": 2,
      "pagingType": "full",
      $.fn.dataTable.ext.deepLink( ['search.search' ] )
   } );
} );

       </script>

<table id="mytable" class="display" style="width:100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Testlink</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>ID.01</td>
                <td>Anton A.</td>
                <td> <a style="color:red;" href="TEST.htm?search.search=Anton">Testlink</a> </td>
            </tr>
            <tr>
                <td>ID.02</td>
                <td>Boris B.</td>
                <td> <a style="color:red;" href="TEST.htm?search.search=Boris">Testlink</a> </td>
            </tr>
            <tr>
                <td>ID.03</td>
                <td>Claudia C.</td>
                <td> <a style="color:red;" href="TEST.htm?search.search=Claudia">Testlink</a> </td>
            </tr>
            <tr>
                <td>ID.04</td>
                <td>Daniel D.</td>
                <td> <a style="color:red;" href="TEST.htm?search.search=Daniel">Testlink</a> </td>
            </tr>
            <tr>
                <td>ID.05</td>
                <td>Enzo E.</td>
                <td> <a style="color:red;" href="TEST.htm?search.search=Enzo">Testlink</a> </td>
            </tr>
        </tbody>
    </table>

</html>

colin · January 2019

Hi @Samu2nd ,

Ah, sorry, the default options have to be inside the curlies, the deeplink outside - see here.

Cheers,

Colin

Samu2nd · January 2019

Hi Colin,
first i have to tell you that you forgot to remove the JS comment signs // at JS line 3 and 4. But unfortunately i get the same issue as before if i remove them. No pagination, and no deeplink function. If i dont remove them i have the pagination but still no deeplink function.

Thx Samu

colin · January 2019

Hi @Samu2nd ,

Not sure what happened there, that was a work-in-progress fiddle - this is a working one.

One thing to note is it won't work there, as the fiddle is being too clever and it strips out the search. If you try the attached file, the same code as in the fiddle, and add ?search.search=Anton to the URL, you'll see it in action.

Cheers,

Colin

Samu2nd · January 2019

Hi Colin,
you are right. Its working now.
Thanks for your time & help

Integration of deeplink.js into existing table

Integration of deeplink.js into existing table

Answers

Howdy, Stranger!

Categories

DataTables

Integration of deeplink.js into existing table

Integration of deeplink.js into existing table

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables