How to use server-side processing in JQuery DataTables without Ajax

user_16434452 0
Viewed 1120

I'm using JQuery DataTables with Vue 2. The below snippet shows how I'm using it with a JSON data source fetched from a custom method using the wretch package (it also handles authorization).

...
mounted: function () {
  this.dataTable = window.$(this.$el).DataTable({
    data: this.getGridData,
    columns: this.getColumns,
    // serverSide: true
  });
},
...

This method is working fine. Now I want to enable the serverSide feature to control pagination and search without using the ajax option.

My backend application is running in .NET Framework. I have created my response data structure as shown here, but it doesn't seem to help.

Simply, I want to use my custom method to fetch data into the DataTable while using the serverSide feature.

Is this possible? I'm looking forward to your help.

vue.js datatables jquery javascript
1 Answers

DataTables has various different forms for its ajax option.

One of these is as follows:

$('#example').dataTable( {
  "serverSide": true,
  "ajax": function (data, callback, settings) {
    // whatever logic you want to use can go here,
    // as long as it evaluates to a valid JSON structure
    // expected by DataTables, as a server-side response.
    callback(
        resultsOfYourLogic  
    );
  }
} );

You can read its description in the linked documentation - but it basically states:

As a function, making the Ajax call is left up to yourself allowing complete control of the Ajax request. Indeed, if desired, a method other than Ajax could be used to obtain the required data...

Therefore, you can use this - with serverSide: true - to use any alternative method you wish to source your data.

Example:

"ajax": function (data, callback, settings) {
  var dataSet = yourCustomFunction(data);
  callback(
    dataSet 
  );
},

Here, the custom function is invoked first, returning the JSON which needs to be displayed. The request data is passed to that custom function. Then the results of that custom function are placed in the callback.

One important note here is: The data parameter in the callback will be pre-populated with the server-side request data (automatically created by DataTables whenever the user sorts/filters/pages). So you will need to handle this request data, to know how your response data needs to be built.

(The response data structure you link to in your question, is the correct structure.)

user_125673650
Related