Update Article: 156

Category ID

Content Name

Clear URLs

URL Off page

Content Desc

<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>Yii2 ListView เป็น Widget ที่ใช้แสดงผลข้อมูลในรูปแบบรายการ โดยสามารถแสดงผลข้อมูลจาก Data Provider ในรูปแบบรายการและสามารถใช้งาน Pagination ได้ นอกจากนี้ยังสามารถกำหนดการแสดงผลและการใช้งานของ ListView ตามต้องการได้ โดยการกำหนด property ต่าง ๆ ของ ListView ที่สำคัญได้แก่ itemView, summary, emptyText, emptyTextOptions, pager และอื่นๆ</p>
<p>การใช้งาน Yii2 ListView สามารถทำได้ง่าย ๆ โดยกำหนด Data Provider ที่ต้องการแสดงผลแล้วใช้งาน ListView ในรูปแบบต่าง ๆ ตามที่ต้องการผลลัพธ์ที่ได้จะเป็นการแสดงผลข้อมูลในรูปแบบรายการให้แก่ผู้ใช้งาน</p>
<p>ตัวอย่างการใช้งาน Yii2 ListView ดังนี้</p>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-php"><span class="hljs-keyword">use</span> <span class="hljs-title">yii</span>\<span class="hljs-title">widgets</span>\<span class="hljs-title">ListView</span>;
<span class="hljs-keyword">use</span> <span class="hljs-title">app</span>\<span class="hljs-title">models</span>\<span class="hljs-title">Post</span>;

<span class="hljs-variable">$dataProvider</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">ActiveDataProvider</span>([
    <span class="hljs-string">'query'</span> =&gt; <span class="hljs-title class_">Post</span>::<span class="hljs-title function_ invoke__">find</span>(),
    <span class="hljs-string">'pagination'</span> =&gt; [
        <span class="hljs-string">'pageSize'</span> =&gt; <span class="hljs-number">10</span>,
    ],
]);

