11759

jQuery Datatable - changing data url

Question:

Currently using the jQuery Datatables plugin.

I now need to be able to change the ajax data source based on some form input values, which would be submitted on a button click?

What is the recommended method for achieving this?

$(document).ready(function () { $('#btnReport') .click(function () { var table = $('#reports').DataTable(); table.ajax.reload(); }); var querystring = '?from=' + $('#datetimepickerFrom').val() + '&till=' $('#datetimepickerFrom').val(); var url = '/api/reports/custom'; var table = $("#reports").DataTable({ ajax: { url: url + queryString, dataSrc : "" }, columns: [ { data: "fullName" }, { data: "timeIn" } ] }); });

Many thanks

Answer1:

Use <a href="https://datatables.net/reference/api/ajax.url()" rel="nofollow">ajax.url()</a> and <a href="https://datatables.net/reference/api/ajax.url().load()" rel="nofollow">ajax.url().load()</a> to set URL for the table and load data from that URL.

For example:

function getDataTableUrl(){ return '?from=' + $('#datetimepickerFrom').val() + '&till=' + $('#datetimepickerFrom').val(); } $('#btnReport') .click(function () { var table = $('#reports').DataTable(); table.ajax.url(getDataTableUrl()).load(); });

Recommend

  • .NET Multiple Class Library in One Library
  • JFreeChart BarChart - Category Markers
  • Should a C# struct have only read-only properties
  • mail server requires authentication when attempting to send to a non-local e-mail address when using
  • BizTalk Party not being resolved for incoming HL7v2 message
  • Whats the best way of persisting data to Isolated Storage on Windows Phone 7?
  • HTML checkbox form and HTTP URL
  • What version of Java should I use with Cassandra 2.0?
  • The symbol you provided is not a function
  • Does the Azure table storage API cache results?
  • Is it better to use the “hidden” CSS attribute or fetch each set of new images?
  • what is the purpose of “export as namespace foo”?
  • Can't locate Module/Build.pm in @INC (@INC contains: /usr/local/lib64/perl5
  • perl, mysql - fasting way to upload a csv file into mysql?
  • Elasticsearch script query involving root and nested values
  • Do I need to seed any random number generator before using EVP_PKEY_keygen of OpenSSL?
  • Not able to aggregate on nested fields in elasticsearch
  • why xml file does not aligned properly after append the string in beginning and end of the file usin
  • onBackPressed() not being executed
  • chrome.tabs.executeScript only fires when the Developer Console is open
  • How to attach a node.js readable stream to a Sendgrid email?
  • JSON response opens as a file, but I can't access it with JavaScript
  • PostgreSQL Query without WHERE only ORDER BY and LIMIT doesn't use index
  • Android fill_parent issue
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • JSON with duplicate key names losing information when parsed
  • Trying to switch camera back to front but getting exception
  • jquery mobile loadPage not working
  • Properly structure and highlight a GtkPopoverMenu using PyGObject
  • Data Validation Drop Down Box Arrow Disappearing
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • Free memory of cv::Mat loaded using FileStorage API
  • How do you join a server to an Active Directory (domain)?
  • Angular 2 constructor injection vs direct access
  • Programmatically clearing map cache
  • Binding checkboxes to object values in AngularJs
  • How to Embed XSL into XML
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?