Data Table ตารางแสดงรายการข้อมูล

การแสดงรายการข้อมูลในตาราง หากจะมองว่าเป็นเรื่องง่ายก็ง่าย แต่ถ้าหากว่ามีตารางแสดงรายการข้อมูล หลายๆหน้า หลายๆรายการที่ต้องแสดง การเขียน for each ซ้ำๆ การเขียน sortable query ซ้ำๆ การต้องมาเขียนแบ่งหน้าซ้ำๆ ก็อาจทำให้รู้สึกน่าเบื่อได้เหมือนกัน. การใช้คลาส Data Table จะช่วยลดงานซ้ำๆทั้งหลายให้มันมีรูปแบบที่ตายตัวมากขึ้นเพื่อความเป็นระเบียบมากขึ้น.

คลาส Data Table นี้คัดลอกดัดแปลงมาจากคลาส List table ของ WordPress

Download หรือติดตั้งผ่าน Composer

อ้างอิง เอกสาร API

รูปตัวอย่างการทำงานของคลาส Data Table ในแบบ responsive.

ตัวอย่าง

การติดตั้ง

ขอแนะนำให้คุณติดตั้งผ่าน Composer ซึ่งจะได้ใช้ Autoload และมันก็ทำงานได้ง่ายกว่ากันมาก. แต่หากคุณทำการติดตั้งแบบดำเนินการเอง ก็ให้ทำการ include ไฟล์ทั้งหมดต่อไปนี้โดยตรวจสอบ path ให้ถูกต้อง.

require_once '/path/to/Rundiz/DataTable/DataTable.php';
require_once '/path/to/Rundiz/DataTable/Database.php';
if (!class_exists('\\Rundiz\\Pagination\\Pagination')) {
    require_once '/path/to/Pagination.php';
}

หากคุณไม่ได้ติดตั้งผ่าน Composer คุณจำเป็นต้องดาวน์โหลดคลาส Pagination ไว้สำหรับใช้แบ่งหน้าด้วย หรือจะใช้จากไฟล์ _Pagination.php ในโฟลเดอร์ tests/via-http ของแพ็คเกจนี้ก็ได้เหมือนกัน แต่จะไม่อัพเดทเท่าดาวน์โหลดจาก repository Pagination โดยตรง.

ให้สร้างฐานข้อมูล และ import ไฟล์ที่ชื่อ mysql_db_test_dummy_data.sql อยู่ในโฟลเดอร์ tests/via-http เพื่อใช้ในการทดสอบ. โดยในไฟล์ sql นี้จะสร้างตารางที่ชื่อ people_dummy_data.

กำหนดฐานข้อมูล

คุณจำเป็นต้องกำหนดค่าฐานข้อมูลให้กับคลาสนี้.

$db['dsn'] = 'mysql:dbname=YOUR_DB_NAME;host=localhost;port=3306;charset=UTF8';
$db['username'] = 'admin';
$db['password'] = 'pass';
$db['options'] = [
    \PDO::ATTR_EMULATE_PREPARES => true,
    \PDO::ATTR_ERRMODE => \PDO::ERRMODE_EXCEPTION // throws PDOException.
];
$db['tablename'] = 'people_dummy_data';

เขียนทับ

คุณต้องเขียนทับคลาส Rundiz\DataTable\DataTable โดยการ extends ที่คลาสลูก. โปรดเปิดหน้าเอกสารอ้างอิง API เพื่อดูรายละเอียดเพิ่มเติมเกี่ยวกับ methods และ properties ทั้งหลายที่สามารถเขียนทับได้และวิธีการส่งและรับข้อมูลของมัน. สมมุติว่าคลาสลูกไฟล์นี้ชื่อไฟล์ PeopleDummyDataTable.php.

class PeopleDummyDataTable extends \Rundiz\DataTable\DataTable
{


    /**
     * @var string My table name.
     */
    public $myTable;


    /**
     * {@inheritDoc}
     */
    protected function columnDefault($row, $column_unique_name)
    {
        switch ($column_unique_name) {
            default:
                if (isset($row->{$column_unique_name})) {
                    return $row->{$column_unique_name};
                }
        }
    }// columnDefault


