Cómo agregar una WP_List_Table a una página de WordPress

17 dic 2015, 22:30:59
Vistas: 18.3K
Votos: 8

Tengo una WP_List_Table y me gustaría agregarla a una página, pero no he encontrado ejemplos claros sobre cómo hacerlo. ¿Alguien tiene un fragmento de código que muestre cómo lograr esto?

<?php
/*
Plugin Name: Add Parl Plugin 2
Description: Para agregar parlamentos
Plugin URI:"http://www.ttparliaments.org"
Author URI: ""
Author: Napoleon Okunna
License: ""
Version: 1.0
*/


global $custom_table_example_db_version;
$custom_table_example_db_version = '1.1'; // versión cambiada de 1.0 a 1.1
  global $wpdb;
    global $custom_table_example_db_version;

    $table_name = $wpdb->prefix . 'oop_parliamentary_info'; // no olvides el prefijo de las tablas


/**
 * PARTE 2. Definición de la Lista de Tabla Personalizada
 * ============================================================================
 *
 * En esta parte vas a definir una clase de lista de tabla personalizada,
 * que mostrará los registros de tu base de datos en una tabla bien presentada
 *
 * http://codex.wordpress.org/Class_Reference/WP_List_Table
 * http://wordpress.org/extend/plugins/custom-list-table-example/
 */

if (!class_exists('WP_List_Table')) {
    require_once(ABSPATH . 'wp-admin/includes/class-wp-list-table.php');
}
/**
 * Clase Custom_Table_Example_List_Table que mostrará los registros
 * de nuestra tabla personalizada
 */
class Custom_Table_Example_List_Table extends WP_List_Table
{
    /**
     * [REQUERIDO] Debes declarar el constructor y dar algunos parámetros básicos
     */
    function __construct()
    {
        global $status, $page;

        parent::__construct(array(
            'singular' => 'persona',
            'plural' => 'personas',
        ));
    }

    /**
     * [REQUERIDO] este es el renderizador de columna por defecto
     *
     * @param $item - fila (array clave, valor)
     * @param $column_name - string (clave)
     * @return HTML
     */
    function column_default($item, $column_name)
    {
        return $item[$column_name];
    }

    /**
     * [OPCIONAL] este es un ejemplo de cómo renderizar una columna específica
     *
     * el nombre del método debe ser así: "column_[nombre_columna]"
     *
     * @param $item - fila (array clave, valor)
     * @return HTML
     */
    function column_age($item)
    {
        return '<em>' . $item['age'] . '</em>';
    }

    /**
     * [OPCIONAL] ejemplo de cómo renderizar columna con acciones,
     * cuando pasas el cursor sobre la fila muestra los enlaces "Editar | Eliminar"
     *
     * @param $item - fila (array clave, valor)
     * @return HTML
     */
    function column_name($item)
    {
        // enlaces que van a /admin.php?page=[tu_pagina_plugin][&otros_parametros]
        // nota cómo usamos $_REQUEST['page'], así la acción se hará en la página actual
        // también nota cómo usamos $this->_args['singular'] así en este ejemplo será
        // algo como &persona=2
        /*$actions = array(
            'edit' => sprintf('<a href="?page=persons_form&id=%s">%s</a>', $item['id'], __('Editar', 'custom_table_example')),
            'delete' => sprintf('<a href="?page=%s&action=delete&id=%s">%s</a>', $_REQUEST['page'], $item['id'], __('Eliminar', 'custom_table_example')),
        );

        return sprintf('%s %s',
            $item['Title'],
            $this->row_actions($actions)
        );
        */

  $actions = array(
            'edit'      => sprintf('<a href="?page=%s&action=%s&book=%s">Editar</a>',$_REQUEST['page'],'edit',$item['ParliamentaryID']),
            'delete'    => sprintf('<a href="?page=%s&action=%s&book=%s">Eliminar</a>',$_REQUEST['page'],'delete',$item['ParliamentaryID']),
        );

  return sprintf('%1$s %2$s', $item['booktitle'], $this->row_actions($actions) );
    }

    /**
     * [REQUERIDO] así se renderiza la columna de checkbox
     *
     * @param $item - fila (array clave, valor)
     * @return HTML
     */
    function column_cb($item)
    {
        return sprintf(
            '<input type="checkbox" name="id[]" value="%s" />',
            $item['id']
        );
    }

