使用ajax json API在数据表中添加行并从数据表中删除行

时间:2019-04-01 11:40:33

标签: jquery datatables datatables-1.10

我想使用json api通过ajax更新行并添加和删除行,但我成功使它发生了,只是更新了存在的行,但是我还希望删除刷新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>

关于如何收集不存在的数组编号并删除它们并将其添加为新行的任何建议

0 个答案:

没有答案