Добавить строку и удалить строку из таблицы данных, используя ajax json api - PullRequest
Новая
       18

Добавить строку и удалить строку из таблицы данных, используя ajax json api

0 голосов
/ 01 апреля 2019

Я хочу обновить строки, добавить и удалить строки с помощью ajax, используя json api. Мне удалось это сделать, просто обновить существующие строки, но я также хочу удалить несуществующие строки при обновлении json api и добавить новый массив json

Примечание: я не хочу очищать строки и перерисовывать их снова, потому что я использую фильтр, я просто хочу добавлять и удалять строки и обновлять существующие (что уже сделано) 

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



      $("#clientsData").empty();


      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);
    }
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

любой совет, как собрать несуществующий номер массива и удалить их и добавить новый массив как новые строки

...