DataTables es un complemento de jQuery que se puede usar para agregar controles interactivos y avanzados a las tablas HTML de la página web. Esto también permite buscar, ordenar y filtrar los datos de la tabla según las necesidades del usuario. DataTable también expone una potente API que se puede utilizar para modificar la forma en que se muestran los datos.
La opción ColumnDefs le permite asignar opciones específicas a las columnas de la tabla. Puede ser más de una columna.
Sintaxis:
columnDefs: [
{ columnOptions },
{ columnOptions }
Valor de la opción: esta opción tiene un valor único como se mencionó anteriormente y se describe a continuación:
- array: esto toma una array que contiene valores de columnas
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<!-- DataTables CSS -->
<link rel="stylesheet" href=
"https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<!-- DataTables JS -->
<script src=
"https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksForGeeks
</h1>
<h3>DataTables columnDefs Option</h3>
<!-- HTML table with student data -->
<table id="gfg" class="display">
<thead>
<tr>
<th>Sno.</th>
<th>gfg</th>
<th>language</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>gfg1</td>
<td>HTML</td>
</tr>
<tr>
<td>2</td>
<td>gfg2</td>
<td>jQuery</td>
</tr>
<tr>
<td>3</td>
<td>gfg3</td>
<td>JavaScript</td>
</tr>
<tr>
<td>4</td>
<td>gfg4</td>
<td>ReactJS</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function () {
$('#gfg').DataTable({
columnDefs: [
{ targets: [0, 1, 2], visible: true },
{ targets: '_all', visible: false }
]
});
});
</script>
</body>
</html>
Producción:
Ejemplo 2:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- jQuery -->
<script type="text/javascript"
src="https://code.jquery.com/jquery-3.5.1.js">
</script>
<!-- DataTables CSS -->
<link rel="stylesheet" href=
"https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<!-- DataTables JS -->
<script src=
"https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js">
</script>
</head>
<body>
<h1 style="color: green;">
GeeksForGeeks
</h1>
<h3>DataTables columnDefs Option</h3>
<!-- HTML table with student data -->
<table id="gfg" class="display">
<thead>
<tr>
<th>Sno.</th>
<th>gfg</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>gfg1</td>
</tr>
<tr>
<td>2</td>
<td>gfg2</td>
</tr>
<tr>
<td>3</td>
<td>gfg3</td>
</tr>
<tr>
<td>4</td>
<td>gfg4</td>
</tr>
<tr>
<td>5</td>
<td>gfg5</td>
</tr>
<tr>
<td>6</td>
<td>gfg6</td>
</tr>
<tr>
<td>7</td>
<td>gfg7</td>
</tr>
<tr>
<td>8</td>
<td>gfg8</td>
</tr>
<tr>
<td>9</td>
<td>gfg9</td>
</tr>
<tr>
<td>10</td>
<td>gfg10</td>
</tr>
<tr>
<td>11</td>
<td>gfg11</td>
</tr>
<tr>
<td>12</td>
<td>gfg12</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function () {
$('#gfg').DataTable({
columnDefs: [
{ targets: [0, 1], visible: true },
{ targets: '_all', visible: false }
]
});
});
</script>
</body>
</html>
Producción:
Referencia: https://datatables.net/reference/option/columnDefs
Publicación traducida automáticamente
Artículo escrito por dheerchanana08 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA