|
แจก Data Table class ตารางแสดงรายการข้อมูลพร้อม responsive |
แจก Data Table class ตารางแสดงรายการข้อมูลพร้อม responsive คลาสตารางแสดงรายการข้อมูล (data table, list table) ที่จะทำให้ระบบของคุณมีรูปแบบที่เป็นมาตรฐานมากขึ้น เป็นระเบียบมากขึ้น. รองรับการแสดงผลทุกขนาดหน้าจอ (responsive)
คลาส Data Table นี้คัดลอกดัดแปลงมาจากคลาส List table ของ WordPress
Download
Link 1 Link 2 ติดตั้งผ่าน Composer
เอกสารอ้างอิง API
การติดตั้ง
ขอแนะนำให้คุณติดตั้งผ่าน Composer ซึ่งจะได้ใช้ Autoload และมันก็ทำงานได้ง่ายกว่ากันมาก. แต่หากคุณทำการติดตั้งแบบดำเนินการเอง ก็ให้ทำการ include ไฟล์ทั้งหมดต่อไปนี้โดยตรวจสอบ path ให้ถูกต้อง.
Code (PHP)
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.
กำหนดฐานข้อมูล
คุณจำเป็นต้องกำหนดค่าฐานข้อมูลให้กับคลาสนี้.
Code (PHP)
$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.
Code (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 ที่จะแสดงตารางรายการข้อมูล ให้เขียนโค้ดง่ายๆแค่นี้ในส่วนตำแหน่งที่จะแสดงตารางรายการข้อมูล.
Code (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 ทั้งหมด โปรดเปิดดูเพิ่มเติมในไฟล์ที่ดาวน์โหลดไป.
|
|
|
|
|
|
|
|
By : |
mr.v
|
|
Article : |
บทความเป็นการเขียนโดยสมาชิก หากมีปัญหาเรื่องลิขสิทธิ์ กรุณาแจ้งให้ทาง webmaster ทราบด้วยครับ |
|
Score Rating : |
|
|
Create Date : |
2016-11-01 |
|
Download : |
No files |
|
Sponsored Links |
|
|
|
|
|
|