'How to pass column paramter in datatables through URL?

This question is similar to How to pass column paramter to datatables search through URL However I do not have the drop-down columns in this example.

I have successfully setup datatables with a search parameter to my datatbles table via URL. For example I can prefilter the search term on datatables by using the following URL. abc.html?search=test

However I am not sure how to pass the column parameter so that datatable is prefiltered by search term and column. Something like abc.com/?search=orange%Type=orange (Note that Type here denotes column name and search denotes search term.

Here is what I have so far: http://live.datatables.net/cajocale/1/edit (updated link)

HTML:

    <html>
      
    
 
    
    <table id="example1" class="row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%;"><thead>
    <tr role="row">
    <th style=" width: 11%;">Date</th>
    <th style=" width: 23%;">Name</th>
    <th style=" width: 23%;">Type</th>
    <th style=" width: 23%;">Topic</th>
    <th style=" width: 20%;">Hidden</th>
    </tr>
    
    </thead><tbody>
    <tr>
    <td>Current</td>
    <td>John Doe</td>
    <td>ABC</td>
    <td>Test</td>
    <td>orange, banana</td>
    </tr>
    
    <tr>
    <td>Current</td>
    <td>Baby</td>
    <td>ABC</td>
    <td>Test</td>
    <td>orange, banana</td>
    </tr>
    
    <tr>
    <td>Current</td>
    <td>Joe</td>
    <td>ABC</td>
    <td>Test</td>
    <td>orange, banana</td>
    </tr>
    
    <tr>
    <td>Current</td>
    <td>John</td>
    <td>ABC</td>
    <td>Test</td>
    <td>orange, banana</td>
    </tr>
    
    
    
    
    </tbody></table>
    </div>
    
    
    </html>

Javascript:

    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;
  }

  $(document).ready(function() {
var topic = decodeURIComponent(getUrlVars()['Topic']);
    var type = decodeURIComponent(getUrlVars()['Type']);
    var date = decodeURIComponent(getUrlVars()['Date']);
var hidden = decodeURIComponent(getUrlVars()['Name']);
// Setup - add a text input to each footer cell
$('#example1 thead tr').clone(true).appendTo( '#example1 thead' );
$('#example1 thead tr:eq(1) th').each( function (i) {

    var title = $(this).text();
    if(title != 'Action'){
    $(this).html( '<input type="text" placeholder="'+title+'" />' );

    $( 'input', this ).on( 'keyup change', function () {
        if ( table.column(i).search() !== this.value ) {
            table
                .column(i)
                .search( this.value )
                .draw();
        }
    } );
} else $(this).text('');
}
);

 var table = $('#example1').DataTable( {
     orderCellsTop: true,
    fixedHeader: false,
    responsive: true,
ordering: true,
  columnDefs: [
            
            {
                "targets": [ 4 ],
                "visible": false
            }
        ],
bsort: true
    } );


  });
htmlcss


Solution 1:[1]

From the official documentation you can preload searches from the URL try adding this to your code:

$.urlParam = function(name){
var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (!results)
{
return 0;
}
return results[1] || 0;
}

$(document).ready( function() {
  $('#example').dataTable( {
    "oSearch": {"sSearch": $.urlParam('search')}
  } );
} )

you can see an example in the following link and the documentation, you can check that it works by changing the URL and seeing how the text is typed in the search field: https://legacy.datatables.net/ref#oSearch

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 DANNGZSHOT

Related Questions