Uso del plugin jQuery.datatables.js y explicación detallada de API de ejemplo

1configuración predeterminada de DataTables

$(document).ready(function() {
$('#example').dataTable();
});

Ejemplo:http://www.guoxk.com/html/DataTables/Cero-configuration.html

2propiedades básicas de DataTables

"bPaginate": true, //función de cambio de página
"bLengthChange": true, //cambio de cantidad de datos por página
"bFilter": true, //función de filtrado
"bSort": false, //función de ordenamiento
"bInfo": true,//información de pie de página
"bAutoWidth": true//ancho automático

Ejemplo:http://www.guoxk.com/html/DataTables/Característica-enablement.html

3ordenamiento de datos

$(document).ready(function() {
$('#example').dataTable({
"aaSorting": [
[ 4, "desc" ]
]
});
});

Desde la columna 0, en el orden de la columna4orden inverso de columnas

Ejemplo:http://www.guoxk.com/html/DataTables/Ordenamiento-data.html

4ordenamiento de múltiples columnas

Ejemplo:http://www.guoxk.com/html/DataTables/Multi-columna-sorting.html

5ocultar ciertas columnas

$(document).ready(function() {
$('#example').dataTable({
"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },
{ "bVisible": false, "aTargets": [ 3 ] }
] });
});

Ejemplo:http://www.guoxk.com/html/DataTables/Oculto-columns.html

6cambio de posición de los elementos en la página

$(document).ready(function() {
$('#example').dataTable({
"sDom": '<"top"fli>rt<"bottom"p><"clear">'
});
});
//l- Número de elementos por página
//f - Filtrado de entrada
//t - Tabla de formulario
//i – Información
//p – Navegación
//r – Procesando
//< y > – elementos div
//<"class" and > – div con una clase
//Ejemplos: <"wrapper"flipt>, <lf<t>ip>

Ejemplo:http://www.guoxk.com/html/DataTables/DOM-positioning.html

7Guardar estado, si usa la navegación o cambia la cantidad de datos por página, se guardará en los cookies y al volver a visitar mostrará el contenido de la última vez que cerró la página.

$(document).ready(function() {
$('#example').dataTable({
"bStateSave": true
});
});

Ejemplo:http://www.guoxk.com/html/DataTables/Estado-saving.html

8Estilo de navegación con números

$(document).ready(function() {
$('#example').dataTable({
"sPaginationType": "números_completos"
});
});

Ejemplo:http://www.guoxk.com/html/DataTables/Alternativa-pagination-styles.html

9Limitar el ancho horizontal

$(document).ready(function() {
$('#example').dataTable({
"sScrollX": ""100%
"sScrollXInner": ""110%
"bScrollCollapse": true
});
});

Ejemplo:http://www.guoxk.com/html/DataTables/Horizontal.html

10Limitar la altura vertical

Ejemplo:http://www.guoxk.com/html/DataTables/Vertical.html

11Limitar en ambas direcciones horizontal y vertical

Ejemplo:http://www.guoxk.com/html/DataTables/HorizontalVerticalBoth.html

12Cambiar idioma

$(document).ready(function() {
$('#example').dataTable({
"oLanguage": {
"sLengthMenu": "Mostrar _MENU_ registros por página"
"sZeroRecords": "Lo sentimos, no se encontraron"
"sInfo": "Desde _START_ hasta _END_" /Total _TOTAL_ datos
"sInfoEmpty": "No hay datos",
"sInfoFiltered": "(Buscando de _MAX_ datos)"
"oPaginate": {
"sFirst": "Primera página",
"sPrevious": "Página anterior",
"sNext": "Página siguiente",
"sLast": "Última página"
}
"sZeroRecords": "No se encontraron datos",
"sProcessing": "<img src='#'" /loading.gif' /">
}
});
});

Ejemplo:http://www.guoxk.com/html/DataTables/Cambiar-idioma-information.html

13Evento de click

Ejemplo:http://www.guoxk.com/html/DataTables/evento-click.html

14/Usar el plugin tooltip

