version 4.1.0

ตัวอย่างระบบแสดงรายการข้อมูลพร้อมโค๊ดแบ่งหน้า

  อังคารที่ 27 มกราคม พ.ศ. 2558 เวลา 08:57:39 น.      2,499 ครั้ง


ตัวอย่างระบบแสดงรายการข้อมูลพร้อมโค๊ดแบ่งหน้า

แนะนำ

ตัวอย่างนี้ จะเป็นตัวอย่างวิธีการดึงข้อมูลออกมาจากฐานข้อมูล ออกแสดงออกในรูปแบบ "ตารางข้อมูล" ทั้งหมดออกมา โดยที่จะมีโค๊คที่ใช้สำหรับการจัดแบ่งหน้าการแสดงข้อมูลออกเป็นหลาย ๆ หน้า และง่ายต่อการแสดงผลมากยิ่งขึ้น

บทนี้มีอะไรบ้าง

  1. ตอนที่ 1 จัดเตรียมตารางและข้อมูล สำหรับการทดสอบไว้ให้พร้อม
  2. ตอนที่ 2 เขียนคำสั่งดึงข้อมูลและเรียกใช้งานคำสั่งสำหรับใช้แบ่งหน้า
  3. ตอนที่ 3 เขียนคำสั่งแสดงข้อมูลและโค๊ดแบ่งหน้าในไฟล์ View
  4. ตอนที่ 4 ทดสอบการแสดงผล "ตาราง" และ "โค๊ดแบ่งหน้า"
  5. ตอนที่ 5 การใช้งานในแบบอื่น ๆ

สร้างตาราง ชื่อว่า "tbl_product"

 CREATE TABLE IF NOT EXISTS `tbl_product` (
  `id` int(5) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) COLLATE utf8_unicode_ci NOT NULL,
  `price` int(5) NOT NULL,
  `amount` int(3) NOT NULL,
  `create_at` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=9 ;

1. พิมพ์คำสั่ง SQL "สร้างตาราง" ด้านบน ลงบน PhpMyAdmin ของเครื่องเราที่จะใช้สำหรับการทดสอบ

เพิ่มข้อมูลลงตาราง "tbl_product"

 
INSERT INTO `tbl_product` (`id`, `name`, `price`, `amount`, `create_at`) VALUES
(1, 'product 1', 255, 23, '2015-02-02 11:27:13'),
(2, 'product 2', 199, 10, '2015-02-02 11:27:25'),
(3, 'product 3', 99, 32, '2015-02-02 11:28:17'),
(4, 'product 4', 100, 85, '2015-02-02 11:28:19'),
(5, 'product 5', 950, 5, '2015-02-02 11:28:21'),
(6, 'product 6', 850, 12, '2015-02-02 11:28:23'),
(7, 'product 7', 150, 65, '2015-02-02 11:28:25'),
(8, 'product 8', 260, 25, '2015-02-02 11:28:28');

2. พิมพ์คำสั่ง SQL "เพิ่มข้อมูล" ด้านบน ลงบน PhpMyAdmin ของเครื่องเราที่จะใช้สำหรับการทดสอบ

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 1 | รูปภาพตัวอย่าง

3. สร้างไฟล์ Model ชื่อว่า "Tbl_Product" ด้วย Phalcon DevTools V.1.3.4 ตามรูปด้วยนะครับ



เพิ่มคำสั่งลงใน indexAction()

 class ExampleController extends ControllerBase
{
    public function indexAction()
    {
        $limit = 4; // จำนวนรายการ / หน้า                                
        $currentPage = $this->request->getQuery('page', 'int');                                
        $model = TblProduct::find(array(
            'order' => 'create_at DESC'
        ));                                
        $paginator = new \Phalcon\Paginator\Adapter\Model(
            array(
                "data" => $model,
                "limit" => $limit,
                "page" => ($currentPage == 0) ? 1 : $currentPage
            )
        );
        $data = $paginator->getPaginate();
        $this->view->setVars(array(
            'data' => $data
        ));
    }
}


รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 2 | รูปภาพตัวอย่าง

คำสั่งภายในไฟล์ "index.volt"

 
<table class="table" align="center" border="1">
    <thead>
        <tr>
            <th width="50">id</th>
            <th width="100">name</th>
            <th width="80">price</th>
            <th width="80">amount</th>
            <th width="180">create_at</th>
        </tr>
    </thead>
    <tbody>
    {% if data.items is defined %}
    {% for row in data.items %}
        <tr>
            <td style="text-align:center;">{{ row.id }}</td>
            <td style="text-align:left;">{{ row.name }}</td>
            <td style="text-align:right;">{{ row.price }}.-</td>
            <td style="text-align:right;">{{ row.amount }}</td>
            <td style="text-align:center;">{{ row.create_at }}</td>
        </tr>
    {% endfor %}
    {% endif %}
    </tbody>
</table>

คำสั่งแสดง "โค๊ดแบ่งหน้า" (pagination)

 ..... 
</table>

<div style="text-align:center;">
    <p>หน้า {{ data.current }} / {{ data.total_pages }} ทั้งหมด </p>                               
    <nav>
        <ul class="pagination" style="list-style:none;margin-left:-45px;">
            <li style="float:left;padding:0px 5px;">
                {{ link_to("example/", "First") }}
            </li>
            <li style="float:left;padding:0px 5px;">
                {{ link_to("example?page=" ~ data.before, "Previous") }}
            </li>
            <li style="float:left;padding:0px 5px;">
                {{ link_to("example?page=" ~ data.next, "Next") }}
            </li>
            <li style="float:left;padding:0px 5px;">
                {{ link_to("example?page=" ~ data.last, "Last") }}
            </li>
        </ul>
    </nav>
</div>    


รูปภาพตัวอย่าง หน้าแรก

รูปภาพตัวอย่าง หน้าแรก

รูปภาพที่ 3 | รูปภาพตัวอย่าง หน้าแรก

รูปภาพตัวอย่าง หน้าสอง

รูปภาพตัวอย่าง หน้าสอง

รูปภาพที่ 4 | รูปภาพตัวอย่าง หน้าสอง



ตัวอย่างคำสั่ง

 // Current page to show
// In a controller this can be:
// $this->request->getQuery('page', 'int'); // GET
// $this->request->getPost('page', 'int'); // POST
$currentPage = (int) $_GET["page"];  

// limit in page
$limit = 2;

/******************* Example 1 *******************/
// Passing an array as data
$paginator = new \Phalcon\Paginator\Adapter\NativeArray(
    array(
        "data" => array(
            array('id' => 1, 'name' => 'Artichoke'),
            array('id' => 2, 'name' => 'Carrots'),
            array('id' => 3, 'name' => 'Beet'),
            array('id' => 4, 'name' => 'Lettuce'),
            array('id' => 5, 'name' => '')
        ),
        "limit" => $limit,
        "page"  => $currentPage
    )
);
$data = $paginator->getPaginate();
    
/******************* Example 2 *******************/
// Passing a querybuilder as data
$builder = $this->modelsManager->createBuilder()
    ->columns('id, name')
    ->from('Robots')
    ->orderBy('name');

$paginator = new Phalcon\Paginator\Adapter\QueryBuilder(array(
    "builder" => $builder,
    "limit"=> $limit,
    "page" => $currentPage
));
$data = $paginator->getPaginate();



Credit

  ขอบคุณข้อมูลจากเว็บไซต์ phalconphp.com


นักแปล / นักเขียน / เรียบเรียง

author

เอกบิณ ใจแก้วมา (แม็ก)

"โปรแกรมเมอร์ตัวเล็ก ๆ" สะสมประสบการณ์ด้านการพัฒนาซอฟแวร์มามากกว่า 11 ปี
# ติดตามผลงานได้ที่ | พบกับเราที่ Google+ | Facebook






Comment