    /**
     * [REQUERIDO] Este método devuelve las columnas a mostrar en la tabla
     * puedes omitir columnas que no quieras mostrar
     * como contenido o descripción
     *
     * @return array
     */
    function get_columns()
    {
        $columns = array(
            'cb' => '<input type="checkbox" />', //Renderiza un checkbox en lugar de texto
            'Title' => __('Título', 'custom_table_example'),
            'StartDate' => __('FechaInicio', 'custom_table_example'),
            'EndDate' => __('FechaFin', 'custom_table_example'),
             'IsCurrent' => __('EsActual', 'custom_table_example'),
            // 'ParliamentaryID' => __('Editar', 'custom_table_example','<input type="checkbox" />'),
             ParliamentaryID =>'<a href=#>Editar</a>',

        );
        return $columns;
    }

    /**
     * [OPCIONAL] Este método devuelve columnas que pueden usarse para ordenar la tabla
     * todos los strings en el array - son nombres de columnas
     * nota que true en la columna name significa que es el orden por defecto
     *
     * @return array
     */
    function get_sortable_columns()
    {
        $sortable_columns = array(
            'Title' => array('Title', true),
            'StartDate' => array('StartDate', false),
            'EndDate' => array('EndDate', false),
             'IsCurrent' => __('IsCurrent', false),
             'ParliamentaryID'=> __('ParliamentaryID', false),

        );
        return $sortable_columns;
    }

    /**
     * [OPCIONAL] Devuelve array de acciones masivas si hay alguna
     *
     * @return array
     */
    function get_bulk_actions()
    {
        $actions = array(
            'delete' => 'Eliminar',
            'edit' =>'Editar'
        );
        return $actions;
    }

    /**
     * [OPCIONAL] Este método procesa acciones masivas
     * puede estar fuera de la clase
     * no puede usar wp_redirect porque ya hay salida
     * en este ejemplo estamos procesando la acción eliminar
     * el mensaje sobre eliminación exitosa se mostrará en la página en la siguiente parte
     */
    function process_bulk_action()
    {
        global $wpdb;
        $table_name = $wpdb->prefix . 'cte'; // no olvides el prefijo de las tablas

        if ('delete' === $this->current_action()) {
            $ids = isset($_REQUEST['id']) ? $_REQUEST['id'] : array();
            if (is_array($ids)) $ids = implode(',', $ids);

            if (!empty($ids)) {
                $wpdb->query("DELETE FROM $table_name WHERE id IN($ids)");
            }
        }
        if ('Edit' === $this->current_action()) {
            echo('Editar');
        }
    }

