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?

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).