Pass url parameter and action on datatable loaded.

classic12

Hi Guys I have the following

// get the deal number
var url_string = window.location.href;
var url = new URL(url_string);
var urlDeal  = url.searchParams.get("deal");
console.log('dealID = ' + urlDeal);

// on loaded event Add the urlDeal if required
$('#dtDataChanged')
    .on('xhr.dt', function ( e, settings, json, xhr ) {
        alert('loaded');
// pass in urlDeal to the search box id and do the search 
if (urlDeal !== 'null') { $('#searchDeal').val(urlDeal);}
    } )

I have created the search buttons using

     $('#dtDataChanged thead th').each( function (e) {
// don't add search box to column 1    
        console.log(e);
        if(e!==1){
        if(e==0){ var title = $(this).text();
        $(this).html( '<input type="text" class = "form-control" id = "searchDeal" placeholder="Search '+title+'" />' ); }
        else{
        var title = $(this).text();
        $(this).html( '<input type="text" class = "form-control" placeholder="Search '+title+'" />' );}
      }
    } );
  
    
     tableDataChanged.columns().every( function () {
        var that = this;
        //console.log(that);
        
        $( 'input', this.header() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
              console.log(this.value);
            }
        } );
        
    } );

1. I don't see the alert on '.on('xhr.dt', function'
2. The inputs are listing for keyup change. What do I add to force if (urlDeal !== 'null') { $('#searchDeal').val(urlDeal);} to perform the search. I need the client to see the urlDeal in the search box so he knows to delete it to clear the search.

Cheers

Steve Warby

classic12

I tried this event but this is not on the initial draw only redraws.

    tableDataChanged.on( 'draw', function () {
    alert( 'Redraw occurred ' );
    } );

classic12

I tried this

$('#dtDataChanged').dataTable( {"initComplete": function(settings, json) {
    alert( 'DataTables has finished its initialisation.' );
   //  if (urlDeal !== 'null') { alert('does exist urlDeal = '+ urlDeal) ; $('#searchDeal').val(urlDeal);}
  }
} );

but gives error

TypeError: url.lastIndexOf is not a function. (In 'url.lastIndexOf('/')', 'url.lastIndexOf' is undefined).
line 3923 column 49

classic12

This call happens but seems to be before the re-draw so I dont get the text in the box/

        fnDrawCallback: function() {
        //alert( 'ajax done in options' );
        if (urlDeal !== null) { alert('urlDeal = '+ urlDeal) ; $('#searchDeal').val(urlDeal); urlDeal = null}
        }, 

allan

TypeError: url.lastIndexOf is not a function. (In 'url.lastIndexOf('/')', 'url.lastIndexOf' is undefined).

Sounds like urlDeal is probably undefined at that point.

I tried this event but this is not on the initial draw only redraws.

You need to add it before you initialise the DataTable.

$('#myTable')
  .on( 'draw.dt', function ... )
  .DataTable( {
     ...
  } );

However, xhr should be working. If it isn't please link to a test case showing the issue.

Allan

classic12

Hi Allan

where do I place the code.
on the initialisation or on document ready ?

$('#dtDataChanged')
    .on('xhr.dt', function ( e, settings, json, xhr ) {
        alert('loaded');
// pass in urlDeal to the search box id and do the search
if (urlDeal !== 'null') { $('#searchDeal').val(urlDeal);}
    } )

Cheers

Steve Warby

allan

Inside the document ready function, before you initialise the DataTable.

Allan

classic12

Hi Allan

http://surplusanywhere.com/surplusAnywhere7

$(document).ready(function(){
$('#dtDataChanged')
    .on('xhr.dt', function ( e, settings, json, xhr ) {
        alert('loaded');
    } );
    });

allan

You aren't using the ajax option of DataTables to load the data. It took me a little while to see it, but you are Ajax loading it yourself:

getQuoteDetails=function(){
  req = Ajax("http://www.surplusanywhere.com/php/getFiles.php", "GET", 'someData',quotesReturned);  
}                

So yes, it is correct that DataTables will not trigger its xhr event.

Allan

classic12

Thanks,

The event I need is when the Ajax call has loaded all the data.
What is the correct code and where do I place it?

Once this happens I check if the url has a deal parameter and perform a search on the dealID column.

allan

Where do you define your Ajax function? I'm presuming that the fourth parameter is a callback function that is passed in the data, so that is where you would have the data and be able to access it. quotesReturned in this case.