    /**
     * Special column method for "name".
     * 
     * @param object $row Data from PDO in each row from fetchAll() method.
     * @return string Return column content. Use return, not echo.
     */
    protected function columnName($row)
    {
        return $row->first_name . ' ' . $row->last_name;
    }// columnName


    /**
     * {@inheritDoc}
     */
    protected function getColumns()
    {
        return [
            'name' => 'Full name',
            'email' => 'Email',
            'gender' => 'Gender',
            'ip_address' => 'IP Address',
        ];
    }// getColumns


    /**
     * {@inheritDoc}
     */
    public function prepareData()
    {
        if (!class_exists('\\Rundiz\\Pagination\\Pagination') || !is_object($this->Pagination)) {
            throw new \Exception('The class \\Rundiz\\Pagination\\Pagination is not exists, please install rundiz/pagination class.');
        }

        $current_page = $this->getCurrentPage();

        $sql = 'SELECT COUNT(*) FROM `' . $this->myTable . '`';
        $stmt = $this->Database->PDO->prepare($sql);
        $stmt->execute();
        $total_items = $stmt->fetchColumn();
        unset($stmt);

        // order (column) and sort (asc, desc)
        $order = 'id';
        if (isset($_GET[$this->orderQueryName])) {
            if (in_array($_GET[$this->orderQueryName], ['id', 'first_name', 'last_name', 'email', 'gender', 'ip_address'])) {
                $order = $_GET[$this->orderQueryName];
            }
        }
        $sort = 'ASC';
        if (isset($_GET[$this->sortQueryName])) {
            if (in_array(strtoupper($_GET[$this->sortQueryName]), ['ASC', 'DESC'])) {
                $sort = strtoupper($_GET[$this->sortQueryName]);
            }
        }

        $sql = str_replace('COUNT(*)', '*', $sql);
        $sql .= ' ORDER BY `' . $order . '` ' . $sort;
        $sql .= ' LIMIT ' . (($current_page - 1) * $this->itemsPerPage) . ', ' . $this->itemsPerPage;
        $stmt = $this->Database->PDO->prepare($sql);
        $stmt->execute();
        $items = $stmt->fetchAll();
        unset($order, $sort, $sql, $stmt);

        $this->Pagination->base_url = (isset($_SERVER['HTTPS']) ? 'https://' : 'http://') . $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF'] . '?' . $this->paginationQueryName . '=%PAGENUMBER%';

        // set total items found and data items for listing to the properties.
        $this->totalItems = $total_items;
        $this->dataItems = $items;
        unset($current_page, $items, $total_items);
    }// prepareData


}

เริ่มใช้งานคลาส

ในไฟล์ PHP ที่จะแสดงตารางรายการข้อมูล ให้เขียนโค้ดง่ายๆแค่นี้ในส่วนตำแหน่งที่จะแสดงตารางรายการข้อมูล.

include 'PeopleDummyDataTable.php';

$PDDTable = new PeopleDummyDataTable(['pdoconfig' => $db]);
$PDDTable->myTable = $db['tablename'];
$PDDTable->prepareData();
$PDDTable->display();

หมายเหตุ หากคุณใช้ auto load คุณก็ไม่จำเป็นต้อง include. ตัวแปร $db มาจากการกำหนดฐานข้อมูลด้านบน.

สไตล์และสคริปต์ (Responsive)

สไตล์ชีทและจาวาสคริปต์สำหรับการแสดงผลแบบ responsive ถูกแนบมาเรียบร้อยแล้วอยู่ในโฟลเดอร์ tests/via-http. เช่น _rundiz-data-table.css, _rundiz-data-table.js. โดยส่วนของจาวาสคริปต์นั้นจะรวมฟังก์ชั่นการทำงานต่างๆเช่น การย่อ/ขยายตารางในหน้าจอแสดงผลขนาดเล็กไว้ด้วย แต่ทั้งนี้ไม่ได้ใส่ design ให้มากนักเพื่อให้คุณได้นำไปออกแบบตกแต่งเพิ่มเติมได้ตามใจ.

ตัวอย่างการทำงานอื่นๆ เช่น การปรับแต่งเต็มรูปแบบ อยู่ในโฟลเดอร์ tests/via-http ทั้งหมด โปรดเปิดดูเพิ่มเติมในไฟล์ที่ดาวน์โหลดไป.