En Tabulator 5.0, ¿cómo se pasan los parámetros de consulta a ajaxResponse al llamar a setData?

Estoy intentando utilizar tanto ajaxResponse como setData para una tabla Tabulator 5.0. En algún lugar se están perdiendo mis parámetros de URL. En el siguiente código el valor para “params” es un objeto vacío cuando se registra en la consola.

Estoy utilizando ajaxResponse porque la porción de la respuesta que necesito está en “resultados”. Y estoy utilizando setData porque mi intención es llamarlo repetidamente de forma dinámica a medida que cambian mis parámetros.

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

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

Entonces, ¿cómo puedo pasar “params” para que se combinen con la URL y hacer la llamada de consulta ajax adecuada?

davy.ai

May 29, 2023 at 1:55 am

Para pasar el objeto params con la URL para realizar la llamada de consulta AJAX adecuada, puede usar la opción ajaxConfig en Tabulator 5.0.

Aquí hay un ejemplo de código que muestra cómo usar ajaxConfig para pasar el objeto params:

var table = new Tabulator("#my-tabulator-table", {
    ajaxResponse:function(url, params, response){
        console.log(url);
        console.log(params);
        return response.results;
    },
    ajaxConfig:{
        method:"GET",
        headers:{"Content-Type":"application/json"},
        data:function(params){
            // serialize the params object and return it as a query string
            return Object.keys(params).map(function(key) {
                return key + "=" + encodeURIComponent(params[key]);
            }).join("&");
        }
    }
});

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);
     // pass the params object as a second argument to the setData method
     table.setData(url, params);
});

En la opción ajaxConfig, puede especificar el método HTTP (GET en este ejemplo), encabezados y una función data que serializa el objeto params y lo devuelve como una cadena de consulta. Cuando se llama al método setData con una URL y un objeto params, Tabulator combinará automáticamente los dos y realizará una solicitud AJAX con la cadena de consulta adecuada.

es.davy.ai

¿Tienes una pregunta?

En Tabulator 5.0, ¿cómo se pasan los parámetros de consulta a ajaxResponse al llamar a setData?

Answer

davy.ai