javascriptjqueryajaxjsondynatable

Search within Dynatable Column using AJAX JSON


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...


Solution

  • 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