<span class="hljs-keyword">echo</span> <span class="hljs-title class_">ListView</span>::<span class="hljs-title function_ invoke__">widget</span>([
    <span class="hljs-string">'dataProvider'</span> =&gt; <span class="hljs-variable">$dataProvider</span>,
    <span class="hljs-string">'itemView'</span> =&gt; <span class="hljs-string">'_post_item'</span>,
]);
</code></div>
</div>
<p>ในตัวอย่างนี้ เรากำหนด <code>itemView</code> ให้เป็น <code>_post_item</code> ซึ่งเป็น View ที่ใช้แสดงผลข้อมูลแต่ละรายการ โดยสามารถกำหนด View นี้ได้ตามต้องการ และสามารถใช้ Model ที่ได้รับมาผ่าน Data Provider ในการแสดงผลข้อมูลแต่ละรายการได้&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>สำหรับการกำหนด Layout ของ ListView สามารถกำหนดได้โดยใช้ property <code>layout</code> ซึ่งสามารถกำหนดได้ตามต้องการ เช่น</p>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-php"><span class="hljs-keyword">echo</span> <span class="hljs-title class_">ListView</span>::<span class="hljs-title function_ invoke__">widget</span>([
    <span class="hljs-string">'dataProvider'</span> =&gt; <span class="hljs-variable">$dataProvider</span>,
    <span class="hljs-string">'itemView'</span> =&gt; <span class="hljs-string">'_post_item'</span>,
    <span class="hljs-string">'layout'</span> =&gt; <span class="hljs-string">"{items}\n&lt;div class='text-center'&gt;{pager}&lt;/div&gt;"</span>,
]);
</code></div>
</div>
<p>ในตัวอย่างนี้ เรากำหนด <code>layout</code> ให้แสดงผลรายการและ Pagination โดยใช้ <code>{items}</code> และ <code>{pager}</code> ตามลำดับ และกำหนดให้ Pagination แสดงตำแหน่งอยู่ตรงกลางด้านล่างของ ListView ด้วย CSS class <code>text-center</code></p>
<p>สำหรับการใช้งาน Pagination ใน Yii2 ListView สามารถกำหนดได้โดยใช้ property <code>pager</code> ซึ่งสามารถกำหนด Options ของ Pagination ต่าง ๆ ได้ เช่น</p>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-php"><span class="hljs-keyword">echo</span> <span class="hljs-title class_">ListView</span>::<span class="hljs-title function_ invoke__">widget</span>([
    <span class="hljs-string">'dataProvider'</span> =&gt; <span class="hljs-variable">$dataProvider</span>,
    <span class="hljs-string">'itemView'</span> =&gt; <span class="hljs-string">'_post_item'</span>,
    <span class="hljs-string">'pager'</span> =&gt; [
        <span class="hljs-string">'options'</span> =&gt; [<span class="hljs-string">'class'</span> =&gt; <span class="hljs-string">'pagination'</span>],
        <span class="hljs-string">'prevPageLabel'</span> =&gt; <span class="hljs-string">'&amp;laquo;'</span>,
        <span class="hljs-string">'nextPageLabel'</span> =&gt; <span class="hljs-string">'&amp;raquo;'</span>,
        <span class="hljs-string">'maxButtonCount'</span> =&gt; <span class="hljs-number">5</span>,
    ],
]);
</code></div>
</div>
<p>ในตัวอย่างนี้ เรากำหนด <code>pager</code> ให้แสดง Pagination ในรูปแบบของ Bootstrap โดยใช้ CSS class <code>pagination</code> และกำหนด <code>prevPageLabel</code> และ <code>nextPageLabel</code> สำหรับปุ่ม Previous และ Next ตามลำดับ และกำหนด <code>maxButtonCount</code> สำหรับกำหนดจำนวนเลขหน้าที่แสดงใน Pagination&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>สำหรับการกำหนด Options สำหรับ Element แต่ละรายการ ใน Yii2 ListView สามารถกำหนดได้โดยใช้ property <code>itemOptions</code> เช่น</p>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-php"><span class="hljs-keyword">echo</span> <span class="hljs-title class_">ListView</span>::<span class="hljs-title function_ invoke__">widget</span>([
    <span class="hljs-string">'dataProvider'</span> =&gt; <span class="hljs-variable">$dataProvider</span>,
    <span class="hljs-string">'itemView'</span> =&gt; <span class="hljs-string">'_post_item'</span>,
    <span class="hljs-string">'itemOptions'</span> =&gt; [
        <span class="hljs-string">'tag'</span> =&gt; <span class="hljs-string">'div'</span>,
        <span class="hljs-string">'class'</span> =&gt; <span class="hljs-string">'post-item'</span>,
    ],
]);
</code></div>
</div>
<p>ในตัวอย่างนี้ เรากำหนด <code>itemOptions</code> ให้แต่ละรายการใน ListView ใช้ tag <code>&lt;div&gt;</code> และ CSS class <code>post-item</code> เพื่อปรับแต่งรายการแต่ละรายการให้เหมาะสม</p>
<p>สำหรับการกำหนด Separator ระหว่างรายการ ใน Yii2 ListView สามารถกำหนดได้โดยใช้ property <code>separator</code> เช่น</p>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-php"><span class="hljs-keyword">echo</span> <span class="hljs-title class_">ListView</span>::<span class="hljs-title function_ invoke__">widget</span>([
    <span class="hljs-string">'dataProvider'</span> =&gt; <span class="hljs-variable">$dataProvider</span>,
    <span class="hljs-string">'itemView'</span> =&gt; <span class="hljs-string">'_post_item'</span>,
    <span class="hljs-string">'separator'</span> =&gt; <span class="hljs-string">'&lt;hr&gt;'</span>,
]);
</code></div>
</div>
<p>ในตัวอย่างนี้ เรากำหนด <code>separator</code> ให้แสดงผลเป็น tag <code>&lt;hr&gt;</code> เพื่อแยกแต่ละรายการใน ListView โดยเป็นตัวอย่างเท่านั้น สามารถปรับแต่งได้ตามต้องการ</p>
<p>สำหรับการกำหนด Summary ของ ListView ใน Yii2 สามารถกำหนดได้โดยใช้ property <code>summary</code> เช่น</p>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-php"><span class="hljs-keyword">echo</span> <span class="hljs-title class_">ListView</span>::<span class="hljs-title function_ invoke__">widget</span>([
    <span class="hljs-string">'dataProvider'</span> =&gt; <span class="hljs-variable">$dataProvider</span>,
    <span class="hljs-string">'itemView'</span> =&gt; <span class="hljs-string">'_post_item'</span>,
    <span class="hljs-string">'summary'</span> =&gt; <span class="hljs-string">'Showing {count} of {totalCount} posts.'</span>,
]);
</code></div>
</div>
<p>ในตัวอย่างนี้ เรากำหนด <code>summary</code> ให้แสดงผลจำนวนข้อมูลที่แสดงผลอยู่ โดยใช้ <code>{count}</code> และ <code>{totalCount}</code> ในการแทนค่าจำนวนข้อมูลที่แสดงและทั้งหมดใน Data Provider ตามลำดับ&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>สำหรับการสร้าง Custom Layout สำหรับ ListView ใน Yii2 สามารถทำได้โดยใช้ property <code>layout</code> และสร้าง View สำหรับแสดงผลตามต้องการ เช่น</p>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-bash"><span class="hljs-built_in">echo</span> ListView::widget([
    <span class="hljs-string">'dataProvider'</span> =&gt; <span class="hljs-variable">$dataProvider</span>,
    <span class="hljs-string">'layout'</span> =&gt; <span class="hljs-string">'&lt;div class="list-view"&gt;{items}&lt;/div&gt;&lt;div class="text-center"&gt;{pager}&lt;/div&gt;'</span>,
    <span class="hljs-string">'itemView'</span> =&gt; <span class="hljs-keyword">function</span> (<span class="hljs-variable">$model</span>, <span class="hljs-variable">$key</span>, <span class="hljs-variable">$index</span>, <span class="hljs-variable">$widget</span>) {
        <span class="hljs-built_in">return</span> <span class="hljs-variable">$this</span>-&gt;render(<span class="hljs-string">'_post_item'</span>, [
            <span class="hljs-string">'model'</span> =&gt; <span class="hljs-variable">$model</span>,
            <span class="hljs-string">'index'</span> =&gt; <span class="hljs-variable">$index</span>,
        ]);
    },
]);
</code></div>
</div>
<p>ในตัวอย่างนี้ เรากำหนด <code>layout</code> โดยกำหนด <code>&lt;div&gt;</code> สองตัว แยกออกจากกันด้วย <code>{items}</code> และ <code>{pager}</code> และกำหนดให้ <code>itemView</code> เป็นฟังก์ชั่นที่ return View <code>_post_item</code> โดยส่งค่า <code>$model</code> และ <code>$index</code> เข้าไปใน View นั้น</p>
<p>สำหรับการสร้าง Custom Layout อื่น ๆ ใน Yii2 สามารถใช้ HTML, CSS และ JavaScript ได้ตามปกติ โดยใช้ <code>itemView</code> ในการแสดงผลข้อมูลแต่ละรายการ และ <code>pager</code> สำหรับแสดง Pagination ตามต้องการ&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>สำหรับการใช้งาน Filter ใน Yii2 ListView สามารถกำหนด Filter ได้ผ่าน property <code>filterModel</code> และ <code>filters</code> เช่น</p>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-php"><span class="hljs-keyword">echo</span> <span class="hljs-title class_">ListView</span>::<span class="hljs-title function_ invoke__">widget</span>([
    <span class="hljs-string">'dataProvider'</span> =&gt; <span class="hljs-variable">$dataProvider</span>,
    <span class="hljs-string">'itemView'</span> =&gt; <span class="hljs-string">'_post_item'</span>,
    <span class="hljs-string">'filterModel'</span> =&gt; <span class="hljs-variable">$searchModel</span>,
    <span class="hljs-string">'filters'</span> =&gt; [
        [
            <span class="hljs-string">'attribute'</span> =&gt; <span class="hljs-string">'title'</span>,
            <span class="hljs-string">'operator'</span> =&gt; <span class="hljs-string">'like'</span>,
            <span class="hljs-string">'options'</span> =&gt; [<span class="hljs-string">'placeholder'</span> =&gt; <span class="hljs-string">'Search by title'</span>],
        ],
        [
            <span class="hljs-string">'attribute'</span> =&gt; <span class="hljs-string">'status'</span>,
            <span class="hljs-string">'type'</span> =&gt; <span class="hljs-title class_">ListView</span>::<span class="hljs-variable constant_">FILTER_SELECT</span>,
            <span class="hljs-string">'operator'</span> =&gt; <span class="hljs-string">'='</span>,
            <span class="hljs-string">'options'</span> =&gt; [<span class="hljs-string">'prompt'</span> =&gt; <span class="hljs-string">'Select status'</span>],
            <span class="hljs-string">'items'</span> =&gt; [<span class="hljs-string">'draft'</span> =&gt; <span class="hljs-string">'Draft'</span>, <span class="hljs-string">'published'</span> =&gt; <span class="hljs-string">'Published'</span>, <span class="hljs-string">'archived'</span> =&gt; <span class="hljs-string">'Archived'</span>],
        ],
    ],
]);
</code></div>
</div>
<p>ในตัวอย่างนี้ เรากำหนด <code>filterModel</code> เป็น <code>$searchModel</code> ซึ่งเป็น Model ที่ใช้สำหรับการ Filter และกำหนด <code>filters</code> เพื่อกำหนดตัวเลือกในการ Filter โดยกำหนด <code>attribute</code> เป็นชื่อ Attribute ที่จะ Filter และกำหนด <code>operator</code> เป็น Operator ที่จะใช้ Filter และกำหนด Options สำหรับ Filter โดยใช้ <code>options</code> และกำหนดชนิดของ Filter ใน <code>type</code> ด้วย <code>ListView::FILTER_SELECT</code> สำหรับ Filter แบบเลือกตัวเลือก และกำหนดรายการตัวเลือกใน <code>items</code></p>
<p>สำหรับการกำหนด Filter อื่น ๆ ใน Yii2 ListView สามารถใช้ Option <code>filterPosition</code> เพื่อกำหนดตำแหน่งของ Filter ได้ โดยมีค่า Default เป็น <code>false</code> หรือไม่แสดง Filter ใน ListView แต่ถ้ากำหนดเป็น <code>header</code> หรือ <code>footer</code> จะแสดง Filter ที่ส่วนหัวหรือส่วนท้ายของ ListView ได้เช่นกัน&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>สำหรับการใช้งานการเรียงลำดับ (Sorting) ใน Yii2 ListView สามารถกำหนดได้ผ่าน property <code>sorter</code> ซึ่งสามารถกำหนด Options ของการเรียงลำดับได้เช่นเดียวกับ GridView เช่น</p>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-php"><span class="hljs-keyword">echo</span> <span class="hljs-title class_">ListView</span>::<span class="hljs-title function_ invoke__">widget</span>([
    <span class="hljs-string">'dataProvider'</span> =&gt; <span class="hljs-variable">$dataProvider</span>,
    <span class="hljs-string">'itemView'</span> =&gt; <span class="hljs-string">'_post_item'</span>,
    <span class="hljs-string">'sorter'</span> =&gt; [
        <span class="hljs-string">'attributes'</span> =&gt; [<span class="hljs-string">'title'</span>, <span class="hljs-string">'created_at'</span>],
    ],
]);
</code></div>
</div>
<p>ในตัวอย่างนี้ เรากำหนด <code>sorter</code> ให้กำหนด Attributes ที่ใช้ในการเรียงลำดับ ซึ่งในกรณีนี้เรากำหนดให้เรียงตาม Title และ Created At</p>
<p>สำหรับการกำหนด Sorter อื่น ๆ ใน Yii2 ListView สามารถใช้ Option <code>sorterPosition</code> เพื่อกำหนดตำแหน่งของ Sorter ได้ โดยมีค่า Default เป็น <code>false</code> หรือไม่แสดง Sorter ใน ListView แต่ถ้ากำหนดเป็น <code>header</code> หรือ <code>footer</code> จะแสดง Sorter ที่ส่วนหัวหรือส่วนท้ายของ ListView ได้เช่นกัน&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>สำหรับการใช้งานการแบ่งหน้า (Pagination) ใน Yii2 ListView สามารถกำหนดได้ผ่าน property <code>pager</code> ซึ่งสามารถกำหนด Options ของการแบ่งหน้าได้เช่นเดียวกับ GridView เช่น</p>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-php"><span class="hljs-keyword">echo</span> <span class="hljs-title class_">ListView</span>::<span class="hljs-title function_ invoke__">widget</span>([
    <span class="hljs-string">'dataProvider'</span> =&gt; <span class="hljs-variable">$dataProvider</span>,
    <span class="hljs-string">'itemView'</span> =&gt; <span class="hljs-string">'_post_item'</span>,
    <span class="hljs-string">'pager'</span> =&gt; [
        <span class="hljs-string">'firstPageLabel'</span> =&gt; <span class="hljs-string">'First'</span>,
        <span class="hljs-string">'lastPageLabel'</span> =&gt; <span class="hljs-string">'Last'</span>,
        <span class="hljs-string">'prevPageLabel'</span> =&gt; <span class="hljs-string">'Previous'</span>,
        <span class="hljs-string">'nextPageLabel'</span> =&gt; <span class="hljs-string">'Next'</span>,
        <span class="hljs-string">'maxButtonCount'</span> =&gt; <span class="hljs-number">3</span>,
    ],
]);
</code></div>
</div>
<p>ในตัวอย่างนี้ เรากำหนด <code>pager</code> ให้กำหนด Label ของแต่ละปุ่มใน Pagination และกำหนด <code>maxButtonCount</code> ให้แสดงปุ่มแบบย่อ ๆ สูงสุด 3 ปุ่ม</p>
<p>สำหรับการกำหนด Pagination อื่น ๆ ใน Yii2 ListView สามารถใช้ Option <code>pagerPosition</code> เพื่อกำหนดตำแหน่งของ Pagination ได้ โดยมีค่า Default เป็น <code>bottom</code> หรือแสดง Pagination ใต้ส่วนของ ListView แต่ถ้ากำหนดเป็น <code>top</code> จะแสดง Pagination บนส่วนของ ListView&nbsp;</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
<p>สำหรับการใช้งานการค้นหา (Search) ใน Yii2 ListView สามารถใช้ Filter และ Sorter เพื่อให้ผู้ใช้งานสามารถค้นหาและเรียงลำดับข้อมูลได้ โดยต้องกำหนด Model สำหรับการค้นหา (Search Model) ซึ่งต้องเป็น Model ที่สืบทอดจาก <code>yii\base\Model</code> และมีการกำหนด Rules สำหรับการค้นหา สามารถกำหนดได้เช่นเดียวกับ Model สำหรับการ Validate หรือจัดการข้อมูลใน Yii2</p>
<div class="bg-black rounded-md mb-4">
<div class="flex items-center relative text-gray-200 bg-gray-800 px-4 py-2 text-xs font-sans justify-between rounded-t-md"></div>
<div class="p-4 overflow-y-auto"><code class="!whitespace-pre hljs language-php"><span class="hljs-comment">// Search Model</span>
<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">PostSearch</span> <span class="hljs-keyword">extends</span> \<span class="hljs-title">yii</span>\<span class="hljs-title">base</span>\<span class="hljs-title">Model</span>
</span>{
    <span class="hljs-keyword">public</span> <span class="hljs-variable">$title</span>;
    <span class="hljs-keyword">public</span> <span class="hljs-variable">$status</span>;

<span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">rules</span>(<span class="hljs-params"></span>)
    </span>{
        <span class="hljs-keyword">return</span> [
            [[<span class="hljs-string">'title'</span>, <span class="hljs-string">'status'</span>], <span class="hljs-string">'safe'</span>],
        ];
    }

<span class="hljs-keyword">public</span> <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">search</span>(<span class="hljs-params"><span class="hljs-variable">$params</span></span>)
    </span>{
        <span class="hljs-variable">$query</span> = <span class="hljs-title class_">Post</span>::<span class="hljs-title function_ invoke__">find</span>();

<span class="hljs-keyword">if</span> (!(<span class="hljs-variable language_">$this</span>-&gt;<span class="hljs-title function_ invoke__">load</span>(<span class="hljs-variable">$params</span>) &amp;&amp; <span class="hljs-variable language_">$this</span>-&gt;<span class="hljs-title function_ invoke__">validate</span>())) {
            <span class="hljs-keyword">return</span> <span class="hljs-variable">$dataProvider</span>;
        }

<span class="hljs-variable">$query</span>-&gt;<span class="hljs-title function_ invoke__">andFilterWhere</span>([<span class="hljs-string">'like'</span>, <span class="hljs-string">'title'</span>, <span class="hljs-variable">$this</span>-&gt;title])
            -&gt;<span class="hljs-title function_ invoke__">andFilterWhere</span>([<span class="hljs-string">'status'</span> =&gt; <span class="hljs-variable">$this</span>-&gt;status]);

<span class="hljs-keyword">return</span> <span class="hljs-variable">$dataProvider</span>;
    }
}

