Creo que estás comparando un poco naranjas y manzanas. Sí, los dos son tablas y los dos usan JavaScript para actualizarse y buscar... pero ni su contenido ni su organización son comparables.
En la tabla de usuarios de StackOverflow, las celdas son independientes ya que ni las filas ni las columnas tienen relación alguna (que dos usuarios aparezcan en la misma o diferente fila/columna no indica absolutamente nada). En cambio, en el DataTable que presentas las celdas son "dependientes": todas las celdas de una fila están relacionadas (es información de un mismo registro) y todas las celdas de una columna también están relacionadas (porque representan el mismo dato).
Entonces, eso de "obtener tan solo la celda buscada" en la misma forma del ejemplo que quieres emular, no es realmente una opción con ese DataTable (porque al menos el dato debería mantenerse en la misma columna para que no deje de tener sentido).
Lo más parecido que se me ocurre sería esconder el contenido de las celdas que no cumplan la condición de búsqueda, mientras se sigue manteniendo visible las celdas que sí la cumplen. De este modo, la celda que cumpla con el criterio de búsqueda aún se mantendrá bajo la cabecera de columna que le corresponde y podrás saber qué representa.
Esto se podría hacer leyendo el controlador del evento de dibujado (draw
) de la DataTable. Ese evento se lanza después de que la DataTable se haya dibujado (o redibujado) como por ejemplo al hacer paginación, buscar, o filtrar por algún campo.
Aquí dejo una demostración comentada:
$(document).ready(function() {
var table = $('#example').DataTable();
// cuando se redibuje la table
table.on( 'draw', function ( e, settings, details ) {
// seleccionamos la tabla y el valor a buscar
var $e = $("#example");
var buscar = $e.parent().find("input").val().toLowerCase().trim();
// ponemos todas las celdas con su color original
$e.find("td").css("opacity", "1");
// si hay una cadena de busqueda
if (buscar != "") {
// buscamos entre todas las celdas visibles
$e.find("td").each(function() {
// las que no tengan la cadena buscada
if ($(this).text().toLowerCase().indexOf(buscar) < 0) {
// su texto se hara transparente
$(this).css("opacity", "0");
}
});
}
});
var data = table.cell('#cell-1-1').data();
$('#example tbody').on( 'click', 'td', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('td.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
$('#button').click( function () {
table.row('.selected').remove().draw( false );
} );
} );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<button id="button">Eliminar Seleccion</button>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th class="user">Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Brielle Williamson Junior</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>41</td>
<td>2012/12/02</td>
<td>$272,000</td>
</tr>
<tr>
<td>Brielle Williamson III</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>21</td>
<td>2012/12/02</td>
<td>$172,000</td>
</tr>
<tr>
<td>Brielle Williamson IV</td>
<td>Mascot</td>
<td>New York</td>
<td>1</td>
<td>2012/12/02</td>
<td>$0</td>
</tr>
<tr>
<td>John Doe</td>
<td>Software Developer</td>
<td>Austin</td>
<td>45</td>
<td>2014/11/12</td>
<td>$172,000</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>QA Engineer</td>
<td>Dallas</td>
<td>31</td>
<td>2016/11/01</td>
<td>$144,500</td>
</tr>
<tr>
<td>Bill Gates</td>
<td>CEO</td>
<td>Redmond</td>
<td>67</td>
<td>2016/11/01</td>
<td>$144,500</td>
</tr>
</tbody>
</table>
Edición: Si quieres hacerlo lo más parecido a StackOverflow, puedes cambiar el CSS para que se adapte a lo que buscas, pero realmente vas a perder mucha de la funcionalidad que los DataTables te ofrecen.
La idea sería la siguiente:
- Quitar la cabecera y el pie de página
- Hacer que la filas filas se muestren de manera en línea (
inline-block
)
- Hacer que las celdas ocupen el 100% de cada fila (con
block
)
- Darle un ancho a las filas para que haya tantas como quieras en cada linea.
- Hacer que se muestren sólo múltiplos del número de filas por línea (con
pageLength
)
El resultado se vería así:
$(document).ready(function() {
var table = $('#example').DataTable({ pageLength: 9 });
var data = table.cell('#cell-1-1').data();
$('#example tbody').on( 'click', 'td', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('td.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
$('#button').click( function () {
table.row('.selected').remove().draw( false );
} );
} );
thead, tfoot { display:none !important; }
tbody tr {
display:inline-block;
width:31%;
margin:1%;
border:1px solid black;
}
tbody tr td {
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<button id="button">Eliminar Seleccion</button>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th class="user">Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
<tr>
<td>Brielle Williamson Junior</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>41</td>
<td>2012/12/02</td>
<td>$272,000</td>
</tr>
<tr>
<td>Brielle Williamson III</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>21</td>
<td>2012/12/02</td>
<td>$172,000</td>
</tr>
<tr>
<td>Brielle Williamson IV</td>
<td>Mascot</td>
<td>New York</td>
<td>1</td>
<td>2012/12/02</td>
<td>$0</td>
</tr>
<tr>
<td>John Doe</td>
<td>Software Developer</td>
<td>Austin</td>
<td>45</td>
<td>2014/11/12</td>
<td>$172,000</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>QA Engineer</td>
<td>Dallas</td>
<td>31</td>
<td>2016/11/01</td>
<td>$144,500</td>
</tr>
<tr>
<td>Bill Gates</td>
<td>CEO</td>
<td>Redmond</td>
<td>67</td>
<td>2016/11/01</td>
<td>$144,500</td>
</tr>
</tbody>
</table>