Datatables paginación de datos

/, jQuery/Datatables paginación de datos

[fusion_builder_container hundred_percent=”yes” overflow=”visible”][fusion_builder_row][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][fusion_imageframe lightbox=”no” lightbox_image=”” style_type=”none” hover_type=”zoomin” bordercolor=”” bordersize=”0px” borderradius=”0″ stylecolor=”” align=”center” link=”” linktarget=”_self” animation_type=”fade” animation_direction=”up” animation_speed=”0.4″ animation_offset=”” hide_on_mobile=”no” class=”” id=””] Datatables paginación de datos[/fusion_imageframe][fusion_text]

Ya hemos visto como realizar Paginación con PHP y MySQL y realmente no es tan complejo, en esta ocasión veremos un plugin para jQuery que a parte de paginar ofrece funcionalidades extra para nuestras listas de datos.

Datatables es un plugin jQuery muy interesante y básicamente se utiliza para mostrar en pantalla amplias colecciones de datos con tres funcionalidades importantes: Paginación, búsqueda instantánea y ordenación multi columna.

[/fusion_text][/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][fusion_title size=”2″ content_align=”left” style_type=”single solid” sep_color=”” margin_top=”” margin_bottom=”” class=”” id=””]Datatables – Características principales[/fusion_title][fusion_text]

Datatables permite agregar controles avanzados de interacción a cualquier tabla HTML, cuenta con una solida documentación y podemos encontrar las siguientes capacidades:

[/fusion_text][/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][fusion_checklist icon=”fa-check” iconcolor=”” circle=”” circlecolor=”” size=”13px” class=”” id=””][fusion_li_item icon=””]Soporte para fuentes de datos como DOM, javascript, Ajax y procesamiento de datos del lado del servidor.[/fusion_li_item][fusion_li_item icon=””]Temas para diferentes frameworks como jQuery UI, Twitter Boostrap y Foundation.[/fusion_li_item][fusion_li_item icon=””]cuenta con gran variedad de extensiones como editor de datos, herramientas para copiar o exportar los datos a varios formatos como pdf, excel, csv o mandar a imprimir.[/fusion_li_item][fusion_li_item icon=””]Altamente customizable.[/fusion_li_item][fusion_li_item icon=””]Se puede traducir prácticamente a cualquier idioma.[/fusion_li_item][fusion_li_item icon=””]Cuenta con dos tipos de licenciamiento (MIT y Comercial).[/fusion_li_item][/fusion_checklist][/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][fusion_title size=”2″ content_align=”left” style_type=”single solid” sep_color=”” margin_top=”” margin_bottom=”” class=”” id=””]Plugins para Datatables[/fusion_title][fusion_text]

Datatables cuenta con varios plugins interesantes que permiten optimizar, dar mejor funcionalidad y vista  a nuestras colecciones de datos.

  • API Plug-ins – Se pueden utilizar los métodos de forma separada.
  • Sorting Plug-ins – Datatables proporciona dos plugins para ordenar por tipo  y clasificación de datos.
  • Filtering Plug-ins – Datatables proporciona dos tipos de filtrado para búsquedas, por tipo o por fila.
  • Pagination Plug-ins – Sirve para modificar los estilos y presentación de la barra de paginación.
  • Internationalisation – Configuración del lenguaje de salida de las barras de paginación y datos de DataTables.
  • Type detection Plug-ins – Sirve para mejorar la forma en que se aplican los filtros de ordenación de datos.

[/fusion_text][/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][fusion_title size=”2″ content_align=”left” style_type=”single solid” sep_color=”” margin_top=”” margin_bottom=”” class=”” id=””]Configuración básica de Datatables[/fusion_title][fusion_text]

Datatables puede ser descargado desde su sitio oficial en el se puede encontrar una forma muy sencilla de iniciar con este plugin de jQuery y es utilizando el generador de descargas que permite seleccionar los componentes que serán utilizados para implementar en un proyecto de desarrollo web.

Para nuestro ejemplo presentaremos una tabla con el listado de países del mundo. Esta estructura está configurada para Bootstrap 3.3.5.

[/fusion_text][fusion_text]

[/fusion_text][/fusion_builder_column][fusion_builder_column type=”1_1″ background_position=”left top” background_color=”” border_size=”” border_color=”” border_style=”solid” spacing=”yes” background_image=”” background_repeat=”no-repeat” padding=”” margin_top=”0px” margin_bottom=”0px” class=”” id=”” animation_type=”” animation_speed=”0.3″ animation_direction=”left” hide_on_mobile=”no” center_content=”no” min_height=”none”][fusion_tabs design=”classic” layout=”horizontal” justified=”yes” backgroundcolor=”” inactivecolor=”” bordercolor=”” class=”” id=””][fusion_tab title=”javascript” icon=””]

 

[/fusion_tab][fusion_tab title=”HTML” icon=””]