Add row and remove row from datatables using ajax json api

m0hamedessam

i want update rows and add and remove rows by ajax using json api i succeed to make it happen just to update exist rows but i want also to remove not exist rows on refresh json api and add new json array

Note: i dont want to clear rows and redraws them again because i use filter, i just want add and remove rows and update exist (which already done)

$.ajax({
  type: 'POST',
  url: '/',
  data: {
    'cmd': 'clP',
    'p0': '-1'
  },
  dataType: 'json',
  success: function(data) {
    // console.log(data);
    $('#tm').text(data.header.tm);
    $('#net').text(data.header.net);
    $('#mem').text(data.header.mem);
    $('#cpu').text(data.header.cpu);

    var clientsData = data.clients;
    // console.log(clientsData);

    var result = "";
    for (var i = 0; i < clientsData.length; i++) {
      var row = clientsData[i];

      result += "<tr id='data" + row.id + "' class='data' data-info='info" + row.id + "'>";
      result += "<td id='id" + row.id + "'>" + row.id + "</td>";
      result += "<td id='ip" + row.id + "'>" + row.ip + "</td>";
      result += "<td id='cn" + row.id + "'>" + row.cn + "</td>";
      result += "<td id='ut" + row.id + "'>" + row.ut + "</td>";
      result += "<td id='ua" + row.id + "'>" + row.ua + "</td>";
      result += "<td id='del" + row.id + "' style='text-align: center; width: 30px'><a class='del' href='cmd=clDel&p0=" + row.id + "' title='Kick'><button><i style='color: #FF0000;' class='fa fa-trash' aria-hidden='true'></i></button></a></td>";
      result += "</tr>";

    }


    $('tbody.clientsData').html(result);

    $('#datatable').DataTable({
      "bPaginate": false,
      "bLengthChange": true,
      "bFilter": false,
      "bInfo": true,
      "bAutoWidth": true,
      "language": {
        search: "_INPUT_",
        searchPlaceholder: "Search..."
      },
      "dom": '<"pull-left"f><"pull-right"l>tip'

    });

    $('div.dataTables_filter input').css('width', 300);
    $('div.dataTables_filter input').css('margin-left', -1);


  },
  complete: function(data) {
    setTimeout(doAjax, interval);
  }
});


var interval = 1000;

function doAjax() {
  $.ajax({
    type: 'POST',
    url: '/',
    data: {
      'cmd': 'clR',
      'p0': '-1'
    },
    dataType: 'json',
    success: function(data) {
      // console.log(data);
      $('#tm').text(data.header.tm);
      $('#net').text(data.header.net);
      $('#mem').text(data.header.mem);
      $('#cpu').text(data.header.cpu);




      var clientsData = data.clients;
      // console.log(clientsData);

      var result = "";
      for (var i = 0; i < clientsData.length; i++) {
        var row = clientsData[i];


        ///** updating rows info    
        $('#id' + row.id).text(row.id);
        $('#ip' + row.id).text(row.ip);
        $('#cn' + row.id).text(row.cn);
        $('#ut' + row.id).text(row.ut);
        $('#ua' + row.id).text(row.ua);

      }

    },
    complete: function(data) {
      setTimeout(doAjax, interval);
    }
  });
}

this my table any advice how to collect not exist array number and remove them and add new array as new rows

    <table id="datatable" class="table" style="width:100%">
      <thead>
        <tr>
          <th>ID</th>
          <th>Connected IP</th>
          <th>Channel Name</th>
          <th>Uptime</th>
          <th>User Agent</th>
          <th>Actions</th>
        </tr>
      </thead>

      <tbody class="clientsData">

      </tbody>
    </table>

colin

Hi @m0hamedessam ,

Are you using Editor for the updating? I can't see any reference to it. If not, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

m0hamedessam

this demo : https://jsfiddle.net/zLd25b1c/

i dont use editor if you can see theres 2 json requests one when page load and other is refresh my problem that data is dynamic so some has to remove and some new data has to added as new row so how can i compare between exist rows and new json refresh request to get new ids to add and not exist rows id to remove them ??

hope this clear my question

colin

Hi @m0hamedessam ,

Yep, that's clear, thank you for the test case. It looks like in your doAjax(), when you're looping through the response for each row, you'll need to check for each one whether that ID already exists. You can filter the table using filter(). After that, you'll need to use rows().data() to see if any have been removed.

A more simple alternative if the number of rows is always going to low, would be to just remove them all with rows().remove(), and re-add them.

Hope that helps,

Colin

m0hamedessam

Thanks for support but actually im using second option already by clear tbody and redraw it again but i cant use search or sort function like that because each second all data removed and redraw it again, So can you give me demo example for first option regarding my code to check.

Thanks for your kindly answer

colin

Hi @m0hamedessam ,

That'll be some work to do, and goes beyond the support that we would offer in the forum. We do offer support packages, see here, which we'd be happy to provide.

Cheers,

Colin

m0hamedessam

ok Thanks