I have a problem with DataTable when paging after inserting

$(function(){
  listarGrupo();

  function listarGrupo(){
    var base_url = $("#base_url").val();
    $.ajax({
      type: 'ajax',
      url: base_url+"mantenimiento/logistica/grupo/listarGrupo",
      async: false,
      dataType: 'json',
      success: function(data){
        var html = '';

        var i;
        var contador=1;
        for(i=0; i<data.length; i++) {
         html +='<tr>'+
          '<td>'+contador+'</td>'+
           '<td>'+data[i].nClase+'</td>'+
          '<td>'+data[i].nFamilia+'</td>'+
           '<td>'+data[i].nGrupo+'</td>'+
           '<td>'+
           '<a class="btn btn-warning btn-xs item-edit"       data="'+data[i].idGrupo+'">Editar</a>&nbsp;&nbsp;'+
          '<a class="btn btn-danger btn-xs item-delete" data="'+data[i].idGrupo+'">Eliminar</a>'+
           '</td>'+
          '</tr>';
          contador++;
        }

        $('#showdata').html(html);
      },
      error: function() {
        alert('Could not get Data from Database');
      }
    });
  }

});

//ABRE MODAL INSERTAR
$('.btnAddGrupo').click(function(){
  var base_url = $("#base_url").val();
  var url = $('#form_grupo').attr('action');
  
  $('#modalgrupo').modal('show');
  $('#form_grupo')[0].reset();
  listarFamilias();
  
  $('#modalgrupo').find('.modal-title').text('CREAR NUEVO GRUPO');
  $('#form_grupo').attr('action', base_url+"mantenimiento/logistica/grupo/add");
});

//FUNCION INSERTAR

$('#btnsave').click(function(){
  var url = $('#form_grupo').attr('action');
  var data = $('#form_grupo').serialize();
  
  $.ajax({
    type: 'ajax',
    method: 'post',
    url: url,
    data: data,
    async: false,
    dataType: 'json',
    success: function(response) {
      if(response.success) {
        $('#modalgrupo').modal('hide');
        $('#form_grupo')[0].reset();

        if(response.type=='add'){
          var type = 'guardado'
        } else if(response.type=='update'){
          var type ="actualizado"
        } 

        swal({
          title: "Buen trabajo!",
          text: "Datos " + type + " correctamente..!",
          icon: "success",
        });
        listarGrupo();  //<!---- FUNCION LISTAR
      } else {
        swal({
          title: "Error!",
          text: "Ocurrio un error al registrar..!",
          icon: "error",
        });
      }
    },
    error: function(){
      alert('No se pudieron agregar datos');
    }
  });
});

paginacion();

function paginacion() {
  $('.sidebar-menu').tree()
  $("#example1").DataTable({
    "lengthMenu": [
      [7, 25, 50, 100, -1],
      [7, 25, 50, 100, "All"]
    ],
    "ordering":  true,
    "paginate": true,
    "language": {
      "lengthMenu": "Mostrar _MENU_ registros por pagina",
      "zeroRecords": "No se encontraron resultados en su busqueda",
      "searchPlaceholder": "Buscar registros",
      "info": "Mostrando registros de _START_ al _END_ de un total de  _TOTAL_ registros",
      "infoEmpty": "No existen registros",
      "infoFiltered": "(filtrado de un total de _MAX_ registros)",
      "search": "Buscar:",
      "paginate": {
        "first": "Primero",
        "last": "Último",
        "next": "Siguiente",
        "previous": "Anterior"
       }
    }
  });
}

<div class="box-body" >
  <div class="table table-responsive">
    <table id="example1" class="table table-bordered table-hover" style=" width: 900px;min-width: 900px;">
     <thead>
       <tr>
        <th scope="col" style="width: 50px;">ITEM</th>
                    <th scope="col" style="width: 150px;">CLASE</th>
        <th scope="col" style="width: 200px;">FAMILIA</th>
        <th scope="col" style="width: 300px;">GRUPO</th>
        <th scope="col" style="width: 150px;">OPCIONES</th>
       </tr>
     </thead>
     <tbody id="showdata">
     </tbody>
    </table>
  </div>
 </div>