How can you send query parameters to ajaxResponse in Tabulator 5.0 while using setData?

Question

How can you send query parameters to ajaxResponse in Tabulator 5.0 while using setData?

I'm currently facing an issue with utilizing both ajaxResponse and setData for a Tabulator 5.0 table. It seems that my URL parameters are disappearing somewhere in the process. When I log the value of params to the console in the code below, it appears as an empty object.

The reason I am using ajaxResponse is because the specific portion of the response I need is nested under "results". Additionally, I am leveraging setData as I intend to dynamically call it multiple times while changing the parameters.

var table = new Tabulator("#my-tabulator-table", {
     ajaxResponse: function(url, params, response){
          console.log(url);
          console.log(params);
          return response.results;
     },
});

var columns = [
    {title: "id", field: "id", headerFilter: false, visible: true, download: true},
    {title: "field1", field: "field1", headerFilter: true, visible: true, download: true},
    {title: "field2", field: "field2", headerFilter: true, visible: true, download: true},
    {title: "field3", field: "field3", headerFilter: true, visible: true, download: true},
];
var url = "/api/v1/myendpoint";
var params = {"param_name": "abc"};

table.on("tableBuilt", function(){
     table.setColumns(columns);
     table.setData(url, params);
});

My main challenge lies in figuring out how to correctly pass the "params" so that they are included in the URL for the ajax query call. Any suggestions on solving this?

javascript ajax tabulator

Answer 1

Answer №1

When you want to load the initial data in the table, there is no need to manually call certain functions. Instead, you can utilize the ajaxURL and ajaxParams options in the table constructor to automatically trigger the initial ajax request when the table loads.

var table = new Tabulator("#example-table", {
    ajaxURL:"/api/v1/myendpoint, //ajax URL
    ajaxParams: {"param_name": "abc"},
});

To define your columns, you can also use the columns option like this:

var table = new Tabulator("#example-table", {
    columns:[
        {title:"Name", field:"name", sorter:"string", width:200, editor:true},
        {title:"Age", field:"age", sorter:"number", hozAlign:"right", formatter:"progress"},
    ],
});

If you plan to call the setData function later on, follow the correct example. There was an issue with parameters in the initial 5.0 release, but it has been fixed in a subsequent patch release.

Answer 2

When you want to load the initial data in the table, there is no need to manually call certain functions. Instead, you can utilize the ajaxURL and ajaxParams options in the table constructor to automatically trigger the initial ajax request when the table loads.

var table = new Tabulator("#example-table", {
    ajaxURL:"/api/v1/myendpoint, //ajax URL
    ajaxParams: {"param_name": "abc"},
});

To define your columns, you can also use the columns option like this:

var table = new Tabulator("#example-table", {
    columns:[
        {title:"Name", field:"name", sorter:"string", width:200, editor:true},
        {title:"Age", field:"age", sorter:"number", hozAlign:"right", formatter:"progress"},
    ],
});

If you plan to call the setData function later on, follow the correct example. There was an issue with parameters in the initial 5.0 release, but it has been fixed in a subsequent patch release.

How can you send query parameters to ajaxResponse in Tabulator 5.0 while using setData?

Answer №1

Similar questions

Karma is unable to locate the module within the specified relative path

Transform the dataUrl into a blob and send it via ajax request

Tips and tricks for displaying JSON data in Angular 2.4.10

Utilizing jQuery to load content into the parent of an iframe

Retrieve custom attributes of child elements using jQuery selectors

Is it possible to use AJAX in JavaScript to dynamically update page titles?

Is there a compelling case for implementing Meteor in 2017?

How can I delete an individual HTML element that does not have a class or ID?

Prevent the ability to drag and drop within specific div elements

Manipulate the contents of an HTML class using Javascript to substitute text with an empty string

Sort an array by mapping it in decreasing order based on the total sum of its elements

Leveraging numerous identifiers in jQuery

Convert web address object to URL string

Upload files via Ajax request is required

Node.js backpressure with RXJS and PostgreSQL

Prevent tooltips from disappearing when hovering over them

Using .htaccess file to optimize SEO crawling for single page applications that do not use hashbangs

Issue: ENOENT - The requested file or directory cannot be found in the context of an Angular2 and Express.js

Creating a two-dimensional canvas within a div element using the console

Executing an Ajax call to a PHP form within an Express/node.JS application