Skip to main content
2 de 2
se añadieron 40 caracteres en el cuerpo

Una de las opciones que puedes usar es: DataTables el cual es un control completo (incluye paginación, ordenamiento, búsqueda, etcétera).

El siguiente ejemplo es una pequeña muestra que puedes modificar según tu fuente de datos JSON:

NOTA: jsfiddle modificado según esta respuesta en inglés.

var data = [
  ["1", "John", "https://picsum.photos/500/500"],
  ["2", "Jim", "https://picsum.photos/500/500"]
];

var table = $('#example').DataTable({
  data: data,
  lengthMenu: [12, 25, 50, "All"],
  columnDefs: [{
    targets: 2,
    render: function(data) {
      return '<img src="' + data + '" style="width: 30px; height: 30px;">'
    }
  }]
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.0.0/js/dataTables.rowReorder.js"></script>
<link href="http://cdn.datatables.net/rowreorder/1.0.0/css/rowReorder.dataTables.css" rel="stylesheet" />
<link href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css" rel="stylesheet" />
<table id="example">
  <thead>
    <tr>
      <th>id</th>
      <th>Name</th>
      <th>image</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>