<span class="hljs-comment">// View</span>
<span class="hljs-keyword">use</span> <span class="hljs-title">yii</span>\<span class="hljs-title">widgets</span>\<span class="hljs-title">ActiveForm</span>;

<span class="hljs-variable">$model</span> = <span class="hljs-keyword">new</span> <span class="hljs-title class_">PostSearch</span>();
<span class="hljs-variable">$form</span> = <span class="hljs-title class_">ActiveForm</span>::<span class="hljs-title function_ invoke__">begin</span>([
    <span class="hljs-string">'action'</span> =&gt; [<span class="hljs-string">'index'</span>],
    <span class="hljs-string">'method'</span> =&gt; <span class="hljs-string">'get'</span>,
]);

<span class="hljs-keyword">echo</span> <span class="hljs-variable">$form</span>-&gt;<span class="hljs-title function_ invoke__">field</span>(<span class="hljs-variable">$model</span>, <span class="hljs-string">'title'</span>);
<span class="hljs-keyword">echo</span> <span class="hljs-variable">$form</span>-&gt;<span class="hljs-title function_ invoke__">field</span>(<span class="hljs-variable">$model</span>, <span class="hljs-string">'status'</span>)-&gt;<span class="hljs-title function_ invoke__">dropDownList</span>([<span class="hljs-string">'draft'</span> =&gt; <span class="hljs-string">'Draft'</span>, <span class="hljs-string">'published'</span> =&gt; <span class="hljs-string">'Published'</span>, <span class="hljs-string">'archived'</span> =&gt; <span class="hljs-string">'Archived'</span>]);

<span class="hljs-keyword">echo</span> \yii\helpers<span class="hljs-title class_">\Html</span>::<span class="hljs-title function_ invoke__">submitButton</span>(<span class="hljs-string">'Search'</span>, [<span class="hljs-string">'class'</span> =&gt; <span class="hljs-string">'btn btn-primary'</span>]);

<span class="hljs-title class_">ActiveForm</span>::<span class="hljs-title function_ invoke__">end</span>();

Content Short

Content Img Alt

Content Tag

อัพโหลดรูปภาพ

สำหรับ SEO

Meta Title

Meta Desc

Meta Keyword

Og Title

Og Desc

สถานะเปิดใช้งานบทความ

Back home