Integration of deeplink.js into existing table

Integration of deeplink.js into existing table

Samu2ndSamu2nd Posts: 8Questions: 2Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 4,323Questions: 0Answers: 769

    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

  • Samu2ndSamu2nd Posts: 8Questions: 2Answers: 0
    edited January 5

    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>
    
  • colincolin Posts: 4,323Questions: 0Answers: 769

    Hi @Samu2nd ,

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

    Cheers,

    Colin

  • Samu2ndSamu2nd Posts: 8Questions: 2Answers: 0

    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

  • colincolin Posts: 4,323Questions: 0Answers: 769
    Answer ✓

    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

  • Samu2ndSamu2nd Posts: 8Questions: 2Answers: 0

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

Sign In or Register to comment.