I am looking to source my table data from an ajax call, but need some help.

inkt

Link to test case: I cannot provide a link to my case, as it is behind a vpn and page auth.
Debugger code (debug.datatables.net): Nothing to debug
Error messages shown: Nothing to debug
Description of problem:

This is a very complex page. There are four tabs, each with it's own datababeles instance. The one tab is a combination of three ofther tables, but I have that part covered.
The part that has me stumped is how I am to load the data into the table. I am looking to do it via ajax, but there are several data attributes, for sorting/order and searching and one on the tr. How do specify data attr info in an ajax call? I am doing a table refresh if a tab is clicked or a notification of a change is fired. Should I destroy the table and reinit it, or clear it and load data again? If the later, how is that done via ajax?

kthorngren

I am looking to do it via ajax, but there are several data attributes, for sorting/order and searching and one on the tr.

If the HTML 5 data attributes aren't seen when the Datatable initializes it won't use them. In this case you would use columns.render for orthogonal data as described here.

How do specify data attr info in an ajax call?

Not sure I understand the question. You can use ajax.data to send parameters to the server if that is what you are asking.

I am doing a table refresh if a tab is clicked or a notification of a change is fired. Should I destroy the table and reinit it, or clear it and load data again? If the later, how is that done via ajax?

Use clear() to clear the table and ajax.reload() to reload the data.

Kevin

inkt

Thanks for your help Kevin.

As for the second question. How do I specify the data in the data returned?

eg: this data-whatever belongs to the tr, and this data-whatever2 belongs to this column, and this data-whatever3 belongs to this column

kthorngren

Use columns.data. Read the Data Manual for more information. Checkout the examples page.

Kevin

inkt

I dont see anything about applying a data attribute to the tr.

kthorngren

Sorry, thought you were asking about the row data. To apply data attributes use createdRow or columns.createdCell.

Kevin

inkt

I am so lost here. I can't for the life of me figure out how to assign returned data to a specific col. Nor can I figure out how integrate the createdRow into my ajax. the column.data link you gave me gives a 404. I am way to frustrated with something that should be simple.

kthorngren

Fixed the columns.data link.

Let start with what is the data structure you are returning using Ajax? Maybe post an example then we'll go from there.

Kevin

inkt

A json object of arrays. The arrays represent rows. In each row there are 19 cols. Each col is an object. The content (what is displayed), the searchable content, and how it gets sorted/ordered.

The returned data looks like this...
{
[
whatever: {search: "abc", sort: 2, content: "<span>abc</span>"},
date: {search: "abc", sort: 3, content: "<span>abc</span>"},
...
],
[
whatever: {search: "abc", sort: 2, content: "<span>abc</span>"},
date: {search: "abc", sort: 3, content: "<span>abc</span>"},
...
]
}

inkt

I also made a code pen for it

https://codepen.io/mrp4p/pen/qBaXyXr

kthorngren

The data structure you posted isn't a vlid JSON structure. You need something more like this:

[
    {
      whatever: {search: "content2", sort: 1, content: "my content 2"}, 
      date: {search: "date2", sort: 1, content: "my date 2"}
    }, 
    {
      whatever: {search: "content1", sort: 2, content: "my content 1"}, 
      date: {search: "date1", sort: 2, content: "my date 1"}
    }
  ]

Its an array of objects. I moved your example here so I could save it:
http://live.datatables.net/qifudove/1/edit

I used columns.render for the orthogonal data inside the columnDefs option. This way I can use columnDefs.targets of _all for all columns or you can specific certain columns.

It uses columns.data to define the columns.

I also updated the data to make it a bit more interesting and changed the second column to allow for sorting. You can see the sorting is based on the sort object, the number is opposite the data just for demonstration. You can search for date1 or date2 but not for my date.

HTH,
Kevin

kthorngren

Also you can use columns.orderable and columns.searchable to replace the HTML 5 data attributes if you wish.

