Dynamic columns titles

vargas

Hi
I created a datatable component in vuejs and I try to create the columns data and title from the server response that is like that :

columns: [{data: "name", title: "Part ID"}, {data: "manufacturer", title: "Manufacturer"},…]
data: [{"": "", rowId: 85860, name: "<a href="http://demo.genesis.com/ndt/flowline/85860">J-1</a>",…},…]
draw: "1"
recordsFiltered: 3
recordsTotal: 3

in the table settings I have this :

var self =  this  

"processing": true,
"serverSide": true,
"ajax": {
   "type" : "GET",
    "url" : this.source,
      "dataSrc": function ( json ) {
        self.columns =  json.columns;
                return json.data;
          }
},
rowId: 'rowId',
"columns" : self.columns,
initComplete: function(settings, json) {
 console.log(_this.columns); // columns data is there!!
}),

but the columns is always empty. What I can do to get the dynamic column data and title.

Thank You for your help.

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

kthorngren

Datatables needs to initialize the columns during initialization. There is not a way to fetch the column definitions during the Datatables Ajax request. You will need to use a jQuery Ajax request then in the success function initialize Datatables with the column definitions in the response. Something along the lines of this example:
http://live.datatables.net/qimukefe/1/edit

Note: Due to the backend the ajax request, in the example, is the same as the server side ajax. You will want a specific URL that will return only the column definitions.

Kevin

vargas

Thanks kthorngren for your quick response. What I am trying to do is a individual column searching : https://datatables.net/examples/api/multi_filter.html. server side If I am no wrong I have to set the column data to send the column name and the value when a search is made.

There is other way to do the individual column search without setting the column data?

Thank You.

colin

As Kevin said, the table won't initialise unless you set the column data, let alone search on it. Kevin's example above can be merged with the link you point to, and that would initialise the table with the input elements in the footer.

Colin

kthorngren

I see, you want to get the select options data with server side processing. You can use the same technique as my example and fetch the options from the server with an external jQuery Ajax request then modify the code in the example to use the fetched options to build the select lists.

Another option is to have your server script look at the draw parameter. If it is 1 then it can return the options as part fo the JSON response which can be accessed inside initComplete to build the options. When Datatables initializes the draw parameter will be 1.

Kevin

vargas

Thanks for all your answers. I'll try to load the columns in Ajax first them create the table.

I am not an expert on DataTables but for me it seems a nice feature for tables server side to be enable to pass the columns on the data json.