table.draw() not working on Javascript

luloxyn

Hello!
After i create a new row on my database i run this code:
var table = $('#example').DataTable();
table.draw();
But it does nothing, the new row only appears if i refresh the entire page.

PS: I'm using this way: https://www.datatables.net/examples/data_sources/js_array.html
Thanks.

kthorngren

Are you using a Datatables API, like row.add() to add the new row?

If not then Datatables doesn't know about the new row. You would need to use one of the invalidate methods, like row().invalidate() or rows().invalidate(), to have Datatables refresh its data cache.

Kevin

luloxyn

Thanks for your answer @kthorngren

1- No I'm not using row.add() -- I'm creating the things directly on the database.
Also tried this:

/////// button click function:
  var table = $('#example').DataTable();
  var d = this.data();
  d.counter++;
  this.invalidate();
  table.draw();

Thanks!

kthorngren

I'm not sure what this is in your click event but if its a tr then try:

table.row( $(this) ).invalidate().draw();

In your above code this is not a Datatables API.

Kevin

luloxyn

Thanks for your answer @kthorngren

What do you mean with tr? I just copied it from somewhere (examples page).
How should I invalidate data + draw on click button?
Can you give me an example?

Edit: Tried your code and still not working:
///// BUTTON CLICK:
var table = $('#example').DataTable();
table.row( $(this) ).invalidate().draw();

kthorngren

What do you mean with tr?

Sorry, I see that your event is a button click. Was thinking it might have been a table row click.

The best option is to use row.add() if the data you are adding is in the correct array format for the table. Then you could use table.row.add( dataArray ).draw();.

Or if you want to continue with the way you are adding then maybe you need to use table.rows().invalidate().draw(); to invalidate all rows.

Without seeing how you are adding the new row its hard to say the best way to update the Datatable.

Kevin

luloxyn

Thanks for your answer @kthorngren
Unfortunately, the platform where I'm building this doesn't permit to create "things" to the database using js, they have their own way to create database things which are using a panel.

I added to the panel button that adds a new record to the database (after) this code:
var table = $('#example').DataTable();
table.rows().invalidate().draw();

Which should refresh the table but does nothing. I'm just stuck here.
Thanks!

kthorngren

Which should refresh the table but does nothing. I'm just stuck here.

Can you post the code that is adding data to the table?

Better yet can you post a link to your page or an running example that shows the issue?

Without more information its hard to help.

Are you using the ajax option to initially load the data? If so then maybe ajax.reload() would work.

Kevin

luloxyn

Thanks for your answer @kthorngren and sorry for the late reply.

I created this example to show you what I have. I'm using a very very similar scenario:
http://jsfiddle.net/nhgu4z7s/

Regards.

kthorngren

The variable dataSet is independent of the table even though you used it to add the initial data with data. You need to use row.add() or rows.add(), depending on whether you have a single array (1 row) or an array of arrays (1 or more rows) . In your example you have an array of arrays with one row.

I changed your example to use rows.add():
http://jsfiddle.net/c8vkzhau/

Kevin

luloxyn

Thank you again @kthorngren for your answer but I'm scared that is not what I'm looking for.

Because on that example I put there only one row inside the dataSet = [ ], but the data is added dynamically to my database server, so I need only to force the table to update itself and read again the dataSet var.

Maybe I don't need to use .draw and something like hard refresh or force reset.

Your example works yes, but only adding again the line that's is static.
We have to do it using my example.

kthorngren

Maybe you should describe the problem you are trying to solve. As I understand it you are adding data to a database and you want to also add that data to the Datatable. Is this correct?

Maybe we can just start with you posting your code here. Need to see your Datatables init code and how you are retrieving the updated data from the database.

Kevin

luloxyn

Thanks, @kthorngren but the tables are created like when you add a new row in a google spreadsheet, is manual creation. After that, I want to refresh the dataTable to get the new values.

I edited again this link:
http://jsfiddle.net/3pgmzbke/

This link is 95% similar to what I'm doing. Need a way to refresh the table when I trigger the action by pressing a button.

Thanks.

kthorngren

How are you fetching the data from the table the first time?

When you fetch the table are you creating something like the Javascript variable then using data to assign initially to the Datatable?

Without seeing specifically what you are doing in production its hard to give a good answer.

When you want to refresh the table you will need to fetch either all or just the new data from the database then provide it to Datatables. There are many options to provide the new data to Datatables depending on how you fetch the data.

Kevin

luloxyn

Hello, @kthorngren took me a while to create this example:

http://jsfiddle.net/hkcymxuv/

This is how I'm loading data from the database to the dataTable.

That's all that I have
Thanks.

kthorngren

Using rows().invalidate() is not going to help. It is only useful if you are updating the table directly in HTML. Your refresh function will need to fetch the data from the table. Below is one way to add refresh the Datatable data.

function refreshTab() {
  // fetch data from database
  // process the data to create dataSet array as depicted in your examples
  
  var table = $('#example').DataTable();

  // clear the Datatatable if all the data is fetched
  // don't clear the table if only the new data is fetched
  table.clear();

  // add rows to the table
  table.rows.add( dataSet ).draw();

  console.log("resfresh completed");
}

Sorry, I'm just taking guesses since I still don't know how you are fetching the new data and whether its the full table or just the new records.

Kevin

luloxyn

Thanks @kthorngren

I figured how to use that and my script and managed to make it works.

Now i'm trying to add a scroll bar to my table but no luck atm:

<table id="example" class="display nowrap"</table>

$(document).ready(function() {
        $('#example').DataTable( {
                stateSave: true,
                "scrollX": true,
                "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
               ............................

scrollX and lengthMenu using quote?

kthorngren

Glad you got it working.

This example works:
https://datatables.net/examples/basic_init/scroll_x.html

And it appears to work in your fiddle:
http://jsfiddle.net/14ecgrjp/

scrollX and lengthMenu using quote?

Doesn't matter if the left side of the option has quotes or not.

Kevin

luloxyn

Thanks @kthorngren
Is working now but it's happening something weird.

Page 1: 10 rows
Page 2: 10 rows
Page 3: 2 rows

The rows of the page 3, are changing size to "fit" in the same space of 10 rows, i'd like to force them to stay all the rows with the same size no matters if there's blank space:

https://puu.sh/B8N2t/3971040662.gif

Is this possible?

luloxyn

Sorry about double post, another question comes to my head when adding a new row. Is there any possibility to highlight it like 2-3 seconds?