Ejemplo:http://www.guoxk.com/html/DataTables/tooltip.html

15Definir la cantidad de datos a mostrar por página

$(document).ready(function() {
$('#example').dataTable({
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "Todos"]]
});
});

Ejemplo:http://www.guoxk.com/html/DataTables/length_menu.html

16Callback de fila

Ejemplo:http://www.guoxk.com/html/DataTables/RowCallback.html

El valor de la última columna si es "A" se muestra en negrita

17Control de ordenamiento

$(document).ready(function() {
$('#example').dataTable({
"aoColumns": [
null,
{"asSorting": ["asc"]},
{"asSorting": ["desc", "asc", "asc"]},
{"asSorting": []},
{"asSorting": []}
]
});
});

Ejemplo:http://www.guoxk.com/html/DataTables/sort.html

Nota: El primer columna se ordena por defecto al hacer clic, el segundo columna está ordenado al hacer clic, el tercer columna se invierte al hacer clic una vez, dos veces se ordena, las cuartas y quintas columnas no se realiza el ordenamiento al hacer clic

18Lee el paquete de idioma desde el archivo de configuración

$(document).ready(function() {
$('#example').dataTable({
"oLanguage": {
"sUrl": "cn.txt"
}
});
});

19Utiliza el origen AJAX

$(document).ready(function() {
$('#example').dataTable({
"bProcessing": true,
"sAjaxSource": "."/arrays.txt'
});
});

Ejemplo:http://www.guoxk.com/html/DataTables/ajax.html

20. Utiliza AJAX para organizar los datos en el servidor

$(document).ready(function() {
$('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "."/server_processing.php",
/*Si se agrega el siguiente contenido, se transmitirán los datos mediante el método POST
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
});
}*/
"oLanguage": {
"sUrl": "cn.txt"
}
"aoColumns": [
{"sName": "platform" },
{"sName": "version" },
{"sName": "engine" },
{"sName": "browser" },
{"sName": "grade" }
]//$_GET['sColumns'] recibirá los datos transmitidos por aoColumns
});
});

Ejemplo:http://www.guoxk.com/html/DataTables/ajax-serverSide.html

21Carga id y class para cada línea

El formato de datos devueltos por el servidor es:

{"}}
"DT_RowId": "row_"8"[,
"DT_RowClass": "gradeA"
"0": "Gecko"
"1": "Firefox" 1.5"[,
"2": "Win" 98+ / OSX.2+"
"3": "1.8"[,
"4": "A"
}

Ejemplo:http://www.guoxk.com/html/DataTables/add_id_class.html

22、Mostrar detalles para cada fila, haga clic en el principio de la fila “+Mostrar detalles al expandir con el símbolo “

Ejemplo:http://www.guoxk.com/html/DataTables/with-row-information.html

23、Selección de múltiples filas

Ejemplo:http://www.guoxk.com/html/DataTables/selectRows.html

22、Integración del plugin jQuery jEditable

Ejemplo:http://www.guoxk.com/html/DataTables/jEditable-integration.html

Más referencias:

Es importante tener en cuenta que la tabla objeto que debe ser procesada por dataTable debe tener thead y tbody, y la estructura debe ser ordenada (los datos no necesariamente deben ser completos), de esta manera se puede procesar correctamente.

Los siguientes son parámetros que se pueden agregar al enlace dataTable:

La siguiente es una explicación detallada de cómo usar el plugin jQuery.datatables.js y ejemplos de API, esperamos que sea útil para ustedes. Si tienen alguna pregunta, déjenos un mensaje y responderemos a tiempo. También queremos agradecer el apoyo de todos a la página web de呐喊教程！

Declaración: El contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y sube por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no se ha procesado editorialmente por humanos y no asume la responsabilidad de las responsabilidades legales relacionadas. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#w proporcionando evidencia relevante, una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.3Declaración: El contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y sube por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no se ha procesado editorialmente por humanos y no asume la responsabilidad de las responsabilidades legales relacionadas. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#w proporcionando evidencia relevante, una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.