DataTables row.add() doesn't work with serverSide option

Question

I'm trying to do something like this https://datatables.net/blog/2012-05-31 However, I'm also using Server Side Processing.

My problem is at the adding new rows section.

Here is my example that doesn't work:

		var t = $("#table").DataTable({
		  "ajax": "https://api.myjson.com/bins/2k6e5",
		  "serverSide": true,
		  "autoWidth": false,
		  "responsive": true,
		  "ordering": true,
		  "searching": true,
		  "paging": true,
		  "columns": [{
		    data: "Id"
		  }, {
		    data: "Name"
		  }, {
		    data: "Actived"
		  }]
		});

		var model = [{
		  "Id": 4,
		  "Name": "Name of the Object",
		  "Actived": true
		}];
		console.log(model);
		t.rows.add(model).draw();

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>
<table id="table" class="table table-striped">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Actived</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Here is my example that does work:

		var t = $("#tableRegistros").DataTable({
		  "ajax": "https://api.myjson.com/bins/2k6e5",
		  //"serverSide": true,
		  "autoWidth": false,
		  "responsive": true,
		  "ordering": true,
		  "searching": true,
		  "paging": true,
		  "columns": [{
		    data: "Id"
		  }, {
		    data: "Name"
		  }, {
		    data: "Actived"
		  }]
		});

		var model = [{
		  "Id": 4,
		  "Name": "Name of the Object",
		  "Actived": true
		}];
		console.log(model);
		t.rows.add(model);

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>
<table id="tableRegistros" class="table table-striped">
  <thead>
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>Actived</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

The only difference is the serverSide option.

Question:

How can I use row.add() with serverside processing?

Drape

The new row data is coming from server side or adding it through JQuery? – Limit

@user55 the new row data are coming from jQuery. – Drape

Then simply use fnAddData and fnUpdate methods. – Limit

@user55 How to do that? Can you give me an e.g. in jsfiddle.net – Drape

Answer 1

TLDR; You cannot use row.add() with server-side processing. Read the answer for the alternatives.

One thing to keep in mind though is that adding a row with row.add() only adds it to the table in the JavaScript (that is, on the client side); if the table is refreshed the data will not be added to the Ajax source and will disappear. If you want to be able to create data permanently in your data source, you'll need to use the Editor extension to DataTables, which unfortunately is licensed and not free like the rest of DataTables (or write your own server-side CRUD handler).

Edit: See the server side documentation where it says:

When using server-side processing, DataTables will make an Ajax request to the server for each draw of the information on the page (i.e. when paging, ordering, searching, etc.).

What is probably happening is that your row is getting added and then the table is redrawn, which sends a request to the server, where it finds no data and so it displays no data. The new row you added was technically added, but then immediately overwritten. Unfortunately, if this is the case, you will never be able to add rows in this way while using server-side processing.

The whole point of using server-side is to not have DataTables handle the manipulation of the data in the table, but to instead do that in the server and just allow DataTables to display the data.

Edit 2: (since you asked for more detail)

See this forum post (about your exact problem) by the author of the plugin where he says:

When in server-side processing mode, the data store is at the server. So adding a row on the client-side (if you'll excuse me) is fairly pointless. DataTables in SSP mode is just a dumb display and events library. If you need to add a row, then you need to add it to the data source (i.e. at the server) and then just redraw the table.

By using server-side processing, you give up the ability to just add rows in your JavaScript on the client side with row.add(). You absolutely have to add them on the server-side if you want them to show up. This is going to require you to either use the Editor extension or to write some code that sends an Ajax PUT or POST request to your server-side and then a server-side handler to add the row.

Edit 3: You keep asking for examples but asking for an example of server-side CRUD code is asking someone to basically write your whole back-end for you (not to mention that we have no idea what your current back-end looks like, or even what language it's in). You're now asking a totally different question. Here is a link to the documentation for the requirements and guidelines for serverside code, start there if you want to write your own (or, again, pay for Editor and get a back-end that is already written for you by the author of the plugin in C# or PHP).

Haustellum

I've updated my code with you suggestion, see again. Not work yet! – Drape

In the second example i didn't call ".draw()", however its works. – Drape

I already did know that. But my ask is: How can I to do that to work? – Drape

@RenattoMachado I'm telling you that you cannot make that work without updating server-side data, so you'll either need to use the editor extension linked above or write your own code to handle that. – Haustellum

@RenattoMachado I added an edit to further explain how row.add() conflicts with serverside processing. – Haustellum

I understood that! But it's just my question: How can I to do that work? I want practical examples. – Drape

@RenattoMachado I don't know how much clearer I can explain this. You cannot use row.add() with serverside processing. The alternatives are mentioned in my post, either use the Editor extension or write your own serverside code. Asking for a specific example of serverside CRUD code is a completely different question; that's a huge amount of code, not something someone can just quickly whip up for you. If you don't want to do that, stop using serverside processing. It's as simple as that. – Haustellum

Answer 2

Let me calrify for you why you are not able to do this and what you can do:

1. Server Side is (when you request server to process data and come back to client with response) to store data in database or file on server and tell you its done.
2. Client side is the javascript that simply show in browser that something has happened and do not touch server for example showing notification that row has been added.

You are trying to add a row via javascript to your browser (client side) and in options you are telling datatables to use server side row addition.

If I understand correctly the way you want it is to go to server store data and then show in client that data has been added. Now both serverside and client side can work

Server Side

Set the option to serverSide and then when you add data use appropriate method to provide data. This will trigger a call to server and come back. You may need to refresh datatable on completion or it might do it for you. This means fetching all data again from server to update complete table. It is possible that data you entered is on 11th row and filter is set to 10 rows only and your data would go on next page etc.

Client Side

Most people do these steps

1. Prepare your data and send it to server using ajax
2. When you get success use the same data to update grid on client side only.

You can also add it to grid first and then show loading to tell them its doing server side add and then if it fails you can say retry link to retry upload to server. Some client side apps use this with browser storage so they can sync when connection get established again.

Dont try to mix client and server side methods by telling datatables that you want to send serverside data but want to use client side add row as well. Use one of the above methods.

Dwightdwindle