    /**
     * [REQUERIDO] Este es el método más importante
     *
     * Obtendrá filas de la base de datos y las preparará para mostrarse en la tabla
     */
    function prepare_items()
    {
        global $wpdb;
        $table_name = $wpdb->prefix . 'cte'; // no olvides el prefijo de las tablas
         $table_name='oop_parliamentary_info';

        $per_page = 5; // constante, cuántos registros se mostrarán por página

        $columns = $this->get_columns();
        $hidden = array();
        $sortable = $this->get_sortable_columns();

        // aquí configuramos los encabezados de la tabla, definidos en nuestros métodos
        $this->_column_headers = array($columns, $hidden, $sortable);

        // [OPCIONAL] procesa acción masiva si hay alguna
        $this->process_bulk_action();

        // se usará en la configuración de paginación
        $total_items = $wpdb->get_var("SELECT COUNT(ParliamentaryID) FROM $table_name");

        // prepara parámetros de consulta, como página actual, ordenar por y dirección de orden
        $paged = isset($_REQUEST['paged']) ? max(0, intval($_REQUEST['paged']) - 1) : 0;

        $orderby = (isset($_REQUEST['orderby']) && in_array($_REQUEST['orderby'], array_keys($this->get_sortable_columns()))) ? $_REQUEST['orderby'] : 'name';
        $order = (isset($_REQUEST['order']) && in_array($_REQUEST['order'], array('asc', 'desc'))) ? $_REQUEST['order'] : 'asc';
5
Comentarios

¿A qué página estás agregando esto? ¿En la sección de administración del sitio o en una página personalizada? ¿Quieres poder filtrar los resultados o simplemente listar el contenido? ¿Puedes también mostrar de dónde obtienes los datos para llenar tus tablas?

jgraup jgraup
17 dic 2015 22:42:55

Lo hice funcionar en una página de administración pero me gustaría que esto funcione en una página personalizada o en cualquier página

Napstar Napstar
17 dic 2015 22:47:46

Esto parece una característica interna - "Si bien WP_List_Table fue diseñado para uso interno y no hizo muchas consideraciones para subclases personalizadas, reconocemos que los desarrolladores las usan y que una limpieza beneficiaría tanto a las implementaciones como al mantenimiento futuro." - https://make.wordpress.org/core/2015/08/08/list-table-changes-in-4-3/ ¿Estás intentando solo listar datos de columnas en el front-end?

jgraup jgraup
17 dic 2015 22:52:38

Hay varios plugins de jQuery para tablas http://www.unheap.com/section/user-interface/filter-sort/ & http://www.unheap.com/section/media/tables-graphs/ por ejemplo

jgraup jgraup
17 dic 2015 23:00:25

@jgraup sí, estoy intentando listar datos de columnas en el front-end

Napstar Napstar
17 dic 2015 23:10:18
Todas las respuestas a la pregunta 1
3
11

Tu WP_List_Table será diferente -- esto fue adaptado de WP_List_Table – una guía paso a paso y usando el GIST: Plugin de ejemplo para uso de la clase WP_List_Table (versión completa). Deberás ajustar tus métodos para incluir CSS en el front-end también (no incluido en esta respuesta).

ADVERTENCIA :

Dado que esta clase está marcada como privada, los desarrolladores deberían usarla bajo su propio riesgo ya que esta clase está sujeta a cambios en futuras versiones de WordPress. Se recomienda encarecidamente a los desarrolladores que usen esta clase que prueben sus plugins con todas las versiones beta/RC de WordPress para mantener la compatibilidad.

PREPARACIÓN DEL FRONT-END

add_action ('init', function(){

   // Si no estamos en el back-end, no esperamos cargar estas cosas

   if( ! is_admin() ){

       require_once( ABSPATH . 'wp-admin/includes/class-wp-list-table.php' );
       require_once( ABSPATH . 'wp-admin/includes/screen.php' );
       require_once( ABSPATH . 'wp-admin/includes/class-wp-screen.php' );
       require_once( ABSPATH . 'wp-admin/includes/template.php' );

       global $myListTable;
       $myListTable = new My_Example_List_Table();
   }
});

RENDERIZADO

function my_render_list_page(){

    global $myListTable;

    echo '</pre><div class="wrap"><h2>Mi Prueba de Lista de Tabla</h2>';
    $myListTable->prepare_items();

    ?>
    <form method="post">
        <input type="hidden" name="page" value="ttest_list_table">
    <?php

        $myListTable->search_box( 'buscar', 'search_id' );
        $myListTable->display();

    echo '</form></div>';
}

EN TU PÁGINA

my_render_list_page();

VERSIÓN CONDENSADA

function my_render_list_page(){

    static $myListTable;
    if( ! isset($myListTable)) {
        require_once(ABSPATH . 'wp-admin/includes/class-wp-list-table.php');
        require_once(ABSPATH . 'wp-admin/includes/screen.php');
        require_once(ABSPATH . 'wp-admin/includes/class-wp-screen.php');
        require_once(ABSPATH . 'wp-admin/includes/template.php');
        $myListTable = new My_Example_List_Table();
    }

    echo '</pre><div class="wrap"><h2>Mi Prueba de Lista de Tabla</h2>';
    $myListTable->prepare_items();

?>
<form method="post">
    <input type="hidden" name="page" value="ttest_list_table">
<?php

    $myListTable->search_box('buscar', 'search_id');
    $myListTable->display();

    echo '</form></div>';
}
17 dic 2015 23:24:02
Comentarios

De esta manera estás cargando (muy temprano) los 4 archivos en todas las solicitudes del frontend, incluso para las páginas que no usan la función my_render_list_page(). ¿Por qué no requieres el archivo e instancias la clase dentro de la función my_render_list_page()? Esto hace el código más simple, más legible y libre de globales...

gmazzap gmazzap
19 dic 2015 02:30:33

Buen punto @gmazzap

jgraup jgraup
24 ago 2016 23:03:34

@jgraup Gracias por esto. Funciona. Sin embargo, tengo un aviso de error que aparece: Notice: Undefined index: hook_suffix in \wp-admin\includes\class-wp-screen.php on line 213

samjco-com samjco-com
15 sept 2019 05:54:06