Comma decimal option not working when data comes from JSON

newfulluser

I love DataTables but this feature doesn't seem to work. I get my data from JSON and because I display it on the table as
<td id="example"></td>
the comma decimal option can't read that and it does nothing.

The same thing happens whith the responsive child row option, any data from JSON dissapears and only the headers are displayed.

You can take a look at the code here: http://jsfiddle.net/newfulluser/ucxy1kvf

If anyone knows how to fix this issue please let me know, thanks!

allan

You are writing the data into the DataTable using $().html() rather than the DataTables' API methods (specifically cell().data() or row().data() - in fact, in this case I would suggest you use row.add() to add new rows rather than updating existing ones).

You can use $().hml() but you would then need to call row().invalidate() to tell DataTables that the data has been changed - otherwise it doesn't know!

See also this FAQ which discusses this topic.

Allan

newfulluser

Sorry for the late reply, I tried calling row().invalidate() adding this to the end of the js file but it didn't work (probably I did something wrong):

table.rows().invalidate().draw();

I have read the cell.data and row.data pages but I can't figure out how to use them, It's my first time using javascript and without an example on how to use it, I'm lost.

I really want to use the right API for DataTables, if you could write an example of just how this line would be with the DataTables API, I will hopefuly be able to fix the rest of the code. Thanks!

$("#pure_usdprice").html("$" + data[i].price_usd);

kthorngren

I worked up a partial example for you:
http://jsfiddle.net/gdy3953o/1/

It uses ajax and ajax.dataSrc to load the data. It uses columns.data and columns.render to build the columns. Moved the ColReorder, Responsive and FixedHeader extensions into the Datatables init code. Since the ajax request is async the constructors fail as Datatables is not initialized by the time the constructors are executed.

I put together the first three columns. I don't want to take all the fun from you so I'll leave it to you to work out the rest of the columns.

Kevin

newfulluser

Thanks kthorngren! The table is responsive and does not lose the data anymore. Now that I see how it's done, I was able to successfully use $.fn.dataTable.render.number to add commas at the thousands which was the other issue I had.

http://jsfiddle.net/newfulluser/z2e55Lbm/2/

The only thing I miss from when I used $().html() is the ability to display only the rows I need, because the whole file contains more than 1500 rows.

kthorngren

The only thing I miss from when I used $().html() is the ability to display only the rows I need, because the whole file contains more than 1500 rows.

You could use search or searchCols to define the initial search and display of the table. But all of the data is still in Datatables and can be unfiltered.

Or you can use the row.add() in the $.get() function you had. I updated your example to show row.add():
http://jsfiddle.net/s1tdt7Lt/1/

First it initializes an empty Datatable then fetches and adds the appropriate row data. Once the data is added it redraws the table with draw().

Kevin

newfulluser

Thanks!!! This is exactly what I needed. Really appreciate your help