Erro Deep linking into DataTables load

rafasw

I'm trying to make it work Deep linking
However, when I put the code I followed in the website reference, it doesn't work, it doesn't load the data table

code that doesn't work

$(document).ready(function() {

    var advance = {
        dom: 'Blfrtip',

        mark: true,
          buttons: {
              name: 'primary',
              buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ]
          },
    };
 
  
    var searchOptions = $.fn.dataTable.ext.deepLink( [
        'search.search', 'order', 'displayStart'
    ] );
 
 
    $('#advanced-table').DataTable(
        $.extend( advance, searchOptions )
    );
    
 

// Setup - add a text input to each footer cell
    $('#advanced-table tfoot th').each( function () {
        
  
        
    } );
      // Apply the search
 advance.columns().every( function () {
    
        var title = $(this.footer()).text();
    $(this.footer()).html( '<div class="md-input-wrapper"><input type="text" class="md-form-control" placeholder=" '+title+'" /></div>' );
     
        var that = this;
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that.search( this.value ).draw();
            }
        } );
    } );

    

    } );

code without deep link works perfectly

$(document).ready(function() {

      var advance = $('#advanced-table').DataTable( {
  dom: 'Blfrtip',

  mark: true,
    buttons: {
        name: 'primary',
        buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ]
    },

   
    } );

    
    
 


    $('#advanced-table tfoot th').each( function () {       
    } );


 advance.columns().every( function () {
    
        var title = $(this.footer()).text();
    $(this.footer()).html( '<div class="md-input-wrapper"><input type="text" class="md-form-control" placeholder=" '+title+'" /></div>' );
     
        var that = this;
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that.search( this.value ).draw();
            }
        } );
    } );

    

    } );`

How do I resolve this? thanks

allan

Can you link to an example showing the issue so we can help to debug it please?

Thanks,
Allan

kthorngren

I copied your code to this test case:
https://live.datatables.net/zilesudi/1/edit

It is working, for example:
https://live.datatables.net/zilesudi/1?order=[[1,%22asc%22]]

When you say it doesn't work, what exactly is not working?

Have you checked the browser's log for errors?

Did you load the deep link script as documented in the blog?

If you still need help then please post a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

rafasw

the only way I managed was like this

$(document).ready(function() {

    function getUrlVars() {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    }

    var searchTerm = getUrlVars()['search'];
      var advance = $('#advanced-table').DataTable( {
  dom: 'Blfrtip',

  mark: true,
    buttons: {
        name: 'primary',
        buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print' ]
    },
    search: {
        search: searchTerm
      }

   
    });

    
    1
2


// Setup - add a text input to each footer cell
    $('#advanced-table tfoot th').each( function () {
        
  
        
    } );
      // Apply the search
 advance.columns().every( function () {
    
        var title = $(this.footer()).text();
    $(this.footer()).html( '<div class="md-input-wrapper"><input type="text" class="md-form-control" placeholder=" '+title+'" /></div>' );
     
        var that = this;
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that.search( this.value ).draw();
            }
        } );
    } );

    

    } );

but it doesn't work with multiple fields

exemple

pcs.php?search=1 or

pcs.php?search=rafael

However, I would like to separate it via parameter, how do I do it?

pcs.php?user=rafael&title=1

thanks.

kthorngren

You need to use search.search=software. Take a look at the sample links in the blog. The test case I posted, using your code, can take two parameters, for example:
https://live.datatables.net/zilesudi/1?order=[[1,%22asc%22]]&search.search=software

Again if you need help please provide a running test case, update mine if you wish, to show the issues you are having.

Kevin

rafasw

Link HTML
https://x.gd/2OMip

LINK DATA TABLE CODE
https://x.gd/U7Oml

rafasw

separate fields stopped searching with above code

Link HTML2

https://x.gd/Hdb3c

LINK DATA TABLE CODE 2
https://x.gd/USFbm

It works but I can't select separate parameters

test2.php?search=Ralf ( how do I do that ? I already tried but it's not working )
test2.php?search=Ralf&pc_nome=1 ( I wanted to search like this )

or better in this case via URL through separate fields

kthorngren

The HTML2 code doesn't initialize the deeplink code.

In the HTML1 page you are getting this error:

Uncaught TypeError: advance.columns is not a function

You are getting that error with this line:

     // Apply the search
 advance.columns().every( function () {

You need to assign the Datatables API to advance like this:

    var advance = $('#advanced-table').DataTable(
        $.extend( advance, searchOptions )
    );

As I said before you need to use search.search like this:

test2.php?search.search=Ralf

I'm not sure what pc_nome=1 is but I assume its something outside of Datatables. I suspect this should work:

test2.php?search.search=Ralf&pc_nome=1

Kevin

rafasw

Even changing what you asked me for in HTML 1 still gives an error, it doesn't filter anything,

$('#advanced-table').DataTable(
        $.extend( advance, searchOptions )
    );

I changed the code above as you asked me

var advance = $('#advanced-table').DataTable(
    $.extend( advance, searchOptions )
);

However, in HTML2 it works but I can't pass two parameters in the url,

https://x.gd/jnr06

Take the test and see if you are marking Ralf?

Another question, you will see that Ralf is highlighted in purple because it is in the URL, but how do I make Ralf come written inside the field too? thanks

I want to mark the PC name parameter as well, but I can't figure out how to do this?

Thank you very much for your help, for now

kthorngren

You are now getting this error in HTML1:

Uncaught TypeError: u.util.set is not a function
at u.ext.deepLink (dataTables.deepLink.min.js:2:903)

You are using a very old version of Datatables, 1.10.12, from 2016. I updated my test case with this version and see the same error:
https://live.datatables.net/zilesudi/2?search.search=ashton

Look at the browser's console.

The current version is 1.13.8. The version you are running is 8 years old. Upgrading to a more current version, recommended is the latest, should resolve the issue. Use the Download Builder to get the latest version of Datatables and the extensions you are using.

Kevin

rafasw

HTML1 OK
https://x.gd/2OMip
perfect one of the problems solved then,

Now how do I pass another parameter in the search?

search.search=Ralf&pc_name=Ion

(https://datatables.net/forums/uploads/editor/ky/x79hala31rpx.png "")

allan

There is only one search parameter. What do you want pc_name to do?

Allan

kthorngren

If you want to perform a column search then you will need to use the searchCols option. You will need to add it to the searchOptions:

    var searchOptions = $.fn.dataTable.ext.deepLink( [
        'search.search', 'order', 'displayStart', 'searchCols'
    ] );

This will search the table for director and the Office column for london:

https://live.datatables.net/zilesudi/3?search.search=director&searchCols=[null,null,{%22search%22:%22london%22},null,null,null]

Or you could rely on the default Smart mode searching to find both data points by separating the search.search values with a space:

https://live.datatables.net/zilesudi/3?search.search=director%20london

See the search() API docs for details about how Smart mode searching works and the other modes.

Kevin

kthorngren

The other option is to not use the deeplink plugin and parse the parameters, as you are doing. You can take parameters like pc_name and place them in the proper column of searchCols array. Or you can use column().search() in initComplete.

EDIT: If your final solution uses ajax then you can send the parsed parameters via ajax.data to the server to filter the data set.

Kevin

rafasw

perfect, thank you very much so far, there is just one thing missing that I would like to put the URL parameters into separate search fields

you can see that the fields are blank even though the parameters are filtered

https://x.gd/sfR4U

User - > in the blank field
Name of Pc - > in the blank field

kthorngren

Those fields are not created by Datatables but by custom Javascript code. Datatables knows nothing about them. You will need to use Javascript/jQuery to populate the fields based on the column search values. You can use column().search() as a getter to get the value then populate the appropriate field.

Kevin

rafasw

right, but how would I put the result from the URL in the field? Even reading column().search() I still have no idea how to do it , adapt based on my code

$(document).ready(function() {
 
    var advance = {
        dom: 'Blfrtip',
 
        mark: true,
          buttons: {
              name: 'primary',
              buttons: [ 'copyHtml5', 'csv', 'excel', 'pdfHtml5', 'print' ]
          },
    };
  
   
    var searchOptions = $.fn.dataTable.ext.deepLink( [
        'search.search', 'order', 'displayStart', 'searchCols'
    ] );
  
    var advance = $('#advanced-table').DataTable(
        $.extend( advance, searchOptions )
    );
  
 
// Setup - add a text input to each footer cell
    $('#advanced-table tfoot th').each( function () {
         
   
         
    } );
      // Apply the search
 advance.columns().every( function () {
     
        var title = $(this.footer()).text();
    $(this.footer()).html( '<div class="md-input-wrapper"><input type="text" class="md-form-control" placeholder=" '+title+'" /></div>' );
      
        var that = this;
        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that.search( this.value ).draw();
            }
        } );
    } );
 
     
 
    } );

kthorngren

Move the Apply the search search code into initComplete. In the loop get the column search term to populate the input value. Updated example:
https://live.datatables.net/zilesudi/4?search.search=director&searchCols=[null,null,{%22search%22:%22london%22},null,null,null]

Kevin

rafasw

Thank you very much my dear so far it worked perfectly,

https://x.gd/MKquj ( worked perfectly )

One more question, is there any way to adapt when you type in the field, it already adds it to the automatic url? deleted in the field does it delete in the url?

kthorngren

Updating the browser URL is not something built into Datatables. Stack Overflow and other Javascript forums are a better place to look for generic Javascript questions. Something like this SO thread might help.

You would perform the update in the keyup change event. I believe the browser will reload with these techniques.

Kevin

rafasw

perfect, thank you very much for all your help