Search within Dynatable Column using AJAX JSON

Question

I have a dynatable that is populated via an ajax call. All displays well. I understand that in ajax mode, that everything is passed back to the server for processing, and I've got column sorting working. Now I wish to implement column based filtering.

for example, for the table:

   <table id="grid">
      <thead>
        <tr>
          <th>Name</th>
          <th>function</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>

I wish to be able to submit a search for Name = "foo" and only match rows that have a name of "foo" or to search functions for "foo" and only match rows that match in that column.

my JS so far:

jQuery(document).ready(
  function() {
    var url = '/bar/data';
    $('#grid').dynatable({
        dataset: {
            ajax: true,
            ajaxUrl: url,
            ajaxOnLoad: true,
            records: []
        }
    });
  }
);

I'm willing (though I don't know how) to have input boxes under each column heading if necessary. Another idea would be a select element with the column name you wish to search against. I have done this for testing, but now the problem becomes how to get the dynatable.js set the url parameters to something like queries[Name]=foo instead of just queries[search]=foo. I've re-read the docs and looked at the filtering examples, but I'm not seeing how to pull this off. (I'd like to avoid having the user search string be entered like "Name:foo" in the default search input box)

Any ideas or pointers would be greatly appreciated...

Answer 1

after some reverse engeneering i found ajaxData

  $("#my-table").dynatable({
  dataset: {
     ajax: true,
     ajaxUrl: "/getFromServer",
     ajaxOnLoad: true,
     ajaxData:    {
                     caller:    myName,
                     debug:     2,
                     county:        countyName
                  },
     records: []
  }

});

everything in the ajaxData-Block is passed to the server. May be that helps.

Walter

Answer 2

The upvoted answer is fine but I think the nicer and more "dynamic" way to do it would be inside an event trigger.

 window.addEventListener('load', function() {

    var dynaTable = $("#dynatable-table");
    //you can call your function within the "function (e,data)" 
    // or replace it
    dynaTable.bind('dynatable:beforeProcess', function (e, data) {
        console.log("beforeProcess fired",data);
        var dynaTableData = dynaTable.data('dynatable');
        if(!dynaTableData){
            ; //not yet loaded
        }else{
            //add aditional ajax params here
            dynaTableData.settings.dataset["ajaxData"] = { "addedDateTime" : new Date()};
        }
    });

    dynaTable.bind('dynatable:afterProcess', function (e, data) {
        //after adding the additional ajax params you should be able to 
        // see them here
        console.log("afterProcess fired",data);
    });

     dynaTable.dynatable({
        dataset:{
            ajax: true,
            ajaxUrl: appRootUrl + "/projects/getSomeRecords",
            ajaxOnLoad: true,
            records: []
        },
        features:{
            pushState : false
        }
    });

Sometimes you might need to force Dynatable to update, this can be done easily:

  self.forceDynaTableUpdate  = function () {
    var dyna = $('#dynatable-table-sessions').data('dynatable');
    if(!dyna){
        return;
    }
    console.log("dyna setting:",dyna.settings);

    dyna.process(true);
};