Kevin

inkt

I am under the impression I send to the url, what's in the 'data' option, but in your example you are getting the table data with it.

kthorngren

I am under the impression I send to the url, what's in the 'data' option,

Not sure what you mean by 'data' option and what you are wanting to send. If you have parameters to send to the server you will use the ajax.data option. Otherwise just configure the URL as shown in the ajax option to fetch the data.

Here is a basic Ajax example. Click on the ajax tab and you will see the response.

I simulated this by using the data option to use Javascript sourced data. You will replace the data option with the ajax option.

Kevin

inkt

In the paste bin you created you have data: data as an option. in my ajax I have data being sent to the server in a data option.
"ajax": { "url": "/manager/hub/hub.php", "type": "POST", "data": { "function": "get_conversations_for_tab", "conversation_type": JSON.stringify($(this).attr("data-type").split(",")) }

inkt

So can you specify multiple data options, 1 in columns and 1 in ajax?

inkt

I dont think we are on the same page here at all. One row of my returned has a 19 element array, each array element represents a col, each col has an object. So it looks like...
row: [{content: whaterever, sort: 2, search:whatever}, {content: whaterever, sort: 2, search:whatever}, {content: whaterever, sort: 2, search:whatever}, {content: whaterever, sort: 2, search:whatever}, {content: whaterever, sort: 2, search:whatever}, ...14 more times]

kthorngren

They are separate options. So yes you can specific ajax.data options to send to the server and use columns.data to specify the column definition. It would look something like this:

"ajax": {
  "url": "/manager/hub/hub.php",
  "type": "POST",
  "data": {
    "function": "get_conversations_for_tab",
                      "conversation_type": JSON.stringify($(this).attr("data-type").split(","))
    },
columns: [ 
  {data: 'whatever'}, 
  {data: 'date'}, 
...
]

Kevin

inkt

So in the column.data option how do I specify the three object items?
"ajax": {
"url": "/manager/hub/hub.php",
"type": "POST",
"data": {
"function": "get_conversations_for_tab",
"conversation_type": JSON.stringify($(this).attr("data-type").split(","))
},
columns: [ {
"sort": 1,
"search": "whatever",
"content": "whatever"
}
]

kthorngren

Just like I did in my example - assuming your structure is the same as the example:
http://live.datatables.net/qifudove/1/edit

If your structure is different then please post it. Keep mind it has to be a valid JSON structure and be an array of objects as described in the Data Manual.

Kevin

inkt

Thanks for your help, I'm just going with a simpler solution. Datatables is just far too confusing.

kthorngren

Not sure if you will be back but I didn't see your comment with this data structure:

row: [{content: whaterever, sort: 2, search:whatever}, {content: whaterever, sort: 2, search:whatever}, {content: whaterever, sort: 2, search:whatever}, {content: whaterever, sort: 2, search:whatever}, {content: whaterever, sort: 2, search:whatever}, ...14 more times]

This is a different structure than you first posted. You won't need to define columns.data but will use the columns.render I show in the example. If you still want help please post back. Once you get the basics of how it works then you will be happy you stuck with it.

Kevin

inkt

I do like alot of the options that datatables offers, and my boss really likes it too, but its very hard to work with. I dont understand what you did in the example you provided. I dont know how to build the cols or rows. It's a huge frustration to work with.

inkt

I updated the paste bin with what I have in the way of js, and attached is an image of what my return data looks like
plus two more arrays...
I dont know what to do next

kthorngren

I updated the paste bin with what I have in the way of js, and attached is an image of what my return data looks like

Please provide a link to the updated example. However this looks like the original data source.

I dont understand what you did in the example you provided. I dont know how to build the cols or rows.

Datatables builds the columns and rows for you. You just supply the data. I added some comments into my example here:
http://live.datatables.net/qifudove/3/edit

Let start with this example and not worry about ajax yet. What are your questions?

Kevin