Pass url parameter and action on datatable loaded.

Pass url parameter and action on datatable loaded.

classic12classic12 Posts: 228Questions: 60Answers: 4

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

Answers

  • classic12classic12 Posts: 228Questions: 60Answers: 4

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

        tableDataChanged.on( 'draw', function () {
        alert( 'Redraw occurred ' );
        } );
    
  • classic12classic12 Posts: 228Questions: 60Answers: 4

    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

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    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}
            }, 
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    Hi Allan

    http://surplusanywhere.com/surplusAnywhere7

    $(document).ready(function(){
    $('#dtDataChanged')
        .on('xhr.dt', function ( e, settings, json, xhr ) {
            alert('loaded');
        } );
        });
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • classic12classic12 Posts: 228Questions: 60Answers: 4

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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.

This discussion has been closed.